axios拦截器原理是什么？

Axios 拦截器的工作原理基于链式调用和Promise。它允许你在请求发送前和响应返回后对请求和响应进行拦截和处理。 可以理解为一个“中间件”机制。

具体来说，Axios 拦截器分为两种：

• 请求拦截器 (Request Interceptors): 在请求发送之前执行。可以用于修改请求配置 (例如添加 headers、修改 data)，或根据条件取消请求。
• 响应拦截器 (Response Interceptors): 在收到响应之后执行。可以用于处理响应数据 (例如数据转换、错误处理)，或根据响应状态码进行重定向。

工作流程：

1. 注册拦截器: 使用 axios.interceptors.request.use() 注册请求拦截器，使用 axios.interceptors.response.use() 注册响应拦截器。这两个方法都接受两个参数：

   • fulfilled 回调函数：请求/响应成功时触发。
   • rejected 回调函数：请求/响应失败时触发 (例如网络错误、超时)。

2. 链式调用: 多个拦截器可以被注册，它们会按照注册顺序依次执行，形成一个链条。对于请求拦截器，链条的末端是实际的网络请求；对于响应拦截器，链条的末端是将响应数据返回给调用者。

3. Promise 处理: 拦截器内部使用 Promise 来处理异步操作。fulfilled 回调函数必须返回一个值 (可以是修改后的 config 或 response)，或者是一个 Promise。这个返回值会被传递给链条中的下一个拦截器。如果 fulfilled 回调函数抛出错误，或者返回一个 rejected 的 Promise，则会触发 rejected 回调函数。

4. 错误处理: rejected 回调函数用于处理错误。它也必须返回一个值或 Promise，或者抛出一个错误。如果 rejected 回调函数返回一个值或 resolved 的 Promise，则错误会被“消化”，链条会继续执行，但后续的 fulfilled 回调函数会收到这个返回值。如果 rejected 回调函数抛出错误或返回 rejected 的 Promise，则错误会继续向上传递，最终被 catch 捕获。

示例:

// 请求拦截器
axios.interceptors.request.use(
  config => {
    // 在发送请求之前添加 token
    config.headers.Authorization = 'Bearer ' + localStorage.getItem('token');
    return config;
  },
  error => {
    // 处理请求错误
    return Promise.reject(error);
  }
);

// 响应拦截器
axios.interceptors.response.use(
  response => {
    // 处理响应数据
    return response.data;
  },
  error => {
    // 处理响应错误，例如 token 过期
    if (error.response.status === 401) {
      // 重定向到登录页面
      window.location.href = '/login';
    }
    return Promise.reject(error);
  }
);

总结:

Axios 拦截器通过链式调用和 Promise 提供了一种灵活的机制，可以在不修改核心业务逻辑的情况下，对请求和响应进行预处理和后处理，例如添加认证信息、处理错误、转换数据等，从而提高代码的可维护性和复用性。