在前端开发中，我们常常需要与服务器进行数据交互。而 axios 是一款被广泛使用的前端 HTTP 请求库。然而，使用 axios 发送请求时需要编写很多重复的代码，如果你想让你的代码更加简洁易用，那么可以尝试使用 axios-serve 这个 npm 包。
介绍 axios-serve
axios-serve 是一个基于 axios 的封装库，它可以帮助你将 axios 使用更方便简单。它的特点在于：
- 前后端接口规范化，每个接口只需要一个 url 参数
- 动态多环境切换，方便在不同的环境中配置不同的请求地址和请求头
- 支持请求前、请求错误、请求成功的统一处理，方便在多个接口中统一处理逻辑
安装 axios-serve
你可以通过 npm 安装 axios-serve：
$ npm install axios-serve --save
使用 axios-serve
初始化配置
首先，我们需要进行 axios-serve 的初始化配置，在项目入口文件中添加如下代码：
-- -------------------- ---- -------
------ ----- ---- --------
------ ---------- ---- --------------
-- --- ----- --
---------------------- - -----
---------------------- - ---
------------------------------------------- - --------------------------------------------------
---------------------------------------------- - ------------------------------
-- --- ----------- --
----- -------- - -
-------- -
---- --------
------- ------
--
--------- -
---- --------
------- -------
--
--
----- ------------ - -
---- -
-------- -----------------------------
--
----- -
-------- ------------------------------
--
----- -
-------- ------------------------------
--
--
----- ------- - -
------------ ------
------ -----
---------
-------------
--
---------------------- ---------
在上面的代码中，我们首先初始化 axios 的一些配置，例如超时时间、请求头等。然后，我们定义了 requests 和 environments，分别表示请求和不同的环境配置。其中 requests 中的每个属性都表示一个请求，它包括 url 和 method。最后，我们将 axios 和 options 传给 axiosServe.init 进行初始化。
发送请求
现在我们可以使用 axios-serve 来发送请求了。我们以发送 /test 接口的请求为例，代码如下：
axiosServe.request('getTest', { id: 1 }).then((response) => {
console.log(response);
}).catch((error) => {
console.log(error);
});在上面的代码中，我们调用 axiosServe.request 方法来发送请求，第一个参数为请求名，即 getTest，第二个参数为请求参数，即 { id: 1 }。如果请求成功，会返回一个包含响应数据的 Promise 对象。如果请求失败，会返回一个错误对象。
处理请求结果
在发送请求后，我们可以对请求结果进行一些处理，例如统一的错误处理、返回数据格式的统一处理等。我们可以在初始化配置中设置 interceptors，它是一个包含三个函数的对象，分别表示请求前、请求错误、请求成功的处理函数。这些函数的参数为 config（请求配置）或 error（错误对象）或 response（响应数据），分别表示不同的操作对象。例如：
-- -------------------- ---- -------
----- ------------ - -
-------- -------- -- -
----------------------- --------
------ -------
--
-------------- ------- -- -
----------------------------- -------
------ ----------------------
--
--------- ---------- -- -
------------------------ ----------
------ ---------
--
--
-----------------------------------------在上面的代码中，我们设置了 request、responseError 和 response 三个函数来对请求进行处理。request 函数会在每个请求开始前被调用，它会打印请求配置。如果需要对请求进行一些操作，可以在这里进行。responseError 函数会在请求失败后被调用，它会打印错误对象，并返回 Promise.reject(error) 表示向上层抛出错误。如果需要进行一些错误处理，可以在这里进行。response 函数会在请求成功后被调用，它会打印响应数据，并将响应数据返回给调用者。如果需要对响应数据进行格式的统一处理，可以在这里进行。
总结
axios-serve 是一个方便的 axios 封装库，它可以帮助我们更加方便地使用 axios 进行请求。在使用 axios-serve 时，我们只需要进行简单的配置和调用即可完成请求，而不需要编写大量重复的代码。同时，使用 axios-serve 还可以统一处理请求前、请求错误、请求成功等操作，使我们的前端开发变得更加高效和简洁。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005602b81e8991b448de5c1