在前端开发中，我们经常需要从后端服务器获取数据，而 fetch API 是一个常用的用于向服务器发起请求的接口。但是在不同的浏览器或 Node 环境中，对 fetch API 的支持存在一些差异，这给我们的开发带来了一定的困扰。好在有一款叫做 fetch-everywhere 的 npm 包，可以有效地解决这个问题。本文将为大家详细介绍 fetch-everywhere 的使用方法，希望能对大家有所帮助。
fetch-everywhere 简介
fetch-everywhere 是一个在浏览器和 Node 环境下都可以使用的 fetch API 的封装库。它基于 Promise 实现，支持所有标准的 fetch 请求方法和参数，并且在使用时无需考虑底层实现的差异。下面我们就开始介绍如何使用 fetch-everywhere。
安装 fetch-everywhere
在项目中使用 fetch-everywhere，我们需要先安装它。打开终端或命令提示符，进入到你的项目目录下，执行以下命令：
npm install fetch-everywhere --save
这条命令会从 npm 仓库中下载最新版的 fetch-everywhere 包，并将其存储在项目的 node_modules 目录下，并在项目的 package.json 文件中添加一条依赖项。
使用 fetch-everywhere
在安装了 fetch-everywhere 后，我们就可以开始使用它了。在代码中引入 fetch-everywhere：
import fetch from 'fetch-everywhere';
接下来，我们就可以像使用原生 fetch 一样发起请求了。例如：
fetch('https://jsonplaceholder.typicode.com/posts')
.then(res => res.json())
.then(data => console.log(data))
.catch(err => console.error(err));上述代码将向 https://jsonplaceholder.typicode.com/posts 发起 GET 请求，并输出返回数据。这个例子比较简单，下面我们将介绍一些更加实用的用法。
设置请求选项
fetch API 允许我们在请求中设置一些参数，例如请求方法、请求头、请求体、超时时间等等。fetch-everywhere 也支持这些参数，我们只需要将它们放在第二个参数对象中即可。例如：
-- -------------------- ---- -------
--------------------------------------------------- -
------- -------
-------- -
--------------- -------------------
--
----- ----------------
------ ------
----- ------
------- --
---
--
--------- -- -----------
---------- -- ------------------
---------- -- --------------------上述代码将向 https://jsonplaceholder.typicode.com/posts 发起一个 POST 请求，请求体中包含一个 JSON 格式的数据，返回数据后将其打印到控制台上。
处理响应数据
fetch API 得到的响应数据一般是一个 Response 对象，我们需要将其转换为对应的数据格式进行处理。fetch-everywhere 中，我们可以使用 res.json()、res.text()、res.arrayBuffer() 等方法将响应数据转换为对应的格式。例如：
fetch('https://jsonplaceholder.typicode.com/posts/1')
.then(res => res.json())
.then(data => console.log(data))
.catch(err => console.error(err));上述代码将向 https://jsonplaceholder.typicode.com/posts/1 发起 GET 请求，返回的响应数据是一个 JSON 格式的字符串。使用 res.json() 方法将其转换为 JavaScript 对象后，将其打印到控制台上。
错误处理
在发起请求时，可能会遇到一些错误，例如网络连接失败、服务器返回错误码等等。fetch API 通过 Promise 的 reject 方法将这些错误抛出给我们，我们需要使用 catch 方法来捕获这些错误并进行处理。例如：
fetch('https://jsonplaceholder.typicode.com/posts/10000')
.then(res => res.json())
.then(data => console.log(data))
.catch(err => {
console.error('请求失败', err);
});上述代码将向一个不存在的 URL 发起 GET 请求，由于该 URL 并不存在，服务器将返回一个 404 的错误码。我们使用 catch 方法捕获该错误，并将其打印到控制台上。
总结
fetch-everywhere 是一款简单易用的 fetch API 封装库，旨在为我们提供一种跨浏览器和 Node 环境的统一请求接口。通过本文的介绍，相信大家已经学会了如何使用 fetch-everywhere 并发起请求、设置请求选项、处理响应数据和错误处理等操作。希望这篇文章对大家有所帮助，也希望大家在实际项目中能够灵活运用 fetch-everywhere，使得开发工作更加顺畅。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/5f39e828dbf7be33b2566fe3