在前端开发中，经常需要使用网络请求获取后台数据，而 fetch 就是一种常用的网络请求方式。但是，原生的 fetch 有诸多缺点，如不支持网络请求的超时时间、不支持自动重试、不支持请求取消等。为了解决这些问题，有些前端工程师开发了一些第三方库，而 fetch-improve 就是其中之一。
fetch-improve 为原生的 fetch 提供了一些增强功能，如支持设置超时时间、支持请求取消、支持自动重试、支持格式转换等。在本教程中，我们将详细介绍 fetch-improve 的使用方法，并提供一些示例代码。
安装
首先，我们需要安装 fetch-improve，可以使用 npm 进行安装：
npm install fetch-improve
引入和初始化
在需要使用 fetch-improve 的文件中，我们需要引入该库，并对其进行一些基本的初始化，如下所示：
import fetchImprove from "fetch-improve";
const fetch = fetchImprove(window.fetch, {
timeout: 10000,
retry: 3,
onCancel: () => console.log("Request cancelled"),
parse: "json",
});在上面的代码中，我们引入了 fetch-improve，并对其进行了初始化。其中，第一个参数是原生的 fetch，第二个参数是一个对象，用来设置一些增强功能。我们可以通过设置 timeout、retry、onCancel 和 parse 等参数来自定义 fetch-improve 的行为。这些参数的具体含义及用法将在下文中详细介绍。
支持的参数
timeout
timeout 用来设置请求的超时时间，单位为毫秒。如果请求在超时时间内没有得到响应，将自动取消请求，默认为 undefined，即不设置超时时间。
const fetch = fetchImprove(window.fetch, {
timeout: 5000, // 设置超时时间为 5 秒
});retry
retry 用来设置请求失败时的重试次数，默认为 0，即不重试。当请求失败时，fetch-improve 会自动进行重试，直到请求成功或达到指定的最大重试次数。每次重试间隔时间为上次请求完成到下次请求开始的时间。
const fetch = fetchImprove(window.fetch, {
retry: 3, // 请求失败时最多重试 3 次
});onCancel
onCancel 用来设置请求被取消时的回调函数。
const fetch = fetchImprove(window.fetch, {
onCancel: () => console.log("Request cancelled"), // 在请求被取消时打印一条消息
});parse
parse 用来设置响应数据的格式。目前仅支持 json 和 text 两种格式，默认为 undefined，即不进行格式转换。
const fetch = fetchImprove(window.fetch, {
parse: "json", // 将响应数据格式设置为 JSON
});发起请求
有了上面的准备工作，我们就可以使用 fetch 进行网络请求了。fetch 的用法与原生的 fetch 基本相同，只是现在我们通过 fetch-improve 进行请求，而不是直接使用原生的 fetch。
fetch("https://jsonplaceholder.typicode.com/posts/1")
.then((response) => response.json())
.then((data) => console.log(data))
.catch((error) => console.log(error));在上述代码中，我们发起了一个 GET 请求，获取一个 JSON 格式的数据。如果请求成功，就将数据输出到控制台；如果请求失败，就将错误信息输出到控制台。
取消请求
在开发中，有时候我们需要取消正在进行的请求，例如用户在提交表单之前多次点击了提交按钮，我们可能只需要处理最后一次提交的请求，而忽略前面的请求。此时，我们就需要使用 fetch 的取消功能。使用 fetch-improve，我们可以通过 abort 方法来取消请求。由于 fetch-improve 会返回一个包装后的 Promise，因此我们可以将该 Promise 存储到变量中，并通过该变量的 abort 方法来取消请求。
-- -------------------- ---- -------
----- ------------ - --------------------------------------------------- -
------- -------
----- ----------------
------ ------
----- ------
------- --
---
---
------------
---------------- -- ----------------
------------ -- ------------------
-------------- -- --------------------
-- ----
---------------------在上述代码中，我们发起了一个 POST 请求，提交一些数据。如果请求成功，就将返回的数据输出到控制台；如果请求失败，就将错误信息输出到控制台。同时，我们将返回的 Promise 存储到了 fetchPromise 变量中，并在需要取消请求时，调用该变量的 abort 方法来取消请求。
总结
通过本教程的学习，我们了解了 fetch-improve 的基本使用方法，并学会了如何进行请求的超时、重试、取消等操作。同时，我们也注意到 fetch-improve 还支持其他一些功能，如请求队列、请求进度、请求拦截器等，可以根据自己的需要进行调整。希望本教程对广大前端工程师有所启发，让大家在实际开发中能够更好地使用 fetch-improve，提高网络请求的稳定性和可靠性。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005725b81e8991b448e87f0