unfetch: 一个轻量级的Fetch API 实现

最新推荐文章于 2024-11-19 13:08:06 发布

陈宜旎Dean

最新推荐文章于 2024-11-19 13:08:06 发布

阅读量370

点赞数 3

本文链接：https://blog.csdn.net/gitblog_01128/article/details/141985222

版权

unfetch: 一个轻量级的Fetch API 实现

unfetch🐕 Bare minimum 500b fetch polyfill.项目地址:https://gitcode.com/gh_mirrors/un/unfetch

项目介绍

unfetch 是一个极其简洁的 Fetch APIpolyfill，专为那些不完全支持 Fetch 标准的环境设计。它旨在提供一个最小依赖的解决方案，适用于浏览器和服务器端渲染（Node.js环境），确保在各种环境下都能实现一致的HTTP请求能力。它的存在让开发者能够在老版本浏览器或特定平台中无缝地使用现代的Fetch接口。

项目快速启动

要立即开始使用 unfetch，您可以通过npm安装或者直接在浏览器中通过CDN引入。

NPM方式安装

npm install --save unfetch

之后，在您的项目中导入并使用：

const fetch = require('unfetch');

// 示例请求
fetch('https://api.example.com/data')
  .then(res => res.json())
  .then(data => console.log(data))
  .catch(err => console.error(err));

浏览器引入

对于直接在浏览器中使用，您可以将以下一行添加到HTML文件的<head>部分：

<script src="https://unpkg.com/unfetch"></script>

然后就可以在全局作用域下使用fetch函数了。

应用案例和最佳实践

简单的数据获取

fetch('https://api.example.com/users')
  .then(response => {
    if (!response.ok) throw new Error('Network response was not ok');
    return response.json();
  })
  .then(data => {
    console.table(data); // 显示数据表格
  })
  .catch(error => console.error('There has been a problem with your fetch operation:', error));

错误处理

始终检查响应的状态码来妥善处理错误情况，使用.ok属性或检查.status。

配合async/await的使用

(async () => {
  try {
    const response = await fetch('https://api.example.com/profile');
    const data = await response.json();
    console.log(data);
  } catch (error) {
    console.error('Fetch failed:', error);
  }
})();