Axios拦击器重发请求，更新token

2023-10-24 14:26:49

Axios拦截器：拦截HTTP请求和响应以增强应用程序功能

简介

Axios是一个强大的HTTP客户端库，为基于Promise的AJAX请求提供了便捷性。它包含众多特性，其中包括拦截器，它允许开发者在请求发送前或响应返回后执行特定任务。通过拦截器，开发者可以实现各种功能，例如添加或修改请求头、处理错误，以及重试请求。

重试请求

在某些情况下，请求可能会由于网络连接问题或服务器错误而失败。为了处理这种情况，可以使用Axios拦截器来重试请求。

创建一个请求拦截器，可以在请求发送前执行特定操作。在拦截器中，可以检查请求的状态码。如果状态码为401，表示请求未经授权。此时，开发者可以重试请求。

响应处理

除了重试请求，还可以使用响应拦截器来处理响应。创建一个响应拦截器，可以在响应返回后执行特定操作。在响应拦截器中，同样可以检查响应的状态码。如果状态码为401，表示请求未经授权。开发者可以更新令牌并重试请求。

代码示例

请求拦截器（重试请求）：

axios.interceptors.request.use((config) => {
  // 在请求发送前执行特定操作
  if (config.url.includes('api') && config.headers.Authorization === undefined) {
    // 如果请求是针对API且未包含授权头，则添加授权头
    config.headers.Authorization = 'Bearer ' + localStorage.getItem('token');
  }
  return config;
}, (error) => {
  // 请求发送失败时执行特定操作
  return Promise.reject(error);
});

响应拦截器（更新令牌并重试请求）：

axios.interceptors.response.use((response) => {
  // 在响应返回后执行特定操作
  return response;
}, (error) => {
  // 响应返回失败时执行特定操作
  if (error.response && error.response.status === 401) {
    // 如果响应状态码是401，则更新令牌并重试请求
    refreshToken().then(() => {
      error.config.headers.Authorization = 'Bearer ' + localStorage.getItem('token');
      return axios(error.config);
    }).catch(() => {
      // 令牌更新失败，则注销用户
      logout();
    });
  }
  return Promise.reject(error);
});