React中Axios拦截器刷新Token后如何续接组件原有请求流程？

DevOps 小满

2026-8-1

解决Axios拦截器刷新Token后重发请求的Promise链式问题

你的问题核心是拦截器里的401处理逻辑没有正确返回Promise链，导致原请求直接进入catch分支，没有等待重发请求的结果。只需要修改拦截器代码，把刷新Token并重发请求的Promise链返回即可。

修改后的拦截器代码

privateAxios.interceptors.response.use(
  (response) => {
    return response;
  },
  (error) => {
    const { config, response } = error;
    const originalRequest = config;
    if (response?.status === 401) {
      // 关键：return这个Promise链，让原请求的Promise等待它完成
      return apiProvider
        .refreshToken()
        .then(() => {
          let headers = getAuthHeaders();
          privateAxios.defaults.headers = headers;
          originalRequest.headers = headers;
          return privateAxios(originalRequest);
        })
        .catch((err) => {
          logout();
          return Promise.reject(err);
        });
    }
    return Promise.reject(error);
  }
);

为什么这样改？

原来的代码在401分支里没有return apiProvider.refreshToken()的Promise链，导致拦截器直接执行了return Promise.reject(error)，原请求的Promise就进入了catch。

现在return这个Promise链后：

如果刷新Token成功并重发请求，privateAxios(originalRequest)会返回新的响应Promise，这个响应会传递给组件请求的then分支，组件里的showSuccessFeedbackForm()、reloadTable()、handleClose()就会正常执行；
如果刷新Token失败，catch分支会logout并把错误抛出，组件的catch分支会接收到错误，执行对应的告警逻辑。