介绍
api-request-client 是一个基于 axios 的 HTTP 客户端，提供了便捷的 API 请求功能。它支持多种请求方式，如 GET、POST、PUT、DELETE，支持请求拦截器和响应拦截器等功能。
安装
在命令行中输入以下命令进行安装：
npm install api-request-client
使用方法
引入
在需要使用的页面中引入 api-request-client：
import ApiRequestClient from 'api-request-client'
实例化
实例化 ApiRequestClient，并配置基本信息：
const request = new ApiRequestClient({
baseURL: 'http://example.com/api/',
headers: {
'Content-Type': 'application/json'
},
timeout: 5000
})其中，baseURL 是 API 的基础路径，headers 是请求头信息，timeout 是请求超时时间。
发送请求
使用实例上的方法发起请求：
request.get('/users')
.then(response => {
console.log(response.data)
})
.catch(error => {
console.log(error.message)
})以上代码是一个 GET 请求示例，使用 request.get 方法发起 GET 请求，.then 为请求成功的回调函数，.catch 为请求失败的回调函数。
以下是各种请求方式的方法：
request.get(url[, config])：发起 GET 请求request.post(url[, data[, config]])：发起 POST 请求request.put(url[, data[, config]])：发起 PUT 请求request.patch(url[, data[, config]])：发起 PATCH 请求request.delete(url[, config])：发起 DELETE 请求
其中，url 是请求的 URL，config 是请求的配置信息。
请求配置
请求配置是指发起请求时的额外选项，包括请求方法、请求头、请求参数、响应数据格式、请求超时等。这些配置选项在 APIRequestClient 实例化时被设置，并在发送请求时可以覆盖。
例如，在进行 POST 请求时需要传递请求参数和修改请求头，代码如下：
-- -------------------- ---- -------
---------------------- -
--------- -------
--------- --------
-- -
-------- -
---------------- ------- --------
-
--
-------------- -- -
--------------------------
--
------------ -- -
--------------------------
--以上代码中，第二个参数为请求参数，第三个参数为配置信息，覆盖了实例化时设置的请求头信息。
请求异常处理
APIRequestClient 中，请求异常会以 Error 对象的形式被捕获。通过 .catch(error) 可以捕获请求异常，并进行处理。
以下是常见的请求异常情况：
- 网络异常：如无法连接服务器、超时等
- HTTP 错误：如 404、500 等
- API 返回错误：如 API 返回错误信息
以上异常情况可以通过判断 Error 对象中的状态码和响应数据进行处理。
-- -------------------- ---- -------
---------------------
-------------- -- -
--------------------------
--
------------ -- -
-- ------------- --- ---- -
---------------- --- -------
- ---- -- --------------- -- -------------------- -
----------------------------------------
- ---- -
--------------------------
-
--以上代码中，根据不同的异常情况给出了不同的处理方式。
请求拦截器和响应拦截器
APIRequestClient 提供了请求拦截器和响应拦截器，可以对请求进行统一处理。
请求拦截器会在发送请求前执行，可以对请求头等信息进行修改：
request.interceptors.request.use(config => {
config.headers.Authorization = 'Bearer xxxxxxx'
return config
})响应拦截器会在接收到响应后执行，可以对返回数据进行统一处理：
-- -------------------- ---- -------
------------------------------------------ -- -
-- ---------------------- --- ------ -
------ ------------------ -----------------------------
- ---- -
------ --------
-
-- ----- -- -
------ ---------------------
--以上代码中，请求拦截器在请求头中添加了 Authorization，响应拦截器判断了 API 返回数据是否成功。
总结
APIRequestClient 是一个非常实用的 HTTP 客户端，可以简化前端 API 请求的代码，并提供了很多的定制选项。使用 APIRequestClient 可以让前端开发者专注于业务逻辑，而不必担心底层网络请求的细节。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600672693660cf7123b366c7