在 Vue 项目中，我们经常会使用 axios 库来进行网络请求。但是在实际开发中，我们需要处理各种异常情况，例如网络连接失败、接口异常等。为了提高开发效率和代码可维护性，我们可以封装 axios 并实现统一异常处理。
为什么要封装 axios？
封装 axios 的目的主要有以下几点：
提高代码可重用性：封装 axios 可以让我们在多个组件中复用相同的网络请求代码，避免在每个组件中都写一遍相同的代码。
实现统一异常处理：封装 axios 可以让我们在一个地方处理所有网络请求的异常情况，例如网络连接失败、接口异常等。
便于接口管理：封装 axios 可以让我们将所有接口都放在一个文件中管理，方便查找和维护。
封装 axios
下面是封装 axios 的代码：
-- -------------------- ---- -------
------ ----- ---- -------
----- -------- - --------------
-------- -----------------------------
-------- -----
--
-- -----
----------------------------------
------ -- -
-- ----------------------
---------------------------- - ------- - - -----------------------------
------ ------
--
----- -- -
------ ---------------------
-
-
-- -----
-----------------------------------
-------- -- -
-- --------------------
-- ---------------- --- ---- -
------ -------------
- ---- -
------ ------------------------
-
--
----- -- -
-- --------------------
-- ---------------- -
------ ----------------------- -
---- ----
-- ----------
-----
---- ----
-- -----------
-----
---- ----
-- ------------
-----
---- ----
-- ------------
-----
--------
-- -----------
-----
-
- ---- -
-- -------------
-
------ ---------------------
-
-
------ ------- --------在上面的代码中，我们使用了 axios.create() 方法来创建一个 axios 实例，然后通过请求拦截器和响应拦截器来实现统一处理。在请求拦截器中，我们可以对请求进行一些处理，例如设置请求头信息；在响应拦截器中，我们可以对响应进行一些处理，例如解析响应数据，同时也可以处理异常情况。
使用封装后的 axios
在组件中使用封装后的 axios 与使用原始的 axios 没有太大区别，只需要将原来的 axios 替换为封装后的 axios 即可。
import axios from '@/utils/request'
export default {
getUserInfo() {
return axios.get('/user/info')
}
}上面的代码中，我们导入了封装后的 axios，并使用它来发送 GET 请求。
总结
封装 axios 并实现统一异常处理可以提高代码可重用性和可维护性，同时也可以让我们在一个地方处理所有网络请求的异常情况。在实际开发中，我们可以根据具体的需求来对封装后的 axios 进行调整和扩展，以达到更好的效果。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/65534c67d2f5e1655dd09fe3