axios 的拦截器设置及原理axios.interceptors（拦截器）是 Axios 提供的一个强大的功能，用于在

axios.interceptors（拦截器）是 Axios 提供的一个强大的功能，用于在请求发出前和响应返回后进行一些特定的操作，类比AOP(面向切面的编程)。以下是关于 axios.interceptors 的设置及原理的详细介绍：

一、设置

请求拦截器（Request Interceptor）：
- 可以在请求发送之前对请求进行修改或添加额外的信息。
- 例如添加认证令牌、设置请求头、显示加载指示器等。
- 设置方式如下（在main.js或main.ts中）：

     axios.interceptors.request.use(
       config => {
         // 在请求发送之前做些什么
         // 比如添加请求头
         config.headers['Authorization'] = 'Bearer your_token';
         return config;
       },
       error => {
         // 对请求错误做些什么
         return Promise.reject(error);
       }
     );

响应拦截器（Response Interceptor）：
- 可以在接收到响应后对响应数据进行处理或进行错误处理。
- 例如统一处理错误状态码、解析响应数据、隐藏加载指示器等。
- 设置方式如下（在main.js或main.ts中）：

     axios.interceptors.response.use(
       response => {
         // 对响应数据做点什么
         return response;
       },
       error => {
         // 对响应错误做点什么
         if (error.response.status === 401) {
           // 处理未授权错误，例如跳转到登录页面
         }
         return Promise.reject(error);
       }
     );

二、原理

工作流程：
- 当使用 axios 发送请求时，请求会依次经过请求拦截器。在请求拦截器中，可以修改请求配置（如添加请求头、修改参数等），然后将修改后的请求配置传递给下一个拦截器或实际发送请求。
- 当服务器返回响应时，响应会依次经过响应拦截器。在响应拦截器中，可以对响应数据进行处理（如解析数据、检查错误状态码等），然后将处理后的响应数据传递给调用者或进行错误处理。
拦截器的执行顺序：
- 请求拦截器按照添加的顺序依次执行。首先执行第一个添加的请求拦截器，然后依次执行后续的拦截器，最后发送请求。
- 响应拦截器也是按照添加的顺序依次执行。首先执行最后添加的响应拦截器，然后依次执行前面的拦截器，最后将处理后的响应数据返回给调用者。
用途：
- 统一处理请求和响应：可以在拦截器中实现一些通用的逻辑，避免在每个请求和响应处理中重复编写相同的代码。
- 错误处理：集中处理各种错误情况，提高代码的可维护性。
- 增强安全性：例如添加认证令牌、防止跨站请求伪造（CSRF）等。

例如，在一个 Vue.js 项目中，可以使用请求拦截器在每个请求中添加用户认证令牌，使用响应拦截器统一处理错误状态码并显示相应的错误消息给用户。这样可以使代码更加简洁、可维护，并提高开发效率。