在多个 fetch 请求中复用同一个 abortsignal，需共享单个 abortcontroller 实例的 signal 属性；调用一次 controller.abort() 即可同时中止所有关联请求，且中止后 signal 不可重用，新请求须新建控制器。

在多个 fetch 请求中复用同一个 AbortSignal，关键在于**共享一个 AbortController 实例的 signal 属性**，而不是为每个请求新建控制器。这样，调用一次 controller.abort() 就能同时中止所有关联的请求。

创建并共享 AbortController 实例

只需创建一个 AbortController，然后把它的 signal 传给所有需要受控的 fetch 调用：

• 不要在每次 fetch 前新建 AbortController
• 确保所有请求都使用同一个 controller.signal
• 信号是只读的，可安全地跨函数、组件或模块传递

实际使用示例

比如同时请求用户信息和订单列表，并支持统一取消：

Alibabacloud Sdk Client Initialization For Java

在 Java 中初始化和管理阿里云 SDK客户端。包括单例模式、线程安全、endpoint 与 region 配置、VPC 终端节点、同步与异步等。

下载

const controller = new AbortController();

// 两个 fetch 共享同一个 signal
fetch('/api/user', { signal: controller.signal })
  .then(res => res.json())
  .then(data => console.log('user:', data));

fetch('/api/orders', { signal: controller.signal })
  .then(res => res.json())
  .then(data => console.log('orders:', data));

// 任意时刻调用 abort，两个请求都会被中止
// controller.abort();

注意信号的生命周期与错误处理

AbortSignal 一旦触发 abort，就不可重置；后续再用它发起请求会立即拒绝（DOMException: The user aborted a request.）：

• 如果需要发起新请求，必须新建 AbortController
• 建议在 catch 中检查错误是否为中止： err.name === 'AbortError'
• 避免在已 abort 的 signal 上重复调用 abort()（无害但没必要）

在 React 或异步逻辑中安全管理

常见场景如组件卸载时取消请求，可在 useEffect 或 cleanup 阶段调用 controller.abort()：

useEffect(() => {
  const controller = new AbortController();

  fetch('/api/data', { signal: controller.signal })
    .then(r => r.json())
    .then(setData)
    .catch(err => {
      if (err.name !== 'AbortError') console.error(err);
    });

  return () => controller.abort(); // 组件卸载时统一取消
}, []);

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