概述
bsk-request-manager 是一个基于 Axios 的 npm 包，主要用于管理前端项目中经常用到的网络请求。它的特点是可以预处理请求参数，统一处理响应结果，并提供了多种自定义的拦截器和响应处理方式。在多人协作或者大型前端项目中使用 bsk-request-manager 可以帮助降低代码耦合度和提高代码复用性。
安装
在项目中使用 npm 安装 bsk-request-manager，可以通过如下命令进行安装：
npm install bsk-request-manager --save
或者使用 yarn 进行安装：
yarn add bsk-request-manager
使用
在项目中使用 bsk-request-manager 也很容易，只需要在需要发送请求的地方导入 bsk-request-manager，配置请求参数即可。
在 Vue 项目中，我们可以在 Vue.prototype 上挂载一些方法，方便我们在组件中直接使用。我们可以在 main.js 文件中编写以下代码：
import request from 'bsk-request-manager' Vue.prototype.$request = request
这样就可以在组件中使用 $request 方法了，例如：
-- -------------------- ---- -------
----------
------- --------------------------
-----------
--------
------ ------- -
-------- -
----- ------- -
--- -
----- - ---- - - ----- ---------------------------- - --------- -------- --------- -------- --
-----------------
- ----- ------- -
------------------
-
-
-
-
---------上面的代码中，我们向 /login 接口发送了一个 POST 请求，并携带了 username 和 password 两个参数。当请求成功时，我们会在控制台中输出响应数据，否则会输出错误信息。
配置
bsk-request-manager 提供了多种配置选项，可以根据实际情况进行自定义配置。我们可以通过以下代码进行配置：
-- -------------------- ---- -------
------ ------- ---- ---------------------
-- ----
-------------- - -
-------- -------------------------- -- --- ----
-------- ------ -- ----------
-------- - -- ---
--------------- --------------------------------
--
------------- - -- ---
-------- ----- -- -----
--------- ---- -- -----
--
------------------ -------- ------ ------- - -- --------
------ ----------------
--
--------------- -------- -------- - -- -------
------ ------ -- --- -- ------ - ---
-
-
---------------------- - -------baseURL
baseURL 是 API 基础路径，可以减少代码中的重复代码。例如，我们如果发起 /user 接口的请求，我们可以在配置中将 baseURL 设置为 https://api.example.com，那么请求的完整路径就是 https://api.example.com/user。
timeout
timeout 是请求超时时间，单位为毫秒。当请求时间超过指定的超时时间时，请求会被中断并抛出一个错误。
headers
headers 是请求头配置。可以配置常用的请求头，例如 Content-Type、Authorization 等等。注意，XHR 请求中的 Content-Type 默认为 application/x-www-form-urlencoded，如果需要使用 application/json 或者其他格式，需要设置该请求头。
interceptors
bsk-request-manager 提供了请求拦截器和响应拦截器。请求拦截器可以在请求发送前进行预处理，响应拦截器可以在响应返回后进行处理。在拦截器中，我们可以对请求或响应进行加工，例如设置请求头、调用通知弹窗等等。以下是拦截器的用法。
对于请求拦截器，我们可以这样写：
// 在请求前添加 token 请求头
request.config.interceptors.request.use((config) => {
const token = localStorage.getItem('token')
if (token) {
config.headers['Authorization'] = `Bearer ${token}`
}
return config
})对于响应拦截器，我们可以这样写：
// 在响应后弹出提示框
request.config.interceptors.response.use((response) => {
alert(`请求成功：${response.data}`)
return response
})transformResponse
transformResponse 是响应拦截器中的一个函数，它可以将原始响应数据进行转换，例如将 JSON 字符串转换为 JavaScript 对象等等。
request.config.transformResponse = function (data, config) {
return JSON.parse(data)
}validateStatus
validateStatus 是响应拦截器中的一个函数，它可以验证响应码是否符合要求。默认情况下，只有响应码为 >= 200 && < 300 时，请求才会被认为是成功的。例如我们可以使用以下代码进行自定义验证函数：
request.config.validateStatus = function (status) {
return status >= 200 && status < 400
}请求方法
bsk-request-manager 提供了常用的请求方法，例如 get、post、put、delete 等等。这些方法的使用方法基本相同，都是传入请求参数，然后返回一个 Promise，例如：
// get 请求
request.get('/user', { params: { id: 100 } })
// post 请求
request.post('/user', { name: 'Tom', age: 18 })在 get 请求时，我们可以通过 { params: { id: 100 } } 的形式传入查询参数；在 post 请求时，我们可以通过传入一个对象的方式，将请求参数传给后端。如果需要传递 FormData，可以使用 FormData 对象的方式进行传递：
const formData = new FormData()
formData.append('name', 'Tom')
formData.append('age', 18)
request.post('/user', formData)完整示例
最后，我们来看一个完整的使用示例：
-- -------------------- ---- -------
------ ------- ---- ---------------------
-- ----
-------------- - -
-------- --------------------------
-------- ------
-------- -
--------------- --------------------------------
--
------------- -
-------- -------- -- -
----- ----- - -----------------------------
-- ------- -
------------------------------- - ------- ---------
-
------ ------
--
--------- ---------- -- -
------------------------------
------ --------
-
--
------------------ ------ ------- -- -
------ ----------------
--
--------------- -------- -- -
------ ------ -- --- -- ------ - ---
-
-
---------------------- - -------在组件中使用：
-- -------------------- ---- -------
----------
------- --------------------------
-----------
--------
------ ------- -
-------- -
----- ------- -
--- -
----- - ---- - - ----- ---------------------------- - --------- -------- --------- -------- --
-----------------
- ----- ------- -
------------------
-
-
-
-
---------总结
bsk-request-manager 是一个非常实用的前端网络请求包，可以帮助我们统一管理和处理前端项目中的网络请求，在多人协作或者大型前端项目中，可以帮助我们提高代码复用性和降低代码耦合度。在使用时，我们需要根据实际情况进行自定义配置和使用。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60066c8cccdc64669dde53fc