React 用 AbortController 取消 fetch:治好「组件卸载后 setState」警告与竞态 bug写 React 数据请求时,你大概率见过控制台这条警告(React 18 前尤其常见),或者遇到过更隐蔽的「搜索结果对不上」:组件卸载后仍在 setState,内存泄漏警告;快速切换 Tab / 快速输入搜索词,先发的请求后回来,把最新结果覆盖成了旧数据。这两个问题的根子是一样的:请求还在飞,组件已经不需要它的结果了。正确的解法不是「用一个 flag 挡住 setState」,而是用AbortController把请求真正取消掉。这篇讲清怎么用、怎么和useEffect配合、以及几个容易踩的坑。先看有问题的朴素写法import { useEffect, useState } from react; function UserProfile({ userId }) { const [user, setUser] useState(null); useEffect(() { fetch(/api/users/${userId}) .then((res) res.json()) .then((data) setUser(data)); // 组件卸载 or userId 变了,这里可能仍在跑 }, [userId]); return div{user?.name ?? 加载中...}/div; }两个问题:卸载后 setState:用户在请求返回前离开了页面,组件已卸载,setUser在一个不存在的组件上执行 → 警告 潜在泄漏。竞态(race condition):userId从 1 快速切到 2,发出两个请求。如果userId1的请求因为网络慢后返回,它会覆盖掉userId2的结果,页面显示的是错的人。常见但不彻底的修法:用 ignore 标志很多教程教你用一个布尔标志在清理函数里「忽略」结果:useEffect(() { let ignore false; fetch(/api/users/${userId}) .then((res) res.json()) .then((data) { if (!ignore) setUser(data); // 卸载/切换后就不 setState }); return () { ignore true; }; }, [userId]);这能消除警告和竞态,但请求本身还在跑——它照样占着连接、照样把响应体下载完,只是结果被你丢弃了。对慢接口、大响应、移动端弱网,这是白白浪费带宽和资源。更好的做法是直接掐断请求。正确写法:AbortControllerAbortController是浏览器原生 API(Node 18 也支持),它产生一个signal,传给fetch;调用controller.abort()就能中止这个请求。把abort()放进useEffect的清理函数里,时机刚刚好:import { useEffect, useState } from react; function UserProfile({ userId }) { const [user, setUser] useState(null); const [error, setError] useState(null); useEffect(() { const controller new AbortController(); fetch(/api/users/${userId}, { signal: controller.signal }) .then((res) res.json()) .then((data) setUser(data)) .catch((err) { // 主动取消会抛 AbortError,这是预期行为,不当成真错误 if (err.name AbortError) return; setError(err); }); // 清理:userId 变化 or 组件卸载时,掐断上一个请求 return () controller.abort(); }, [userId]); if (error) return div出错了:{error.message}/div; return div{user?.name ?? 加载中...}/div; }关键点:useEffect的清理函数在「依赖变化前」和「卸载时」都会执行,正好是「上一个请求该取消」的时刻。userId快速切换时,旧请求被abort(),不会再有旧结果覆盖新结果——竞态从根上消失。请求被取消时fetch的 promise 会 reject 一个AbortError,必须在 catch 里把它过滤掉,否则会被误报成请求失败。坑一:AbortError 一定要单独处理如果不判断err.name AbortError,每次正常的取消都会走进你的错误分支,页面闪一下「请求失败」。记住:主动取消不是错误,直接 return 忽略它。如果用async/await写:useEffect(() { const controller new AbortController(); (async () { try { const res await fetch(/api/users/${userId}, { signal: controller.signal, }); const data await res.json(); setUser(data); } catch (err) { if (err.name AbortError) return; // 取消,忽略 setError(err); } })(); return () controller.abort(); }, [userId]);注意useEffect的回调本身不能是async(它得返回清理函数,不能返回 Promise),所以用一个立即执行的内部 async 函数包起来。坑二:signal 也能给 axios 和超时AbortController不只服务于原生fetch。axios 0.22 也支持传signal:axios.get(/api/users/${userId}, { signal: controller.signal });还能用它做超时取消——超过 N 秒自动中止:const controller new AbortController(); const timer setTimeout(() controller.abort(), 5000); // 5s 超时 fetch(url, { signal: controller.signal }) .finally(() clearTimeout(timer));现代浏览器还有语法糖AbortSignal.timeout(5000),一行搞定超时信号(但它不能手动 abort,只能定时);需要同时支持「超时」和「手动取消」时,仍用setTimeout controller这套组合。坑三:封装成自定义 Hook 复用请求取消是每个数据组件都要做的事,抽成 Hook 更省心:import { useEffect, useState } from react; function useFetch(url) { const [data, setData] useState(null); const [loading, setLoading] useState(true); const [error, setError] useState(null); useEffect(() { const controller new AbortController(); setLoading(true); fetch(url, { signal: controller.signal }) .then((res) { if (!res.ok) throw new Error(HTTP ${res.status}); return res.json(); }) .then((d) { setData(d); setLoading(false); }) .catch((err) { if (err.name AbortError) return; // 取消不改状态 setError(err); setLoading(false); }); return () controller.abort(); }, [url]); return { data, loading, error }; }用起来干净利落,竞态和卸载问题都在 Hook 内部处理掉了:function UserProfile({ userId }) { const { data, loading, error } useFetch(/api/users/${userId}); if (loading) return div加载中.../div; if (error) return div出错:{error.message}/div; return div{data.name}/div; }关于 React 18 严格模式React 18 的StrictMode在开发环境会故意把 effect 执行两遍(mount → 卸载 → 再 mount),用来暴露没写清理函数的副作用。这恰恰会让「没取消请求」的代码露馅:你会看到同一个请求发两次。用了AbortController清理后,第一次会被立刻 abort,行为正确且符合 React 的设计预期——这也是官方推荐的写法。小结「组件卸载后 setState」警告和「搜索结果错位」的竞态,根源都是请求还在飞但结果已不需要。ignore标志只能丢弃结果,请求照跑;AbortController能真正取消请求,省带宽、更彻底。标准姿势:useEffect里new AbortController()→fetch(url, { signal })→ 清理函数里controller.abort()。一定要在catch里过滤AbortError,主动取消不是错误。同样适用于 axios、超时控制;抽成useFetchHook 一劳永逸;React 18 严格模式会帮你验证清理是否写对。一句话记忆:effect 里建 controller、fetch 带 signal、清理里 abort、catch 里放过 AbortError——四步治好卸载警告和请求竞态。
)
