Vue.js 是一款流行的 JavaScript 前端框架，而 axios 则是一个常用的 HTTP 请求库。在实际开发中，我们使用 axios 发送 HTTP 请求来获取数据或者提交数据，但是在大型项目中，我们需要对 axios 进行封装，以便更好地管理和维护代码。
为什么要封装 axios？
- 代码复用：将一些通用的配置封装起来，减少重复代码。
- 统一管理：在封装的过程中，可以将一些通用的配置统一管理，方便后期维护。
- 错误处理：在封装的过程中，可以对请求错误进行统一处理，避免重复代码。
封装 axios
安装 axios
在 Vue.js 项目中使用 axios，需要先安装 axios：
npm install axios --save
创建 axios 实例
在封装 axios 之前，我们需要先创建一个 axios 实例。在实例化 axios 时，可以传入一些默认配置项，如请求头、超时时间等。
import axios from 'axios'
const instance = axios.create({
baseURL: 'http://api.example.com',
timeout: 1000 * 10,
headers: {
'Content-Type': 'application/json'
}
})封装请求方法
在实际开发中，我们通常需要封装 GET、POST、PUT、DELETE 四种请求方法。在这里，我们以 GET 请求为例进行封装。
-- -------------------- ---- -------
-------- -------- ------- -
------ --- ----------------- ------- -- -
----------------- - ------ --
--------- -- -
-----------------
--
------------ -- -
-------------
--
--
-封装错误处理
在封装 axios 的过程中，我们需要对请求错误进行统一处理。在这里，我们封装一个 errorHandle 函数，用于处理请求错误。
function errorHandle(error) {
// 错误处理
}统一管理请求
在封装 axios 的过程中，我们可以将一些通用的配置项进行统一管理。在这里，我们使用拦截器对请求进行统一处理。
-- -------------------- ---- -------
-- -----
----------------------------------
------ -- -
-- --------
------ ------
--
----- -- -
-- ----
------ ---------------------
-
-
-- -----
-----------------------------------
-------- -- -
-- --------
------ --------
--
----- -- -
-- ----
------ ---------------------
-
-使用封装后的 axios
在封装 axios 完成后，我们可以在 Vue.js 项目中使用封装后的 axios。
-- -------------------- ---- -------
------ - --- - ---- -----------------
------ ------- -
------ -
------ -
----- --
-
--
-------- -
----------- -
----------------
--------- -- -
--------- - --------
--
------------ -- -
------------------
--
-
-
-总结
在实际开发中，封装 axios 是一个非常有用的技巧。通过封装 axios，我们可以将一些通用的配置项进行统一管理，减少重复代码，提高代码的可维护性。同时，在封装 axios 的过程中，我们还可以对请求错误进行统一处理，提高代码的健壮性。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/66253152f76562e4b3903a8f