前言
在前端开发中，通过 AJAX 发送 HTTP 请求已经成为日常工作中不可缺少的一部分。而 Axios 是一个基于 Promise 的 HTTP 客户端，适用于浏览器和 Node.js 环境，可以用于请求后端接口、上传文件等。在使用 Axios 发送 HTTP 请求的过程中，遇到错误是不可避免的，如网络异常、请求超时、接口返回错误等。如何通过 Axios 拦截器全局处理这些错误是前端开发工作中非常重要的一部分。
在 Vue.js 中使用 Axios，可以通过自定义 Axios 实例以及添加 Axios 拦截器来实现全局错误处理。本文将介绍如何使用 Axios 拦截器实现全局错误处理。
安装 Axios
如果你还没有安装 Axios，可以通过下面的命令进行安装：
npm install axios
自定义 Axios 实例
为了使全局错误处理更加方便和灵活，我们可以创建一个 Axios 实例并自定义一些默认配置参数。在 Vue.js 项目中，通常我们会将自定义 Axios 实例的配置封装到一个单独的文件中，方便统一管理。
在 axios.js 文件中，我们创建一个自定义 Axios 实例 api，并设置一些默认配置，如超时时间、请求地址前缀等：
import axios from 'axios';
const api = axios.create({
timeout: 5000, // 设置超时时间为 5 秒钟
baseURL: 'https://api.domain.com', // 设置请求地址前缀
});
export default api;添加 Axios 拦截器
通过添加 Axios 拦截器，我们可以全局统一处理 HTTP 请求的错误情况，如请求超时、网络异常、接口返回错误等。通过拦截器，我们可以在发生错误时进行统一的处理操作，如弹出错误提示框、记录错误日志等。
在 axios.js 文件中，我们添加 Axios 请求拦截器和响应拦截器：
-- -------------------- ---- -------
------ ----- ---- --------
------ - ------- - ---- -------------
----- --- - --------------
-------- ----- -- ------- - --
-------- ------------------------- -- --------
---
-- -------
-----------------------------
------ -- -
-- -----------
------ -------
--
----- -- -
-- ---------
------ ----------------------
--
--
-- -------
------------------------------
-------- -- -
-- ---------
------ --------------
--
----- -- -
-- ---------
-- ---------------- -
-- -------------- -- ---
------ ----------------------- -
---- ----
------------------------
------
---- ----
-------------------------
------
---- ----
-----------------------
------
---- ----
-----------------------------------------------------
------
---- ----
-------------------------
------
---- ----
-------------------------------
------
--------
-----------------------
------
-
- ---- -- --------------- -
-- --------------
----------------------
- ---- -
-- ----------
----------------------
-
------ ----------------------
--
--
------ ------- ----
我们通过 api.interceptors.request.use 添加请求拦截器，在其中可以进行一些请求前的统一处理，例如在请求头中添加 token、请求参数加密等操作。 api.interceptors.response.use 添加响应拦截器，在其中可以对响应进行一些统一处理，例如错误提示、返回值格式化等操作。
其中，axios.interceptors.response.use 函数接收两个参数，第一个参数是成功的回调函数，第二个参数是失败的回调函数。在失败的回调函数中，我们可以通过 error.response 对象判断错误原因，并进行相应的处理。
使用 Axios 实例
在 Vue.js 中使用 Axios 实例需要在组件中引入，通过调用实例方法发送 HTTP 请求。这个过程和使用全局的 axios 对象并没有太大的区别，只是需要引入自定义 Axios 实例文件。
在组件中引入自定义 Axios 实例后，我们可以通过调用实例方法发送 HTTP 请求，如下所示：
-- -------------------- ---- -------
------ --- ---- ----------
------ ------- -
------ -
------ -
--------- ---
--
--
-------- -
------------- -
----------------------------------- -- -
------------- - --------------
---
--
--
--总结
通过添加 Axios 拦截器，我们可以在全局范围内处理 Axios 请求的错误情况，避免了多处代码中的重复处理操作，提高了开发效率和代码复用性。同时，可以根据实际需要进行不同的处理逻辑，例如错误提示、状态管理、日志记录等。
本文通过自定义 Axios 实例和添加 Axios 拦截器的方式，实现了全局错误处理。希望读者可以将这些知识点应用到自己的项目中，并不断探索更加优秀、高效的前端开发方式。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6484638648841e9894375b34