React严格模式下Axios请求已取消却仍触发then回调问题求助

问题原因 #

你的响应拦截器存在逻辑缺陷：当请求被AbortController取消时，错误会流入响应拦截器的错误处理函数，但你只处理了401状态码的情况，其他错误（包括Axios的CanceledError）没有被重新抛出。拦截器函数未返回值时默认返回undefined，Axios会将这个值视为成功响应，导致Promise链进入then回调，传入的参数自然是undefined，而catch分支完全不会触发。

看你原有的响应拦截器代码：

async (error) => {
  const prevRequest = error?.config;
  if (error?.response?.status === 401 && !prevRequest?.sent) {
    if (prevRequest) {
      prevRequest.sent = true;
      const access = await getToken();
      prevRequest.headers.Authorization = `Bearer ${access}`;
      return apiClient(prevRequest);
    }
    return Promise.reject(error);
  }
  // 此处无返回值，默认返回undefined，错误被吞掉
};

当请求被取消时，error.response为undefined，不会进入401判断分支，函数无返回值，导致Promise从失败转为成功。

修复方案 #

修改响应拦截器，确保所有未处理的错误（包括取消请求的错误）都通过Promise.reject(error)抛出：

const responseInterceptor = apiClient.interceptors.response.use(
  (response) => response,
  async (error) => {
    const prevRequest = error?.config;
    if (error?.response?.status === 401 && !prevRequest?.sent) {
      if (prevRequest) {
        prevRequest.sent = true;
        const access = await getToken();
        prevRequest.headers.Authorization = `Bearer ${access}`;
        return apiClient(prevRequest);
      }
    }
    // 所有未处理的错误统一抛出，包括CanceledError
    return Promise.reject(error);
  }
);

额外检查项 #

• 确认已正确导入Axios的CanceledError：

import { CanceledError } from 'axios';

• 可在拦截器中添加日志验证错误类型：

async (error) => {
  console.log('拦截器捕获的错误:', error);
  console.log('是否为取消错误:', error instanceof CanceledError);
  // 原有逻辑...
  return Promise.reject(error);
}

内容的提问来源于stack exchange，提问作者Hazem Gamal