用 abortcontroller 同时取消多个请求的关键是共享同一 signal 实例：统一创建 const controller = new abortcontroller()，所有 fetch 传入 controller.signal，调用一次 controller.abort() 即可中止全部请求。

用 AbortController 同时取消多个请求，核心是**共享同一个 signal 实例**——所有 fetch 请求都传入同一个 controller.signal，调用一次 controller.abort() 就能中止全部。

创建一个 controller 并复用它的 signal

不要为每个请求新建 AbortController，否则 abort 互不影响。正确做法是统一创建一个，把它的 signal 传给所有 fetch：

• 初始化一个 const controller = new AbortController();
• 所有 fetch(url, { signal: controller.signal }) 都用这个 signal
• 需要取消时，只调用一次 controller.abort()

实际例子：并发请求 + 一键取消

比如同时请求用户信息、订单列表和通知数：

Json Schema Toolkit

使用 JSON Schema 验证 JSON 数据，从示例 JSON 生成 schema，并将其转换为 TypeScript 接口、Python 数据类或 Markdown 文档。

下载

const controller = new AbortController();

Promise.all([
  fetch('/api/user', { signal: controller.signal }),
  fetch('/api/orders', { signal: controller.signal }),
  fetch('/api/notifications', { signal: controller.signal })
])
.then(responses => Promise.all(responses.map(r => r.json())))
.catch(err => {
  if (err.name === 'AbortError') {
    console.log('所有请求已被取消');
  } else {
    console.error('请求出错：', err);
  }
});

// 任意时刻调用即可取消全部
// controller.abort();

注意 signal 的生命周期和兼容性

signal 是只读的，不可重用；一旦 abort，它就进入 aborted 状态，后续再传给新 fetch 会立刻拒绝 Promise。如果要发起新一轮请求，需新建 AbortController。

• 旧版浏览器（如 IE）不支持 AbortController，需 polyfill 或降级处理
• axios 1.3+ 也支持传入 signal，用法一致
• 注意：fetch 中断后，已响应的部分数据不会回滚，但未完成的连接会被关闭

封装成可取消的请求函数（推荐）

便于复用和管理：

function createCancellableRequest() {
  const controller = new AbortController();
  return {
    signal: controller.signal,
    abort: () => controller.abort(),
    fetch: (url, options = {}) =>
      fetch(url, { ...options, signal: controller.signal })
  };
}

// 使用
const req = createCancellableRequest();
req.fetch('/api/a').then(...);
req.fetch('/api/b').then(...);
// req.abort(); // 一键取消两个

Java免费学习笔记：立即使用
解锁 Java 大师之旅：从入门到精通的终极指南