AbortController 优雅取消 Fetch 请求方法

AbortController 是浏览器原生、标准化且语义清晰的异步请求取消机制，尤其适用于优雅终止 fetch 请求——通过创建独立的 AbortController 实例并将 signal 传入 fetch 选项，调用 abort() 即可立即中止请求并触发可捕获的 AbortError；它天然适配 React useEffect 清理逻辑，支持超时控制（配合 setTimeout 封装）、多信号合并（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 检查

今天关于《AbortController 优雅取消 Fetch 请求方法》的内容就介绍到这里了，是不是学起来一目了然！想要了解更多关于的内容请关注golang学习网公众号！