React 用 AbortController 取消 fetch:治好「组件卸载后 setState」警告与竞态 bug-育师

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,发出两个请求。如果userId=1的请求因为网络慢后返回,它会覆盖掉userId=2的结果,页面显示的是错的人。

常见但不彻底的修法:用 ignore 标志

很多教程教你用一个布尔标志在清理函数里「忽略」结果:

useEffect(() => { let ignore = false; fetch(`/api/users/${userId}`) .then((res) => res.json()) .then((data) => { if (!ignore) setUser(data); // 卸载/切换后就不 setState }); return () => { ignore = true; }; }, [userId]);

这能消除警告和竞态,但请求本身还在跑——它照样占着连接、照样把响应体下载完,只是结果被你丢弃了。对慢接口、大响应、移动端弱网,这是白白浪费带宽和资源。更好的做法是直接掐断请求。

正确写法:AbortController

AbortController是浏览器原生 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 严格模式会帮你验证清理是否写对。