Axios 是一个基于 Promise 的 HTTP 请求库，广泛应用于前端开发中。在 Vue.js 中，我们经常使用 Axios 来发送 HTTP 请求获取数据。但是，每次发起请求时都会带上请求头信息、设置超时时间、拦截响应等操作是一件繁琐的事情。为此，Axios 提供了拦截器，允许我们在请求发送前、响应返回前进行拦截并统一处理数据。
本文将介绍 Vue.js 中如何使用 Axios 拦截器进行数据统一处理，初学者也可以通过本文了解拦截器的基本使用方法。
使用 Axios 拦截器
Axios 的拦截器分为请求拦截器和响应拦截器，分别允许我们在请求发送前、响应返回后对数据进行处理。
请求拦截器
请求拦截器允许我们在请求发送前对请求进行拦截和处理。我们可以在请求头中添加额外的信息、使用 loading 组件显示加载等待状态等操作。下面是一个使用请求拦截器的示例代码：
-- -------------------- ---- -------
------ ----- ---- -------
-------------------------------
------ -- -
-- ----------------------
---------------------------- - ------- - - ----------
------ ------
--
----- -- -
-- --------
------ ---------------------
-
-上面的代码中，我们使用 axios.interceptors.request.use 注册一个请求拦截器，它接受两个参数：一个是处理请求的回调函数，一个是处理请求错误的回调函数。在回调函数中，我们可以通过修改 config 对象来改变请求参数、在请求头中添加额外的信息等操作。如果出现错误，我们可以统一处理错误并通过 Promise.reject(error) 返回错误信息。
响应拦截器
响应拦截器允许我们在响应返回后对数据进行拦截和处理。我们可以对响应结果进行统一处理、处理错误信息等操作。下面是一个使用响应拦截器的示例代码：
-- -------------------- ---- -------
------ ----- ---- -------
--------------------------------
-------- -- -
-- ---------
------ -------------
--
-- --------
----- -- -
-- ------ -- --------------- -
------ ----------------------- -
---- ----
------------- - ------
-----
---- ----
------------- - ---------
-----
---- ----
------------- - -------- -----------------------------
-----
---- ----
------------- - ---------
-----
--------
------------- - ------
-
-
------ ---------------------
-
-上面的代码中，我们使用 axios.interceptors.response.use 注册了一个响应拦截器。回调函数中，我们对响应数据进行处理，并返回处理后的数据。如果出现错误，我们统一处理错误信息，并通过 Promise.reject(error) 返回错误信息。
示例代码
为了更好地说明 Axios 拦截器的使用方法，下面是一个完整的代码示例：
-- -------------------- ---- -------
------ ----- ---- -------
-- -------
-------------------------------
------ -- -
-- ----------------------
---------------------------- - ------- - - ----------
------ ------
--
----- -- -
-- --------
------ ---------------------
-
-
-- -------
--------------------------------
-------- -- -
-- ---------
------ -------------
--
-- --------
----- -- -
-- ------ -- --------------- -
------ ----------------------- -
---- ----
------------- - ------
-----
---- ----
------------- - ---------
-----
---- ----
------------- - -------- -----------------------------
-----
---- ----
------------- - ---------
-----
--------
------------- - ------
-
-
------ ---------------------
-
-
-- -- --- --
----------------------
--------- -- -
----------------
--
---------- -- -
------------------
--
-- -- ---- --
----------------------- - ----- ------ ------ --
--------- -- -
----------------
--
---------- -- -
------------------
--上面的代码中，我们首先使用 axios.interceptors.request.use 注册了一个请求拦截器，并在请求头中添加了 JWT Token。然后，我们使用 axios.interceptors.response.use 注册了一个响应拦截器，并对响应数据进行了处理。最后，我们使用 axios.get 和 axios.post 发送了 GET 和 POST 请求，并在控制台输出了响应结果或错误信息。
总结
通过本文的介绍，我们了解了 Vue.js 中如何使用 Axios 拦截器进行数据统一处理。请求拦截器和响应拦截器允许我们在请求发送前、响应返回后对数据进行拦截和处理，可以大大简化我们的代码，并避免重复的操作。同时，我们也学习到了拦截器的基本使用方法，并通过一个示例代码来了解其在实际开发中的应用。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/649aa06b48841e989478d19c