Axios 拦截器

概述

在使用 Axios 发送 HTTP 请求时，有时候我们需要在请求发送前或响应接收后执行一些额外的操作。Axios 提供了拦截器（Interceptors）功能来帮助我们实现这一需求。

拦截器分为两种类型：请求拦截器和响应拦截器。通过设置这些拦截器，我们可以统一处理诸如添加认证信息、记录日志、转换数据格式等任务。

创建和使用拦截器

添加拦截器

请求拦截器

请求拦截器允许我们在请求被发送之前对其进行修改。可以使用 axios.interceptors.request.use 方法添加请求拦截器。该方法接受两个参数：一个用于处理成功的请求，另一个用于处理出错的请求。

// www.javascriptcn.com code example
axios.interceptors.request.use(
  (config) => {
    // 在这里对配置进行修改
    config.headers['Authorization'] = 'Bearer ' + getToken();
    return config;
  },
  (error) => {
    // 对错误的请求进行处理
    return Promise.reject(error);
  }
);

响应拦截器

响应拦截器允许我们在接收到响应之后对其进行修改。可以使用 axios.interceptors.response.use 方法添加响应拦截器。同样地，该方法也接受两个参数：一个用于处理成功的响应，另一个用于处理出错的响应。

// www.javascriptcn.com code example
axios.interceptors.response.use(
  (response) => {
    // 在这里对响应进行处理
    return response.data;
  },
  (error) => {
    // 对错误的响应进行处理
    if (error.response.status === 401) {
      window.location.href = '/login';
    }
    return Promise.reject(error);
  }
);

移除拦截器

当我们不再需要某个拦截器时，可以通过其返回值来移除它。每个拦截器在添加时都会返回一个 ID，这个 ID 可以用来移除对应的拦截器。

// www.javascriptcn.com code example
const myRequestInterceptor = axios.interceptors.request.use((config) => {
  config.headers['Authorization'] = 'Bearer ' + getToken();
  return config;
});

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

const myResponseInterceptor = axios.interceptors.response.use((response) => {
  return response.data;
});

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

实际应用示例

示例 1：添加认证头

假设我们的应用需要在所有请求中都包含一个认证头，我们可以这样做：

function addAuthHeader(config) {
  config.headers['Authorization'] = 'Bearer ' + getToken();
  return config;
}

axios.interceptors.request.use(addAuthHeader);

示例 2：全局错误处理

为了确保所有的错误都被正确捕获并处理，我们可以添加一个响应拦截器：

// www.javascriptcn.com code example
function handleErrors(error) {
  if (error.response && error.response.status === 401) {
    window.location.href = '/login';
  } else {
    console.error('An unexpected error occurred:', error);
  }
  return Promise.reject(error);
}

axios.interceptors.response.use(null, handleErrors);

注意事项

• 拦截器会作用于所有的 Axios 请求。因此，在设计拦截器时，请确保它们不会对非预期的请求产生负面影响。
• 如果你需要为特定的请求单独处理，可以在创建请求时传入自定义的配置对象，而不是依赖全局拦截器。
• 当应用卸载或者某些组件销毁时，记得移除不必要的拦截器以避免内存泄漏。

通过上述内容，我们可以看到，Axios 的拦截器为我们提供了一种非常灵活的方式来处理请求和响应，使得我们的前端代码更加简洁和可维护。