一键取消异步请求，AbortController使用教程

AbortController 是现代 Web 开发中实现精准、可控异步请求取消的核心机制，它并非替代 Promise，而是为 fetch 等支持 signal 的 API 提供主动中断能力——尤其在搜索联想、表单自动保存、轮询等高频交互场景中，能有效避免组件卸载后更新状态的内存泄漏、旧响应覆盖新结果等顽疾；文章手把手教你正确实践：每次请求必须新建 AbortController 实例、在 React useEffect 清理函数中调用 abort()、通过数组集中管理实现“一键取消所有”，并直击兼容性陷阱（如 axios 版本差异、XMLHttpRequest 信号支持、Service Worker 协同难题）和易被忽视的关键细节（如必须显式判断 AbortError 避免误报）。掌握它，你才能真正告别“请求失控”的前端焦虑。

AbortController 是什么，什么时候该用它

AbortController 不是 Promise 的替代品，而是用来主动中止正在运行的异步操作的信号机制。它在 fetch、XMLHttpRequest、setTimeout（需手动配合）、ReadableStream 等支持 signal 参数的 API 中起作用。如果你的页面有搜索联想、表单自动保存、轮询或图片懒加载，并且用户可能快速切换输入或离开页面，那就该用它——否则容易出现“响应回来时组件已卸载”或“旧请求覆盖新结果”的问题。

fetch 配合 AbortController 取消请求的正确写法

关键点不是“创建控制器”，而是“每次请求都新建一个控制器”，并确保 abort() 被及时调用。常见错误是复用同一个 AbortController 实例，导致后发起的请求被前一次的 abort() 干掉。

• 每次调用 fetch 前，必须 new 一个新的 AbortController
• 把 controller.signal 传给 fetch 的 signal 选项
• 取消时只调用 controller.abort()，不要重复 abort 同一个实例
• 如果用在 React 中，useEffect 清理函数里调用 abort() 是标准做法

function fetchData(query) {
  const controller = new AbortController();
  const signal = controller.signal;

  fetch(`/api/search?q=${query}`, { signal })
    .then(r => r.json())
    .then(data => console.log(data))
    .catch(err => {
      if (err.name === 'AbortError') {
        console.log('请求已被取消');
        return;
      }
      throw err;
    });

  return () => controller.abort(); // 返回取消函数
}

// 使用示例：连续触发时，自动取消前一个
let cancelPrev = null;
input.addEventListener('input', e => {
  cancelPrev?.();
  cancelPrev = fetchData(e.target.value);
});

如何一键取消所有挂起请求（非全局，但实用）

浏览器没有全局 abort 所有 fetch 的机制，所以“一键取消所有”本质是：你得自己持有所有活跃的 AbortController 实例，并统一 abort 它们。不能依赖 document 或 window 级别的钩子，因为 fetch 不注册到任何全局列表里。

• 用一个数组（如 const pendingControllers = []）收集每个请求对应的 controller
• 发起请求时 pendingControllers.push(controller)，成功/失败后记得 .splice() 或用 filter() 清理
• “一键取消”就是遍历并调用每个 controller.abort()，然后清空数组
• 注意：已 resolve/reject 的请求，再 abort 无副作用；但已 abort 过的 controller 再 abort 会抛错，建议加 try/catch 或标记状态

const pendingControllers = [];

function fetchWithTrack(url) {
  const controller = new AbortController();
  pendingControllers.push(controller);

  return fetch(url, { signal: controller.signal })
    .finally(() => {
      const i = pendingControllers.indexOf(controller);
      if (i > -1) pendingControllers.splice(i, 1);
    });
}

function cancelAll() {
  pendingControllers.forEach(c => {
    try {
      c.abort();
    } catch (e) {
      // 忽略 "AbortError: The operation was aborted." 以外的错误
    }
  });
  pendingControllers.length = 0;
}

容易被忽略的兼容性和边界情况

AbortController 在现代浏览器中支持良好（Chrome 66+、Firefox 57+、Safari 12.1+），但 Node.js 直到 v15.4 才原生支持，且早期版本的 polyfill（如 abort-controller）不支持 fetch 的 signal 透传，只适用于手写逻辑。另外几个硬伤：

• axios 1.x 默认不识别 signal，需升级到 1.2+ 或手动传 cancelToken（已废弃）或用 AbortController + adapter 配置
• XMLHttpRequest 支持 signal 是较新特性，老项目若还用它，得靠 xhr.abort() 自己管理
• Service Worker 中的 fetch 也支持 signal，但主页面 abort 后，SW 里可能仍继续处理，需额外通信协调
• 真正“优雅”的取消，不只是中断网络层，还要清理副作用：比如清除定时器、暂停 Canvas 动画、释放 MediaRecorder 等——这些都得你自己配对管理

最常被跳过的一步，是没检查 err.name === 'AbortError' 就直接报错或重试，结果把取消当成失败来兜底，反而掩盖了真实问题。

文中关于的知识介绍，希望对你的学习有所帮助！若是受益匪浅，那就动动鼠标收藏这篇《一键取消异步请求，AbortController使用教程》文章吧，也可关注golang学习网公众号了解相关技术文章。