在开发前端应用时，通过 HTTP 协议与服务器交互数据是很常见的需求。而对于 JavaScript 开发者来说，Axios 和 Fetch API 都是比较流行的 HTTP 请求库。本文将介绍一个结合了 Axios 和 Fetch API 的 npm 包 axios-fetch，并提供详细的使用教程和示例代码。
axios-fetch 包的介绍
axios-fetch 包是一个基于 Axios 和 Fetch API 的 HTTP 请求库，它集合了 Axios 和 Fetch API 的优点，既有 Axios 强大和方便的拦截器和取消请求等功能，也有 Fetch API 简单易用和原生支持的流式请求等特性。同时，axios-fetch 也提供了更多常用的全局默认参数和语法糖等功能。
axios-fetch 包支持在浏览器、Node.js、React Native 等环境下使用，且使用方法与 Axios 类似，极为简单。
axios-fetch 包的安装
直接在命令行中使用 npm 命令即可安装最新版本的 axios-fetch 包：
npm install axios-fetch
axios-fetch 包的使用教程
基本用法
axios-fetch 库的最基础的使用方法与 Axios 库类似，只需导入 axios-fetch 包并调用相应方法即可：
-- -------------------- ---- ------- ------ ---------- ---- -------------- -- -- --- -- -------------------------------------- -- - ---------------------- --- -- -- ---- -- ---------------------------- - ---- ------- ------------- -- - ---------------------- ---
可以看到，无论是 GET 还是 POST 请求，都与 Axios 的使用方法一致。
请求参数配置
默认情况下，axios-fetch 和 Axios 类似，支持传入各种请求参数配置，包括 params、headers、timeout 等，使用方式与 Axios 基本一致。但是axios-fetch还可以使用 Fetch API 官方提供的 Request 类作为参数，这种方式可实现更灵活的配置：
-- -------------------- ---- -------
----- ------- - --- -------------------- -
------- -------
-------- -
--------------- -------------------
--
----- ---------------- ---- ------- ---
---
------------------------------ -- -
----------------------
---这里通过 Request 类配置了 POST 请求的参数，相比 Axios 更灵活。
全局参数配置
axios-fetch 库还支持全局默认参数配置，这也是和 Axios 最大不同的地方。它允许在实例化时设置一些默认的参数配置，以免手动添加这些配置参数：
-- -------------------- ---- -------
----- -------- - -------------------
-------- --------------------------
-------- -
-------------- ------- -------
--
---
-------------------------------- -- -
----------------------
---可以看到，这里使用了 axiosFetch.create() 方法来创建一个默认实例，它会自动添加 baseURL 和 headers 参数。
拦截器使用
axios-fetch 同样支持拦截器功能，使用方式也与 Axios 基本一致。拦截器提供了在请求或响应被处理前进行干预和处理的机制。例如，为所有请求设置一个自定义请求头：
-- -------------------- ---- ------- -------------------------------------------- -- - ---------------------------------- - ----------------- ------ ------- --- -------------------------------------- -- - ---------------------- ---
axiosFetch 包提供的拦截器也可以通过实例化来添加：
-- -------------------- ---- -------
----- -------- - --------------------
----------------------------------
-------- -- -
---------------------------------- - -----------------
------ -------
--
------- -- -
------ ----------------------
-
--
------------------------------------ -- -
----------------------
---取消请求
axios-fetch 提供的取消请求功能也与 Axios 类似，只需使用一个 CancelToken 对象即可实现：
-- -------------------- ---- -------
----- ------ - --------------------------------
--------------------------- -
------------ -------------
------------- -- -
----------------------
---------------- -- -
-- ---------------------------- -
-------------------- ---------- ---------------
- ---- -
-------------------
-
---
------------------- -----------这里通过 axiosFetch.CancelToken.source() 创建了一个 CancelToken 对象，并通过传递 cancelToken 参数来实现取消请求。如果没有获取到响应就取消请求，会抛出 axiosFetch.Cancel 错误，可以通过 axiosFetch.isCancel() 方法来判断是否取消请求。
axios-fetch 包的示例代码
以下是一个使用 axios-fetch 包的示例代码，它演示了使用 axios-fetch 包获取 GitHub 的开放 API：
-- -------------------- ---- -------
------ ---------- ---- --------------
----- -------- - -------------------
-------- -------------------------
---
----- ----------- - ----- -- -- -
--- -
----- - ---- - - ----- -------------------------------
------------------
- ----- ------- -
-------------------
-
--
--------------通过 import 导入 axios-fetch 包，实例化后调用其方法即可。这里使用了 async/await 的语法来异步获取数据。
以上就是 axios-fetch 包的详细使用教程，希望可以对前端开发者有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/5eedb3fcb5cbfe1ea061120c