使用 AbortController 可让多个 fetch 请求共享同一 signal 并通过一次 abort() 全部中止；需复用 controller 实例、捕获 AbortError 静默处理，并在取消后重置 controller 以支持后续请求。
使用 AbortController 可以让多个 fetch 请求在点击“取消”时立即中止，避免资源浪费和状态错乱。关键在于共享同一个 signal，并在取消时调用 abort()。
创建并复用 AbortController 实例
多个请求应共用一个 AbortController，而不是为每个请求新建一个。这样点击一次“取消”，所有绑定该 signal 的请求都会被中断。
示例做法：
- 在组件或函数作用域外（如 React 的 state 或 class 成员）声明
controller = new AbortController() - 每次发起请求时，传入
controller.signal到fetch的signal选项中 - 点击取消按钮时只调用一次
controller.abort()
处理 abort 后的 Promise 状态
fetch 在收到 abort 信号后会立即 reject，抛出 DOMException（name === "AbortError"）。你需要捕获它，避免未处理的 Promise rejection 报错。
推荐写法：
- 用
try/catch包裹await fetch(...) - 或在
.catch()中检查error.name === "AbortError"，做静默处理或提示“已取消” - 不要把 abort 错误当作网络失败来重试
取消后重置控制器（可选但推荐）
调用 abort() 后，该 AbortController 的 signal 就永久处于 aborted 状态，不能再用于新请求。如需后续发起新请求，应创建新的控制器。
常见模式：
- 点击“取消”后立即将
controller设为null或重新赋值：controller = new AbortController() - 在发起新请求前，先对旧 controller 调用
abort()（如有），再创建新的 - React 中可结合
useRef存储 controller，并在useEffect清理时 abort
完整简易示例（浏览器环境）
HTML 中有三个按钮触发请求，一个“取消”按钮：
let controller = null;
function startRequests() {
controller = new AbortController();
const { signal } = controller;
fetch("/api/1", { signal }).then(r => r.json()).then(console.log);
fetch("/api/2", { signal }).then(r => r.json()).then(console.log);
fetch("/api/3", { signal }).then(r => r.json()).then(console.log);
}
function cancelRequests() {
if (controller) {
controller.abort();
controller = null;
}
}
注意：实际项目中建议封装成可复用的 hook 或工具函数，自动管理 signal 生命周期和错误分类。
