Axios拦截器的使用技巧

# 1. Axios拦截器简介

### 1.1 什么是Axios拦截器

Axios拦截器是一种在发送请求或接收响应前执行预处理逻辑的机制。通过拦截器，我们可以在请求被发送或响应被接收之前对它们进行全局性的处理。

### 1.2 Axios拦截器的作用和优势

Axios拦截器的作用在于提供了一种统一的方式来处理HTTP请求和响应，可以用于添加公共的请求参数、统一处理错误、进行权限验证等。它的优势在于可以提高代码的可维护性和可扩展性。

### 1.3 Axios拦截器的基本原理

Axios拦截器的基本原理是通过添加请求拦截器和响应拦截器来实现对请求和响应的拦截和处理。请求拦截器可用于在请求发出前对请求进行一些处理，而响应拦截器则可用于在接收到响应后对其进行处理。

# 2. Axios拦截器的基本用法

### 2.1 请求拦截器的使用
在使用 Axios 进行网络请求时，可以通过请求拦截器对请求进行一些预处理操作，比如在请求发送前添加 token、设置公共 headers 等。下面是请求拦截器的基本用法：

// 创建 Axios 实例
const axiosInstance = axios.create();

// 添加请求拦截器
axiosInstance.interceptors.request.use(
  (config) => {
    // 在发送请求之前做些什么
    config.headers['Authorization'] = `Bearer ${token}`;
    return config;
  },
  (error) => {
    // 对请求错误做些什么
    return Promise.reject(error);
  }
);

**代码说明：**
- 首先，我们创建了一个 Axios 实例 axiosInstance。
- 然后，通过 axiosInstance.interceptors.request.use 方法添加了一个请求拦截器。
- 在拦截器中，我们可以对请求的 config 进行修改，比如添加 token、设置 headers。
- 最后，通过 return config; 将修改后的 config 返回，以便请求继续发送。

### 2.2 响应拦截器的使用
响应拦截器允许我们在接收到响应数据后对其进行一些处理，比如统一处理错误信息、对数据进行格式化等。下面是响应拦截器的基本用法：

// 创建 Axios 实例
const axiosInstance = axios.create();

// 添加响应拦截器
axiosInstance.interceptors.response.use(
  (response) => {
    // 对响应数据做些什么
    return response;
  },
  (error) => {
    // 对响应错误做些什么
    return Promise.reject(error);
  }
);

**代码说明：**
- 我们通过 axiosInstance.interceptors.response.use 方法添加了一个响应拦截器。
- 在拦截器中，我们可以对响应的数据进行处理，比如统一处理错误信息、格式化数据等。
- 最后，通过 return response; 将处理后的数据返回，以便业务代码继续处理。

### 2.3 错误拦截器的使用
错误拦截器可以捕获发生的请求错误，可以用于统一处理请求失败时的逻辑，比如弹出错误提示、记录日志等。下面是错误拦截器的基本用法：

// 创建 Axios 实例
const axiosInstance = axios.create();

// 添加错误拦截器
axiosInstance.interceptors.response.use(
  (response) => {
    return response;
  },
  (error) => {
    // 对响应错误做些什么
    if (error.response) {
      // 请求已发出，但服务器返回状态码不在 2xx 范围内
      console.log(error.response.data);
      console.log(error.response.status);
      console.log(error.response.headers);
    } else {
      // 请求没有发出，网络错误等
      console.log(error.message);
    }
    return Promise.reject(error);
  }
);

**代码说明：**
- 我们通过 axiosInstance.interceptors.response.use 方法添加了一个错误拦截器。
- 在拦截器内部，我们可以根据错误类型进行相应的处理，比如在控制台打印错误信息、记录日志等。
- 最后，通过 return Promise.reject(error); 将错误继续抛出，以便业务代码进行后续处理。

# 3. Axios拦截器进阶技巧

Axios拦截器在基本使用的基础上还可以进行进阶操作，包括多个拦截器的使用方式、拦截器的链式调用以及