在前端开发过程中，我们常常需要向后端请求数据，而这往往需要使用浏览器提供的 fetch API。然而，我们也会遇到一些需要多次请求的情况，这就需要我们分别处理每个请求的返回结果。为了解决这个问题，我们可以使用 fetch-thru 这个npm包。本文将向你介绍 fetch-thru 的使用方法，并给出一些示例代码以供参考。
何为 fetch-thru
fetch-thru是一个基于Fetch API的JavaScript网络抽象库，它提供了一种灵活和简单的方式来处理多个请求、中间件和错误处理等。它不仅能够节省我们的编码时间，而且能够提高代码的可读性和可维护性。
fetch-thru 的安装
在使用 fetch-thru 之前，我们需要先安装它。可以使用npm进行安装，命令如下：
npm install --save fetch-thru
fetch-thru 的使用
使用 fetch-thru 非常简单。下面是一个基本的使用示例，我们将使用 fetch-thru 去获取一个数据列表：
-- -------------------- ---- -------
------ - ------------ - ---- -------------
----- ---------- - ----- --------- ----- -- -
----- -------- - ----- --------------
-- -------------- -
----- -------------- ---------
-
------ ----------------
--
----- --------- - ----- -- -
------ ----------------- -
------- ------
------------ -------------
---
--
-- ------------------
-----------------------------------------
------------ -- -
------------------
--
-------------- -- -
-------------------
---上面的示例中，我们首先定义了一个名为 middleware 的中间件函数来处理每个请求的返回结果，然后定义了一个 fetchList 函数来发送请求。在fetchList函数中，我们首先调用 fetchThrough 函数，该函数接收两个参数：一个是请求的 URL，另一个是options对象，用来配置请求和中间件。在这个例子中，我们指定了请求方式为GET，同时通过一个数组的形式传入了 middleware 中间件。
fetch-thru 的中间件
fetch-thru 提供了一种中间件的机制，这意味着我们可以用多种方式来处理请求和响应。中间件是一段可插拔的代码，可以在请求到达服务器之前、响应返回之后或者是之间对数据进行处理。我们可以使用中间件来实现请求重试、添加请求统计、处理错误等。
下面是一个例子，我们在中间件中对请求进行统计：
const requestCountMiddleware = async (request, next) => {
console.log('Request Count:', requestCount++);
return await next(request);
};
const middleware = [requestCountMiddleware];在上面的例子中，我们定义了一个 requestCountMiddleware 函数，函数中我们在控制台输出了一个当前的请求计数器，然后通过 next(request) 调用了下一个中间件。
fetch-thru 的错误处理
fetch-thru同样提供了一种错误处理的机制，它能够捕获网络请求中的错误并返回一个可处理的错误，同时还提供了一种方式将异常传递给下一个中间件。下面是一个例子，我们定义了一个中间件来处理网络请求中的错误：
-- -------------------- ---- -------
----- --------------- - ----- --------- ----- -- -
--- -
----- -------- - ----- --------------
-- -------------- -
----- -------------- ---------
-
------ ---------
- ----- ------- -
-------------------
-- ------------------
----- ------
-
--在上面的例子中，我们定义了一个 errorMiddleware 中间件函数来处理网络请求中的错误。在该函数中，我们首先调用了 next(request) 获取响应结果，如果响应结果的 ok 属性为 false，就抛出一个错误。如果出现错误，就将错误传递到下一个中间件。
结论
fetch-thru 是一个非常实用的npm包，它可以帮助我们更好地处理网络请求，提高代码的可读性和可维护性。在本文中，我们向你介绍了 fetch-thru 的基本使用方法，并且提供了一些中间件和错误处理的示例，希望对你学习和工作有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005563881e8991b448d31f7