取消Axios请求后如何清理Abort Controller？

你的核心问题是模态框关闭后再次打开时，旧的AbortController信号没有被完全清理，导致新请求可能被错误取消。结合你的代码，主要有几个细节需要调整：

1. 修复按钮点击事件的低级错误 #

你的中止按钮代码里，onclick={handleAbort()}会在组件渲染时立即执行handleAbort，而非点击时触发。React中需使用驼峰式的onClick，且传递函数引用而非执行结果：

<button onClick={handleAbort}>中止</button>

2. 确保每次打开模态框都创建全新的AbortController #

如果模态框是通过状态（比如isModalOpen）控制显示/隐藏，组件可能不会完全卸载，此时useEffect的空依赖数组只会执行一次。需要把模态框的显示状态加入依赖，确保每次打开模态框时都创建新控制器并发起请求：

修改后的组件代码 #

const [isModalOpen, setIsModalOpen] = useState(false); // 假设用此状态控制模态框显示
const controllerRef = useRef(null);

const handleAbort = () => {
  controllerRef.current?.abort();
  controllerRef.current = null;
};

useEffect(() => {
  // 仅当模态框打开时执行逻辑
  if (!isModalOpen) return;

  controllerRef.current = new AbortController();
  dispatch(save(l, el, p.id, controllerRef.current));

  // 模态框关闭/组件卸载时清理
  return () => {
    handleAbort();
  };
}, [isModalOpen, dispatch, l, el, p.id]); // 加入所有相关依赖，避免闭包旧值问题

// 退出模态框逻辑
const handleExit = () => {
  setIsModalOpen(false);
};

return (
  <div>
    <Modal open={isModalOpen} onClose={handleExit}>
      <progressbar />
      <button onClick={handleAbort}>中止</button>
      <button onClick={handleExit}>退出</button>
    </Modal>
  </div>
);

3. 在Redux Action中区分取消错误，避免误触发失败逻辑 #

当请求被中止时，Axios会抛出CanceledError，可在action中判断并跳过不必要的错误提示：

修改后的action文件 #

import axios from 'axios';
export const save = (l, el, pId, controller) => async (dispatch) => {
  try {
    dispatch({ type: SAVE_REQUEST });
    await sync(l, el, pId, controller);
    dispatch({
      type: SAVE_SUCCESS,
      payload: el,
    });
  } catch (error) {
    // 仅在非取消错误时派发失败action
    if (!axios.isCancel(error)) {
      dispatch({ type: SAVE_FAIL, payload: error });
    }
  }
};

4. 服务文件参数传递修正 #

你的sync函数中，axios.post的参数顺序有误：请求数据应放在第二个参数，配置对象（含signal）放在第三个：

export const sync = (l, obj, pId, controller) => {
  const requestData = { ...obj, pId }; // 按需组装请求体
  return axios.post(`/${l}/f/ff/Create`, requestData, {
    signal: controller.signal
  });
};

核心清理逻辑说明 #

• 每次打开模态框时都会创建全新的AbortController，旧控制器在模态框关闭时被abort并重置为null，彻底脱离请求链路。
• 依赖数组加入所有相关变量，避免闭包导致的旧值引用问题。
• 在action中过滤取消错误，防止用户主动中止操作后触发错误提示或失败状态。

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