npm 包 fetch-polyfill 使用教程

在前端开发中，数据请求接口是不可或缺的一部分。而 fetch API 可以让我们更方便地进行数据请求操作。然而，fetch API 并不在所有的浏览器中都实现了，这就需要引入 fetch-polyfill 这个 npm 包。本文将介绍如何使用 fetch-polyfill。

安装

通过 npm 安装 fetch-polyfill。

npm install fetch-polyfill --save

引入

在需要使用 fetch API 的模块中引入 fetch-polyfill。

import 'whatwg-fetch'

'whatwg-fetch' 是一个规范的 polyfill，用于实现符合标准的 fetch API。

使用示例

下面是一个使用 fetch API 进行 GET 请求的例子。

fetch('https://api.github.com/users/github')
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(error => console.error(error))

此时如果在不支持 fetch 的浏览器中运行，就会报错。这时候引入 fetch-polyfill 就可以实现在所有现代浏览器中使用 fetch API。

import 'whatwg-fetch'

fetch('https://api.github.com/users/github')
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(error => console.error(error))

注意事项

• fetch API 并不是所有浏览器都支持，需要引入 polyfill。
• polyfill 在使用时需要先引入，否则会报错。
• fetch API 的返回值是一个 Promise 对象，需要使用 then() 方法处理异步请求的结果。

总结

fetch-polyfill 是用于在所有浏览器中使用 fetch API 的 npm 包。在前端开发中我们经常使用 fetch API，通过本篇文章的介绍，你可以掌握如何正确地使用 fetch-polyfill 引入 fetch API，同时也要注意在使用 fetch API 时要处理异步请求的结果。

来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/the-fetch-polyfill