abortcontroller 和 signal 是浏览器原生取消异步操作的标准方案，通过新建 controller 并传入 signal 实现 fetch 取消，调用 abort() 触发 domexception("aborterror")，需在 react useeffect 清理函数中调用，超时需手动 settimeout 配合 abort，多信号合并用 abortsignal.any。

AbortController 和 signal 是浏览器原生提供的取消异步操作（尤其是 fetch）的标准方式，比手动维护标志位或依赖第三方库更可靠、更语义化。

创建并传入 signal

每次需要可取消的请求时，先新建 AbortController 实例，再把它的 signal 属性传给 fetch 的 signal 选项：

• 不能复用同一个 controller 发起多个请求（每个请求应有独立的 signal）
• fetch 内部会监听 signal 的 abort 事件，一旦触发就自动 reject 并清理底层连接
• 示例：const controller = new AbortController(); fetch('/api/data', { signal: controller.signal })

主动取消请求

调用 controller.abort() 即可中止请求。此时 fetch Promise 会以 DOMException("AbortError") 拒绝，你可以捕获它做清理或提示：

• 常见场景：用户切换页面、输入框防抖中旧请求未完成、点击“取消上传”按钮
• 建议在 abort 前检查 controller.signal.aborted 避免重复调用（虽无害但可读性更好）
• 注意：abort 后 signal 无法重用，如需新请求必须新建 controller

与 React 组件生命周期结合

在 useEffect 中发起请求时，应在清理函数中调用 abort，防止组件卸载后更新已销毁的状态：

• React 18 严格模式下 effect 可能执行两次，AbortController 天然支持多次 abort，无需额外判断
• 不要在 abort 后继续使用该 controller，也不要在 cleanup 里忘记调用 abort
• 示例逻辑：useEffect(() => { const controller = new AbortController(); fetch(...).catch(err => { if (err.name === 'AbortError') return; /* 处理其他错误 */ }); return () => controller.abort(); }, [])

处理超时与组合信号

signal 本身不提供超时能力，但可以配合 setTimeout 手动 abort：

• 封装 timeoutSignal 辅助函数：创建 controller，在指定毫秒后调用 abort()
• 多个 signal 可用 AbortSignal.any([...signals])（Chrome 117+、Firefox 119+ 支持），任一 abort 就触发整体取消
• 注意兼容性：如需支持老版本浏览器，可用 polyfill 或回退到手动标记 + if 检查