axios请求拦截器和响应拦截器

在使用 axios 进行 HTTP 请求时，使用 请求拦截器（Request Interceptor）和 响应拦截器（Response Interceptor）来对请求和响应进行自定义处理。

1. 请求拦截器 (Request Interceptor)

请求拦截器可以在请求发送之前对请求进行修改或做其他处理（比如添加认证信息、修改请求头等）。

语法：

axios.interceptors.request.use(
  function (config) {
    // 在发送请求之前做些什么
    return config;
  },
  function (error) {
    // 请求错误时做些什么
    return Promise.reject(error);
  }
);

示例：在请求头中添加 Authorization token

axios.interceptors.request.use(
  function (config) {
    // 假设你有一个存储的 token
    const token = localStorage.getItem('token');
    if (token) {
      config.headers['Authorization'] = `Bearer ${token}`;
    }
    return config;
  },
  function (error) {
    // 请求错误处理
    return Promise.reject(error);
  }
);

2. 响应拦截器 (Response Interceptor)

响应拦截器可以在响应数据到达时进行处理，通常用于统一处理错误或格式化响应数据。

语法：

axios.interceptors.response.use(
  function (response) {
    // 对响应数据做些什么
    return response;
  },
  function (error) {
    // 对响应错误做些什么
    return Promise.reject(error);
  }
);

示例：统一处理 API 错误

axios.interceptors.response.use(
  function (response) {
    // 对响应数据进行处理（比如统一格式化）
    return response.data; // 假设 API 返回的数据总是封装在 `data` 字段里
  },
  function (error) {
    // 请求失败时的统一错误处理
    if (error.response) {
      // 请求发出去并得到了响应
      console.error('Response error:', error.response);
    } else if (error.request) {
      // 请求已经发出但没有收到响应
      console.error('Request error:', error.request);
    } else {
      // 其他错误
      console.error('Error:', error.message);
    }
    return Promise.reject(error);
  }
);

3. 移除拦截器

你也可以在需要的时候移除拦截器，避免对后续请求产生影响。

const requestInterceptor = axios.interceptors.request.use(function (config) {
  // 添加自定义请求逻辑
  return config;
});

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

const responseInterceptor = axios.interceptors.response.use(function (response) {
  // 处理响应数据
  return response;
});

// 移除响应拦截器
axios.interceptors.response.eject(responseInterceptor);

4. 总结

• 请求拦截器：用于请求发出之前的处理（比如添加认证信息、修改请求头等）。
• 响应拦截器：用于处理响应数据，通常用来做统一的错误处理或者数据格式的转换。

通过拦截器，能够方便地实现全局的错误捕获和请求/响应的统一处理，提升代码的复用性和可维护性。