在前端开发中，我们经常需要和后端进行数据交互。而这个过程中，一个重要且必不可少的步骤就是发送 Http 请求。随着技术的不断发展，现在已经有了很多种能够发送 Http 请求的方式，最常见的包括 jQuery 的 Ajax、axios、fetch 等。本文将介绍一个基于 fetch 的 npm 包：fetch-adapter，它可以使我们更加方便地发送 Http 请求。
fetch-adapter 简介
fetch-adapter 是一个基于 fetch 封装的 npm 包，它提供了一些常用的 Http 请求方法，包括 get、post、put、patch、delete、head、options 等。相比于原生的 fetch，fetch-adapter 提供了更高层次的抽象，使得发送请求时不需要自己手动构造请求参数和处理响应结果，从而省去了重复的代码和时间，提高了开发效率。
除此之外，fetch-adapter 还支持请求和响应的拦截器，可以在发送请求前和响应返回后对数据进行处理或校验。这些拦截器可以用于设置通用的请求头、请求参数，或者校验响应的状态码等。通过这种方式，我们可以避免在每个接口请求中都重复写同样的代码，使得代码更加简洁易懂。
fetch-adapter 的使用教程
安装
fetch-adapter 可以通过 npm 安装：
$ npm install --save fetch-adapter
使用
在使用 fetch-adapter 之前，我们需要先 import 它：
import { FetchAdapter } from 'fetch-adapter';然后，可以使用 FetchAdapter 的实例来发送请求。如下面的代码，我们可以使用 get 方法来发送一个 GET 请求：
const adapter = new FetchAdapter();
adapter.get('/api/data').then(res => {
console.log(res);
}).catch(err => {
console.error(err);
});在这个例子中，我们使用了 get 方法来发送一个 GET 请求。我们只需要传入请求路径即可。在请求成功后，我们可以通过 then 方法来获取请求结果。如果请求失败，我们可以通过 catch 方法来获取错误信息。
对于其他的请求方法，使用方式基本相同。以 POST 方法为例：
adapter.post('/api/data', {
name: 'Jonh Doe',
age: 25
}).then(res => {
console.log(res);
}).catch(err => {
console.error(err);
});在 POST 方法中，我们还需要传入请求数据。可以看到，fetch-adapter 的请求方法非常简单，而且与原生的 fetch 使用方式也非常相似。
请求和响应拦截器
除了发送请求和处理响应以外，fetch-adapter 还提供了请求和响应拦截器，可以在请求发送前和响应返回后对数据进行处理或校验。
请求拦截器
使用请求拦截器，我们可以在请求发送前对请求进行处理或校验。例如，我们可以设置通用的请求头或请求参数：
-- -------------------- ---- -------
----- ------- - --- ---------------
---------------------------------------- -- -
-------------- - -
--------------- ------------------
--
----------- - ----------------------------
------ -------
---
--------------------------------- -- -
-----------------
------------ -- -
-------------------
---在这个例子中，我们使用了 use 方法来注册一个请求拦截器。这个拦截器将在发送请求前被调用。我们可以在这个拦截器中获取请求的配置，然后对配置进行处理，最后返回处理后的配置。在这个例子中，我们设置了通用的请求头和请求参数，并将请求参数转化为 JSON 字符串，这样就可以让后端更方便地解析我们发送的数据了。
响应拦截器
使用响应拦截器，我们可以在请求返回后对响应进行处理或校验。例如，我们可以校验响应的状态码是否正确：
-- -------------------- ---- -------
----- ------- - --- ---------------
------------------------------------------- -- -
-- ---------------- -- --- -- --------------- - ---- -
------ --------------
- ---- -
----- --- ---------------------------
-
---
--------------------------------- -- -
-----------------
------------ -- -
-------------------
---在这个例子中，我们使用了 use 方法来注册一个响应拦截器。这个拦截器将在请求返回后被调用。我们可以在这个拦截器中获取响应结果，然后对结果进行处理，最后返回处理后的结果或者抛出一个错误。在这个例子中，我们校验了响应的状态码是否在 200 到 300 之间，如果满足条件，则返回响应数据，否则抛出一个异常。
结语
fetch-adapter 是一个非常方便的 npm 包，可以让我们更加方便地发送 Http 请求。通过它，我们可以省去写大量的请求代码和处理响应结果的代码，让我们在开发中更加高效、简洁。同时，fetch-adapter 还支持请求和响应的拦截器，可以让我们更加方便地实现一些公共逻辑。我相信，使用 fetch-adapter 可以帮助你在前端开发中更加得心应手。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600558e881e8991b448d639e