axios拦截器

拦截器的基本概念

拦截器分为两种：

1. 请求拦截器：在请求发送前执行，可用于添加认证头、修改请求参数等。
2. 响应拦截器：在响应返回后执行，可用于统一处理错误、解析数据等。

核心方法

1. axios.interceptors.request.use(fulfilled, rejected)

• 作用：添加请求拦截器。
• 参数：
  • fulfilled：成功回调，接收 config 对象（包含请求配置），需返回修改后的 config。
  • rejected：失败回调，接收错误对象，需返回 Promise.reject(error)。

axios.interceptors.request.use(
  (config) => {
    // 添加认证头
    config.headers.Authorization = `Bearer ${localStorage.getItem('token')}`;
    return config;
  },
  (error) => {
    console.error('请求错误:', error);
    return Promise.reject(error);
  }
);

2. axios.interceptors.response.use(fulfilled, rejected)

• 作用：添加响应拦截器。
• 参数：
  • fulfilled：成功回调，接收 response 对象，可返回处理后的数据。
  • rejected：失败回调，接收错误对象，可处理 HTTP 错误（如 401、500）。

axios.interceptors.response.use(
  (response) => {
    // 只返回响应数据
    return response.data;
  },
  (error) => {
    if (error.response) {
      // 处理 HTTP 错误
      console.error(`HTTP 错误 ${error.response.status}`);
    }
    return Promise.reject(error);
  }
);

3. axios.interceptors.request.eject(id) 和 axios.interceptors.response.eject(id)

• 作用：移除拦截器。
• 参数：
  • id：拦截器的唯一标识，由 use() 方法返回。

// 保存拦截器 ID
const requestInterceptor = axios.interceptors.request.use((config) => {
  // ...
  return config;
});

// 移除拦截器
axios.interceptors.request.eject(requestInterceptor);

拦截器执行顺序

• 请求拦截器：后添加的先执行（类似栈结构）。
• 响应拦截器：先添加的先执行（类似队列结构）。

// 请求拦截器顺序：2 → 1
axios.interceptors.request.use((config) => { console.log('拦截器1'); return config; });
axios.interceptors.request.use((config) => { console.log('拦截器2'); return config; });

// 响应拦截器顺序：1 → 2
axios.interceptors.response.use((response) => { console.log('拦截器1'); return response; });
axios.interceptors.response.use((response) => { console.log('拦截器2'); return response; });

常见应用场景

1. 统一添加认证信息：

   axios.interceptors.request.use((config) => {
     config.headers.Authorization = `Bearer ${token}`;
     return config;
   });
   

2. 错误处理：

   axios.interceptors.response.use(
     (response) => response,
     (error) => {
       if (error.response.status === 401) {
         // 处理未授权错误（如跳转到登录页）
       }
       return Promise.reject(error);
     }
   );
   

3. 请求/响应日志记录：

   axios.interceptors.request.use((config) => {
     console.log(`请求: ${config.method} ${config.url}`);
     return config;
   });
   

4. 超时处理：

   axios.interceptors.request.use((config) => {
     config.timeout = 5000; // 5秒超时
     return config;
   });
   

注意事项

1. 必须返回值：

   • fulfilled 回调中必须返回 config 或 response，否则请求/响应会被中断。
   • rejected 回调中必须返回 Promise.reject(error)。

2. 异步操作：

   • 拦截器中可以进行异步操作（如刷新 token），但需返回 Promise。

3. 全局 vs 实例拦截器：

   • 全局拦截器（axios.interceptors）会影响所有请求。
   • 实例拦截器（axios.create().interceptors）仅影响特定实例。

总结

Axios 拦截器通过 use() 添加，通过 eject() 移除，是处理请求和响应的强大工具。合理使用拦截器可以大幅提高代码的可维护性和复用性。