在现代浏览器中，fetch 已成为前端发起网络请求的标准方法之一，但是对于一些老浏览器，可能没有对 fetch 的支持。为了解决这个问题，可以使用 fetch-extra-polyfill 这个 npm 包。
在本文中，我们将介绍如何使用 fetch-extra-polyfill 以及其使用方法和示例代码。
什么是 fetch-extra-polyfill？
fetch-extra-polyfill 是一个用于支持升级和填充 fetch API 的 JavaScript 库。这个库可以在所有浏览器中，包括 IE8+，中运行。
安装 fetch-extra-polyfill
使用 npm 包管理器可以非常容易地安装 fetch-extra-polyfill。在控制台中运行以下命令即可：
npm install fetch-extra-polyfill --save
使用 fetch-extra-polyfill
安装了 fetch-extra-polyfill 之后，我们需要将其导入到我们的 JavaScript 代码中。我们可以通过以下代码来导入：
import 'fetch-extra-polyfill';
然后，我们就可以使用 fetch 方法尽情地发起请求了！
fetch('/api/data')
.then(response => response.json())
.then(data => console.log(data))
.catch(error => console.error(error));使用 fetch-extra-polyfill 的注意事项
需要注意的是，如果你的代码中还有其他请求库，比如 axios 或者 superagent，这些库内部也使用了 fetch ，那么在使用 fetch-extra-polyfill 的时候，需要将其导入到这些库之前。例如：
import 'fetch-extra-polyfill';
import axios from 'axios';
axios.get('/api/data')
.then(response => console.log(response))
.catch(error => console.error(error));fetch-extra-polyfill 示例
接下来，我们将以一个简单的示例来展示 fetch-extra-polyfill 的使用。假设我们有一个后端 API 路径 '/api/data'，可以以 JSON 格式返回一些数据。我们需要使用 fetch-extra-polyfill 来获取这些数据并最终展示在页面上。
首先，让我们来创建一个 HTML 文件，并添加一个按钮和一个用于存储数据的 div：
-- -------------------- ---- ------- ------ ------ --------------------------- ---------- ------- ------ ------- ---------------------------- ---- -------------------------- ------- ---------------------- ------- -------
然后，我们来编写我们的 JavaScript 代码。首先，我们需要在按钮上添加点击事件监听，当按钮点击时，触发事件并调用 fetchData() 方法：
const fetchBtn = document.querySelector('#fetch-btn');
const dataContainer = document.querySelector('#data-container');
fetchBtn.addEventListener('click', fetchData);在 fetchData() 方法中，我们将使用 fetch-extra-polyfill 来获取数据并将其展示在页面上：
-- -------------------- ---- -------
-------- ----------- -
------------------
-------------- -- ----------------
---------- -- ------------------
------------ -- ----------------------
-
-------- ----------------- -
----------------------- - ---------------------
-现在，我们就可以启动本地服务器，并在浏览器中访问我们的 HTML 页面。在网页中，当我们点击按钮时，请求将发送到我们的后端 API 地址，然后将数据显示在页面上。
结论
fetch-extra-polyfill 是一个非常方便的 npm 包，可以帮助我们在不同浏览器中使用 fetch 方法。在使用时，我们只需要将它导入到我们的 JavaScript 代码中即可。
本文介绍了如何安装和使用 fetch-extra-polyfill，并提供了一些示例代码。在实际开发过程中，我们应该多加练习并适当调整代码，以适应不同的应用场景。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60066b4d51ab1864dac66833