拦截器示例代码

Axios 拦截器可以在请求发送前或响应返回后进行统一处理，适用于添加 Token、统一处理错误、格式化响应等场景。

一、请求拦截器示例

import axios from './axios-instance';

// 添加请求拦截器
axios.interceptors.request.use(
  config => {
    // 在请求发送前做处理，例如添加 Token
    const token = localStorage.getItem('token');
    if (token) {
      config.headers.Authorization = `Bearer ${token}`;
    }

    // 可以对请求参数进行统一处理
    if (config.method === 'get') {
      config.params = {
        ...config.params,
        timestamp: Date.now()
      };
    }

    return config;
  },
  error => {
    // 请求错误处理
    console.error('Request Error:', error);
    return Promise.reject(error);
  }
);

二、响应拦截器示例

// 添加响应拦截器
axios.interceptors.response.use(
  response => {
    // 对响应数据进行统一处理
    if (response.data.code !== 200) {
      return Promise.reject(new Error(response.data.message || 'Error'));
    }
    return response.data;
  },
  error => {
    // 全局错误处理
    if (error.response) {
      console.error(`HTTP Error: ${error.response.status} - ${error.response.statusText}`);
    } else {
      console.error('Network Error or Timeout');
    }
    return Promise.reject(error);
  }
);

三、结合请求封装使用

// request.js
export const request = (config) => axios(config);

// 使用封装的请求
request({ url: '/users', method: 'get' })
  .then(data => console.log(data))
  .catch(err => console.error(err));

四、拦截器应用场景

• 统一添加请求头（Token、语言设置、设备信息等）
• 格式化响应数据，减少各模块重复处理
• 全局错误处理，如网络异常、权限不足提示
• 请求重试、缓存或防止重复请求

通过拦截器，可实现对 Axios 请求流程的全局控制，使前端接口调用更加规范、稳定和高效。