用AbortController取消fetch请求,同时避免内存泄漏和状态更新
在单页应用里,输入框搜索、路由切换、标签页关闭这些场景下,经常出现“上一个请求还没回来,新的请求又发出去了”的情况。如果不取消旧请求,轻则渲染过期数据,重则因为响应回来时组件已卸载,触发 React 的 setState 警告或 Vue 的响应式更新异常。原生的 XMLHttpRequest 有 abort() 方法,但 fetch 在早期并没有提供取消能力,后来浏览器引入了 AbortController。它的用法不复杂,但实际项目里容易踩的坑不少:AbortError 被全局错误处理当成真异常、在 finally 里清理不干净、多个请求共用一个 signal 导致误伤,还有并发请求下如何区...