17370845950

Axios拦截器分为请求和响应两种类型，请求拦截器在发送请求前添加认证、设置请求头等，响应拦截器在接收响应后处理数据、错误提示等。通过axios.interceptors.request.use()和axios.interceptors.response.use()注册拦截器，支持多个拦截器按顺序执行，请求拦截器先注册先执行，响应拦截器先注册后执行，适用于统一处理token、loading状态、错误码跳转等场景，提升代码可维护性。

在使用 Axios 进行网络请求时，拦截器（Interceptors）是一个非常实用的功能。它允许你在请求发送前或响应返回后自动处理数据，而无需在每个请求中重复写逻辑。这对于统一处理认证、错误提示、加载状态等场景尤其有用。

什么是 Axios 拦截器

Axios 拦截器分为两种：请求拦截器和响应拦截器。

请求拦截器会在请求被发送到服务器之前执行，你可以在这里修改请求配置，比如添加 token、设置请求头、记录日志等。

响应拦截器会在接收到服务器响应后、then 或 catch 处理前执行，适合做响应数据的统一处理、错误统一提示、状态码判断等。

如何使用请求拦截器

通过 axios.interceptors.request.use() 添加请求拦截逻辑。

常见用途包括：

• 在请求头中添加认证信息（如 Authorization）
• 显示全局 loading 动画
• 格式化请求参数

示例代码：

axios.interceptors.request.use(
  config => {
    const token = localStorage.getItem('token');
    if (token) {
      config.headers.Authorization = `Bearer ${token}`;
    }
    // 显示加载动画
    showLoading();
    return config;
  },
  error => {
    // 处理请求错误
    return Promise.reject(error);
  }
);

如何使用响应拦截器

通过 axios.interceptors.response.use() 添加响应拦截逻辑。

典型应用场景有：

• 统一处理 401 未授权跳转登录页
• 隐藏 loading 动画
• 拦截特定错误码并提示用户
• 简化响应数据结构（只返回 data）

示例代码：

axios.interceptors.response.use(
  response => {
    // 隐藏加载动画
    hideLoading();
    return response.data; // 直接返回 data 字段
  },
  error => {
    hideLoading();
    if (error.response?.status === 401) {
      // 清除本地 token 并跳转登录页
      localStorage.removeItem('token');
      window.location.href = '/login';
    } else if (error.response?.status === 500) {
      alert('服务器内部错误');
    }
    return Promise.reject(error);
  }
);

拦截器的执行顺序

如果有多个拦截器，它们会按照注册顺序依次执行。

请求拦截器：先注册的先执行。

响应拦截器：先注册的后执行（类似栈结构）。

例如：

// 执行顺序：req1 → req2 → 网络请求 → res2 → res1
axios.interceptors.request.use(req1);
axios.interceptors.request.use(req2);
axios.interceptors.response.use(res1);
axios.interceptors.response.use(res2);

基本上就这些。拦截器机制让 Axios 的请求管理变得集中且高效，合理使用可以大幅提升开发效率和项目可维护性。