# 拦截器示例代码

URL: https://caijiao.org/axios/snippets/interceptor
Source: docs/axios/snippets/interceptor.md
Description: 本章节提供 Axios 请求与响应拦截器的示例代码，包括如何统一处理 Token、请求参数预处理、响应数据格式化、全局错误处理与重试机制，帮助开发者在前端项目中高效管理接口请求逻辑，提高代码可维护性和项目稳定性。

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

## 一、请求拦截器示例

```js
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);
  }
);
```

## 二、响应拦截器示例

```js
// 添加响应拦截器
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);
  }
);
```

## 三、结合请求封装使用

```js
// 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 请求流程的全局控制，使前端接口调用更加规范、稳定和高效。