最直接有效的方式是共用同一个abortcontroller实例的signal并调用controller.abort()实现一键取消；需共享signal、不可复用已abort的signal，适合页面初始化批量加载等并发场景。
最直接有效的方式是让所有请求共用同一个 AbortController 实例的 signal，然后调用一次 controller.abort() 即可全部终止。
共享一个 signal 是关键
多个 fetch 要被“一键取消”，必须绑定同一个信号源。不能每个请求都新建一个 AbortController，否则 abort 只会影响其中一个。
- 创建一个
AbortController实例，提取它的signal - 把该
signal分别传给每个fetch的配置对象中 - 后续任意时刻调用
controller.abort()，所有关联请求立即 reject 并抛出AbortError
实际代码示例
比如同时拉取用户、订单和通知数据：
const controller = new AbortController();
const { signal } = controller;
Promise.all([
fetch('/api/user', { signal }),
fetch('/api/orders', { signal }),
fetch('/api/notifications', { signal })
])
.then(responses => Promise.all(responses.map(r => r.json())))
.catch(err => {
if (err.name === 'AbortError') {
console.log('全部请求已被取消');
}
});
// 点击取消按钮时
document.getElementById('cancel-btn').onclick = () => controller.abort();
注意 signal 的一次性特性
AbortSignal 是不可复用的：一旦被 abort，它就永久处于 aborted 状态。
- 不能把已 abort 的
signal再传给新的fetch，会立刻报错 - 如需重试，必须新建
AbortController，并重新发起请求 - 若要支持多次“取消-重发”流程，建议封装成函数，在每次调用前生成新 controller
适合统一取消的典型场景
这类方案适用于逻辑上属于同一操作的并发请求：
- 页面初始化时批量加载多个模块数据
- 搜索框触发的多接口建议（用户输入未完成就切换关键词）
- 表单提交前并行校验多个字段
- 用户点击“取消全部加载”按钮
