在前端开发中，经常需要向后端发起 HTTP 请求，完成数据交互。然而，手写 Http 请求代码比较繁琐，而且容易出错。为了解决这个问题，很多前端开发者都将 Http 请求封装成了一个类或者模块，以便复用。其中，@accessors-modules/http-client 是一个非常优秀的 Http 请求库，其使用方法和文档内容都非常详细，这篇文章就来介绍这个库的使用教程。
安装
使用 npm 安装
npm install @accessors-modules/http-client --save
使用 yarn 安装
yarn add @accessors-modules/http-client
基本使用
-- -------------------- ---- -------
------ ---- ---- ---------------------------------
----- ---- - --- ------
-------- --------------------------
-------- -
--------------- -------------------
--
---
-- --- --
------------------ - ------ -- ------------------ -- -
---------------------------
---
-- ---- --
------------------- -
----- -------
---- ---
------------------ -- -
---------------------------
---配置项
通过构造器传递回配置对象，可配置该库的一些行为：
const http = new Http({
baseURL: 'https://api.example.com', // 设置全局接口请求的地址
headers: { // 设置全局请求头
'Content-Type': 'application/json',
},
timeout: 10000, // 设置全局的接口请求超时时间
});请求的生命周期
Http 对象提供了多个钩子函数，可监听请求的生命周期，如下：
请求前
-- -------------------- ---- -------
-- ---------
----------------------------------- -------- -- -
----- ----- - ----- -----------
-- ------- -
------------------------------- - ------- ----------
-
------ -------
---请求失败
-- -------------------- ---- -------
-- ----------
------------------------------------ ------- -- -
-- ---------------------- --- ---- -
--------------
----------------------
-
------ ----------------------
---请求成功
-- -------------------- ---- -------
-- ----------
----------------------------------------- -- -
----- ---- - --------------
-- ---------- --- --- -
----- --- --------------------
-
------ -----
---并发请求
如果同时需要发送多个请求，可以使用同一个 Http 对象，并发进行请求：
const { data: users } = await Promise.all([
http.get('/users', { page: 1, limit: 10 }),
http.get('/users', { page: 2, limit: 10 }),
]);封装 Request 方法
在实际项目中，我们通常封装 Request 方法，用于发起 Http 请求。下面是一个简单的封装示例：
-- -------------------- ---- -------
------ ---- ---- ---------------------------------
----- ---- - --- ------
-------- --------------------------
-------- -
--------------- -------------------
--
---
------ ----- -------- ------------ ------ - --- -
--- -
------ ----- ----------------- --------
- ----- ------- -
---------------------
-
-结语
@accessors-modules/http-client 功能齐全易用，支持拦截器和并发请求等，在实际项目中使用非常方便。同时，也提供了多种配置项灵活定制，非常值得前端开发人员使用。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600562b881e8991b448dff77