前言
在 Vue.js 的单页应用 (SPA) 项目中，我们通常会使用 axios 进行网络请求。axios 是一个基于 Promise 的 HTTP 客户端，可以在浏览器和 Node.js 中使用。axios 的拦截器 (interceptor) 功能可以在请求或响应被 then 或 catch 处理之前对它们进行拦截和处理。本文将详细介绍 axios 拦截器的原理和应用，并提供示例代码。
拦截器原理
axios 拦截器分为请求拦截器和响应拦截器。请求拦截器会在发送请求之前拦截请求并对请求进行处理，而响应拦截器会在接收到响应之后拦截响应并对响应进行处理。axios 拦截器的原理是通过链式调用来实现的，即将请求拦截器和响应拦截器放在一个数组中，然后按照数组中的顺序依次执行。
请求拦截器的执行顺序是先添加的先执行，而响应拦截器的执行顺序是后添加的先执行。如果请求拦截器中发生了错误，则不会执行后面的请求拦截器和请求，直接跳转到错误处理流程。同样，如果响应拦截器中发生了错误，则不会执行后面的响应拦截器和 then/catch，直接跳转到错误处理流程。
拦截器应用
请求拦截器
请求拦截器可以用来添加公共请求头、添加请求参数、对请求进行加密等操作。示例代码如下：
-- -------------------- ---- -------
------ ----- ---- --------
-- -------
-------------------------------
------ -- -
-- -----------
---------------------------- - ------- - - ------------------------------
------ -------
--
----- -- -
-- ---------
------ ----------------------
-
--上面的代码中，我们在请求拦截器中添加了一个名为 Authorization 的请求头，其值为从本地存储中获取的 token。这样，在每次发送请求时都会自动带上这个请求头。
响应拦截器
响应拦截器可以用来对响应进行处理，比如对返回的数据进行解密、对响应进行统一处理等。示例代码如下：
-- -------------------- ---- -------
------ ----- ---- --------
-- -------
--------------------------------
-------- -- -
-- ---------
-- ------------------- --- -- -
------ ---------------------
- ---- -
------ ----------------------------------
-
--
----- -- -
-- ---------
------ ----------------------
-
--上面的代码中，我们在响应拦截器中对返回的数据进行了统一处理。如果返回数据中的 code 字段为 0，则返回 result 字段；否则，直接抛出错误信息。
总结
axios 拦截器是 Vue.js SPA 项目中常用的功能之一，可以用来对请求和响应进行拦截和处理。本文介绍了拦截器的原理和应用，并提供了示例代码。在实际开发中，我们可以根据需要自定义拦截器来满足不同的需求。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6514e79395b1f8cacdd4802b