如何用 AbortController 同时关停多个关联的并发 Fetch 请求-js教程-PHP中文网

能，但需每个 fetch 显式传入同一 abortcontroller 的 signal 实例；复用 controller 可多次 abort，新建 controller 则旧请求不受影响；已 abort 的 signal 不可重用，重试须新建控制器。

如何用 abortcontroller 同时关停多个关联的并发 fetch 请求

AbortController 能否真正中止多个 fetch 请求

能，但前提是每个 fetch() 都显式传入同一个 signal 实例——不是共享 AbortController 对象本身，而是共享它的 signal 属性。直接复用控制器实例（如多次调用 controller.abort()）没问题，但若中途新建控制器，旧请求不会受影响。

常见错误是：发起多个 fetch() 时分别创建新 AbortController，然后统一调用某个控制器的 abort()，结果只有最后一个请求被取消。这是因为每个 fetch() 只监听自己绑定的 signal。

✅ 正确做法：一个 AbortController 实例 → 多个 fetch() 共享其 signal
❌ 错误做法：多个 AbortController 实例 → 只 abort 其中一个，其余照常运行
⚠️ 注意：signal 是只读属性，不可重新赋值；也不能把不同控制器的 signal 合并

如何组织多个并发 fetch 并统一中止

典型场景是搜索建议、批量资源加载或表单提交前预检。关键在于把所有 fetch() 的 Promise 收集起来，并确保它们都接收到同一个 signal。

示例：同时请求用户信息、权限列表和通知数

const controller = new AbortController();
const { signal } = controller;

Promise.all([
  fetch('/api/user', { signal }),
  fetch('/api/permissions', { signal }),
  fetch('/api/notifications/count', { signal })
])
  .then(responses => Promise.all(responses.map(r => r.json())))
  .catch(err => {
    if (err.name === 'AbortError') {
      console.log('所有请求已被中止');
    }
  });

// 后续任意时刻调用：
controller.abort(); // 立即触发全部 pending 请求的 reject

Promise.all() 不会阻止 abort 行为；只要任一 fetch() 被中止，整个链就会进入 catch
如果部分请求已成功返回，abort() 仍会中止剩余 pending 请求，但不会回滚已成功的响应
不要在 fetch() 外层再包一层 setTimeout 或自定义 Promise —— 这会绕过 signal 监听

中止后还能不能重试？需要注意什么

可以重试，但必须新建 AbortController。已 abort 的 signal 永远处于 aborted 状态，无法复用。

✅ 每次新请求组都要 new 一个新的 AbortController
❌ 复用已 abort 的 controller → 所有 fetch() 立即抛出 AbortError
? 建议封装成函数，避免手写重复逻辑：

function makeBatchRequest(urls) {
  const controller = new AbortController();
  return {
    promise: Promise.all(
      urls.map(url => fetch(url, { signal: controller.signal }))
    ),
    abort: () => controller.abort()
  };
}

// 使用：
const batch = makeBatchRequest(['/a', '/b', '/c']);
batch.promise.then(...);
// 需要中止时：
batch.abort();

AbortController 在真实项目中的坑点

浏览器兼容性基本不是问题（Chrome 66+、Firefox 57+、Safari 12.1+），但实际集成时容易忽略几个细节：

服务端不会感知 abort —— TCP 连接可能还在发数据，后端日志里请求仍会显示“完成”，这是正常现象
React 中若在组件卸载后调用 abort()，需确保 controller 引用未被销毁（例如存在 ref 中，而非闭包变量）
fetch() 成功响应后，signal 依然可用，但再调用 abort() 不会产生副作用；不过别依赖这点做状态判断
某些 polyfill（如 abortcontroller-polyfill）不支持 reason 参数，慎用 controller.abort(new Error('xxx'))