使用AbortController取消Axios POST请求失效问题排查

核心问题分析 #

你的代码里最大的问题是AbortController实例的作用域问题。如果这段代码写在React函数组件的顶层，组件每次重新渲染时都会创建新的AbortController实例。当你调用completeHandler发起请求时，用的是当时渲染周期里的controller；而后续组件重新渲染后，cancelUploadHandler里的controller已经是新的实例了，调用abort()自然无法终止之前的请求。

修复方案 #

用useRef来保存AbortController实例，确保请求和取消操作共用同一个有效实例：

import { useRef } from 'react';
import axios from 'axios';

// 组件内部定义ref保存controller
const abortControllerRef = useRef(null);

const completeHandler = async () => {
  // 每次发起请求前创建新的controller，避免复用已失效的实例
  abortControllerRef.current = new AbortController();
  try {
    const response = await axios.post(
      process.env.APP_URL + "post-url/",
      data,
      {
        onUploadProgress: (progress) => {
          console.log(progress);
        },
        withCredentials: true,
        signal: abortControllerRef.current.signal
      }
    );
    return response.data;
  } catch (error) {
    if (axios.isCancel(error)) {
      console.log("Request canceled:", error.message);
    } else {
      console.log(error);
    }
  }
};

const cancelUploadHandler = () => {
  console.log("CANCEL REQUEST");
  // 可选：添加取消原因，方便在catch里识别
  abortControllerRef.current?.abort('上传已取消');
};

额外排查点 #

• 确认调用取消函数时，请求还处于活跃状态（比如上传进度日志还在输出），如果请求已经完成，取消操作不会有效果。
• 无需怀疑Axios版本：v1.4.0完全支持AbortController，这个版本的适配没问题。
• 可以临时移除withCredentials设置测试，排除跨域配置对取消逻辑的干扰（大概率不影响，但可快速验证）。

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