axios如何利用promise无痛刷新token

在使用axios发送请求时，我们可以通过Promise无痛刷新token，确保在token过期之后，通过刷新token的方式继续发送请求。 以下是实现该功能的一种方式：

首先，我们需要创建一个axios实例，并设置请求拦截器。在请求拦截器中，我们通过判断是否存在有效的token来决定是否需要刷新token。

import axios from 'axios';

// 创建axios实例
const instance = axios.create();
// 设置请求拦截器
instance.interceptors.request.use(
  (config) => {
    // 将token添加到请求头
    const token = localStorage.getItem('token');
    if (token) {
      config.headers.Authorization = `Bearer ${token}`;
    }
    return config;
  },
  (error) => {
    return Promise.reject(error);
  }
);

接下来，我们需要在响应拦截器中处理token刷新的逻辑。当接收到后端的响应时，我们可以在响应拦截器中判断是否返回了一个特定的错误码，表示token已过期。如果是，则我们需要使用refreshToken来刷新token。

// 设置响应拦截器
instance.interceptors.response.use(
  (response) => {
    // 处理响应数据
    return response;
  },
  (error) => {
    // 判断是否为token过期的错误码
    if (error.response && error.response.status === 401) {
      const originalRequest = error.config;
      // 使用refreshToken刷新token
      return refreshToken().then((newToken) => {
        // 刷新成功后将新token保存到本地存储
        localStorage.setItem('token', newToken);
        // 重新发送原始请求
        originalRequest.headers.Authorization = `Bearer ${newToken}`;
        return axios(originalRequest);
      }).catch((refreshError) => {
        // 刷新失败处理逻辑，跳转到登录页面等
        console.error('刷新token失败：', refreshError);
        // 重定向到登录页面等
        window.location.href = '/login';
        return Promise.reject(refreshError);
      });
    }
    return Promise.reject(error);
  }
);

在上面的代码中，refreshToken函数用于实现刷新token的逻辑。它可以发送一个特殊的刷新token请求，并返回新的token。在刷新成功后，我们将新的token保存到本地存储中，并重新发送原始请求。

需要注意的是，如果刷新token失败，我们需要根据具体业务需求进行相应的处理，例如跳转到登录页面，弹窗提示重新登录等。

最后，我们可以使用该axios实例来发送请求，它会自动判断是否需要刷新token，并且无需手动处理token过期的情况。

希望以上回答能对您有所帮助。