fetch-http-client-async 是一个基于 Fetch API 的异步网络请求库，它提供了一些高级特性，例如取消请求、错误重试、请求配置等。在本文中，我们将一步步介绍如何在前端项目中使用这个 npm 包。
安装 fetch-http-client-async
使用 npm install 命令安装 fetch-http-client-async：
npm install fetch-http-client-async --save
使用 fetch-http-client-async 发起网络请求
为了使用 fetch-http-client-async，我们需要先引入它：
import fetch from "fetch-http-client-async";
接下来，我们就可以使用 fetch 函数来发送网络请求了。fetch 函数接收一个 URL 和一些可选参数：
const response = await fetch("https://example.com", options);在上述代码中，options 是一个对象，可以包含委托给 Fetch API 的任何选项。例如：
-- -------------------- ---- -------
----- ------- - -
------- ------- -- -------- ---
-------- -
--------------- ------------------- -- ---
--
----- ---------------- --------- -------- --------- -------- --- -- ---
-------- ----- -- --------
-------- -- -- ------
----------- ----- -- ----------
------------ ------------- -- ------
--取消网络请求
在某些情况下，我们可能需要在网络请求正在进行时取消它。使用 fetch-http-client-async，我们可以轻松地实现这一点。
首先，我们需要创建一个取消请求令牌：
const source = fetch.CancelToken.source();
然后，我们将取消请求令牌传递给选项对象：
const options = {
cancelToken: source.token, // 取消请求令牌
};最后，在需要取消请求的地方，我们调用 source.cancel()：
source.cancel();
处理响应结果
当我们收到网络请求的响应时，我们需要处理它。如果响应是 JSON 格式的数据，我们可以使用以下代码将其解析为 JavaScript 对象：
const data = await response.json();
如果响应是文本数据，我们可以使用以下代码将其解析为字符串：
const text = await response.text();
如果我们需要访问响应头或响应状态代码，我们可以使用以下代码：
const status = response.status; // 响应状态代码 const headers = response.headers; // 响应头
示例代码
以下示例演示如何使用 fetch-http-client-async 发送网络请求：
-- -------------------- ---- -------
------ ----- ---- --------------------------
----- ------- - ----- -- -- -
----- ------ - ---------------------------
----- ------- - -
------- ------
-------- -
--------------- -------------------
--
-------- -----
-------- --
----------- -----
------------ -------------
--
--- -
----- -------- - ----- ------
-----------------------------------------------
-------
--
----- ---- - ----- ----------------
------------------
- ----- ------- -
-- ----------------------- -
---------------------
- ---- -
---------------------------
-
-
--
----------在上面的示例中，我们使用 fetch-http-client-async 发送了一个 GET 请求，请求 URL 是 https://jsonplaceholder.typicode.com/todos/1。当请求成功时，我们将响应解析为 JavaScript 对象并将其打印到控制台中。如果请求被取消，我们将打印一个消息。如果请求失败，我们将打印错误消息。
结论
fetch-http-client-async 是一个强大的异步网络请求库，可以帮助我们轻松地发送 HTTP 请求，并提供了一些高级特性，例如取消请求、错误重试、请求配置等。在本文中，我们介绍了如何使用它发送网络请求，希望这篇文章能对你有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60055a4181e8991b448d7e1a