前言
在前端开发过程中，我们经常需要与后端进行数据交互。而 axios 是一个非常优秀的前端 http 请求库，可以方便地完成数据交互的功能。但在有些情况下，我们需要在请求或响应过程中进行一些额外的处理，这时候就需要用到 axios 的拦截器功能。
本文将介绍 Vue.js 中使用 axios 拦截器的详细使用方法，并提供一些示例代码，帮助读者更好地理解和应用该功能。
什么是 axios 拦截器
axios 拦截器可以在发送请求和响应返回过程中，对请求或响应进行统一的处理和拦截。通过使用拦截器，我们可以方便地统一添加请求头、处理请求参数、处理响应数据、处理错误请求等。
axios 拦截器主要有两种类型：
- 请求拦截器：在发送请求之前进行拦截，可以修改请求配置、添加请求头等。
- 响应拦截器：在收到响应之后进行拦截，可以处理响应数据、头部信息、错误信息等。
在 Vue.js 中使用 axios 拦截器
在 Vue.js 中使用 axios 拦截器非常简单，只需在 axios 实例中添加拦截器即可。
以下是一个基本的 axios 实例示例，其中包含了一个请求拦截器和一个响应拦截器：
-- -------------------- ---- -------
-- ---- ----- --
----- -------- - --------------
-------- --------------------------
---
-- -------
----------------------------------
------ -- -
-- -----------
---------------------------- - -----------
------ -------
--
----- -- -
-- ---------
------ ----------------------
-
--
-- -------
-----------------------------------
-------- -- -
-- ---------
------ --------------
--
----- -- -
-- ---------
------ ----------------------
-
--
------ ------- ---------在上面的代码中，我们通过 axios.create 方法创建了一个 axios 实例，并在实例中添加了一个请求拦截器和一个响应拦截器。
请求拦截器的使用
请求拦截器可以在发送请求之前进行一些操作，比如添加请求头、修改请求参数等。
使用方法如下：
-- -------------------- ---- -------
----------------------------------
------ -- -
-- -----------
---------------------------- - ----------- -- -----
------ -------
--
----- -- -
-- ---------
------ ----------------------
-
--在上面的代码中，我们使用了 instance.interceptors.request.use 方法来添加一个请求拦截器，在其中进行了两个操作：
- 添加了一个 Authorization 请求头，其值为 getToken() 函数返回的值。
- 在方法的最后返回了修改后的 config 对象，以便在请求中使用。
响应拦截器的使用
响应拦截器可以在收到响应数据之后进行一些操作，比如处理响应数据、处理错误信息等。
使用方法如下：
-- -------------------- ---- -------
-----------------------------------
-------- -- -
-- ---------
------ -------------- -- ------
--
----- -- -
-- ---------
------ ----------------------
-
--在上面的代码中，我们使用了 instance.interceptors.response.use 方法来添加一个响应拦截器，在其中进行了两个操作：
- 处理并返回响应数据。
- 在方法的最后使用了 Promise.reject(error) 来返回错误信息。
示例代码
接下来，我们将编写一个具有实用性的示例代码，以帮助读者更好地理解和运用 axios 拦截器。代码中的请求拦截器将会添加一个 Authorization 请求头，用于验证用户身份，而响应拦截器将会对 401 错误进行处理，跳转到登录页面。
-- -------------------- ---- -------
-- ---- ----- --
----- -------- - --------------
-------- --------------------------
---
-- -------
----------------------------------
------ -- -
-- -- ------------- ---
---------------------------- - -----------
------ -------
--
----- -- -
------ ----------------------
-
--
-- -------
-----------------------------------
-------- -- -
------ --------------
--
----- -- -
-- ---------------------- --- ---- -
-- -------
----------------------
-
------ ----------------------
-
--
------ ------- ---------在上面的代码中，我们使用了 getToken() 函数来获取用户的身份信息，并将其添加到 Authorization 请求头中。而在响应拦截器中，我们对 401 错误进行了处理，并将用户跳转到登录页面。
总结
本文介绍了 Vue.js 中使用 axios 拦截器的详细使用方法，包括了请求拦截器和响应拦截器的使用。通过了解和掌握 axios 拦截器的使用，我们可以更好地处理前端数据交互的问题，并提高开发效率。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64ae614548841e9894a68a95