什么是 fetch-middleware？
fetch-middleware 是一个基于 Fetch API 的中间件，它可以将 HTTP 请求和响应处理成可配置的、可重用的和可组合的方式。它能够把 Fetch API 的模板代码封装起来，使得前端开发者更加专注于业务逻辑的实现，从而提升开发效率。
安装 fetch-middleware
你可以通过 npm 来安装 fetch-middleware：
npm install fetch-middleware --save
如果你使用的是 yarn，那么可以输入以下命令来安装：
yarn add fetch-middleware
如何使用 fetch-middleware
fetch-middleware 支持多种类型的中间件，包括请求中间件、响应中间件、错误中间件等。接下来，我们将会介绍 fetch-middleware 的基本用法。
创建中间件
首先，我们需要通过 FetchMiddleware.create 方法来创建一个中间件。
import { FetchMiddleware } from "fetch-middleware";
const middleware = FetchMiddleware.create();使用请求中间件
我们可以通过 middleware.useRequest 方法来添加请求中间件。在请求中间件中，我们可以对当前请求进行处理和修改，并将处理后的请求对象传递给下一个中间件。
middleware.useRequest((request) => {
request.headers.set("Authorization", "Bearer token");
return request;
});上面的例子中，我们给当前请求添加了一个名为 Authorization 的请求头，并设置了其值为一个 token。
使用响应中间件
类似于请求中间件，我们可以通过 middleware.useResponse 方法来添加响应中间件。在响应中间件中，我们可以对当前响应进行处理和修改，并将处理后的响应对象传递给下一个中间件。
middleware.useResponse((response) => {
if (response.status === 401) {
window.location.href = "https://example.com/login";
}
return response;
});上面的例子中，当响应的状态码为 401 时，我们将会跳转到登录页面。
发送请求
在添加完请求和响应中间件之后，我们可以通过 middleware.fetch 方法来发送请求。同时，我们也可以将请求中间件和响应中间件的参数传递给该方法。
middleware
.fetch("/api/users")
.then((response) => {
console.log(response);
})
.catch((error) => {
console.error(error);
});上面的例子中，我们使用了 middleware.fetch 方法来发送一个 GET 请求，并打印出响应对象。
fetch-middleware 的优点
fetch-middleware 的主要优点在于它使得前端开发者可以更加专注于业务逻辑的实现。同时，它也为开发者提供了可配置的、可组合的和可重用的方式来处理 HTTP 请求和响应。
示例代码
下面是一个完整的 fetch-middleware 示例代码：
-- -------------------- ---- -------
------ - --------------- - ---- -------------------
----- ---------- - -------------------------
------------------------------- -- -
------------------------------------ ------- --------
------ --------
---
--------------------------------- -- -
-- ---------------- --- ---- -
-------------------- - ----------------------------
-
------ ---------
---
----------
--------------------
---------------- -- -
----------------------
--
-------------- -- -
---------------------
---结论
fetch-middleware 是一个非常有用的工具，它能够帮助前端开发者更加专注于业务逻辑的实现，从而提升开发效率。同时，fetch-middleware 也提供了可配置的、可组合的和可重用的方式来处理 HTTP 请求和响应，这使得前端开发工作更加便捷。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005590981e8991b448d66de