JavaScript中组件销毁时应使用AbortController取消fetch请求，防止内存泄漏和状态更新到已卸载组件；在useEffect清理函数中调用controller.abort()，并在catch中处理AbortError。
在 JavaScript（尤其是 React 等现代前端框架）中，组件销毁时取消未完成的 fetch 请求，核心是使用 AbortController 配合组件的生命周期或副作用清理机制。不取消会导致内存泄漏、状态更新到已卸载组件（报错如 “Can't perform a React state update on an unmounted component”），或浪费网络资源。
用 AbortController 主动中止 fetch 请求
AbortController 是浏览器原生 API，提供 abort() 方法来中止 fetch。关键在于：在组件卸载前调用它。
- 创建控制器实例（通常在 useEffect 内部或组件作用域中）
- 将
controller.signal传给fetch的signal选项 - 在清理函数（如 useEffect 返回的函数）中调用
controller.abort()
React 函数组件中的标准写法（useEffect + cleanup）
这是最常见且推荐的方式：
deep-java-review
下载
Java项目代码review工具。分析Git变更+完整调用链路上下文，推断业务需求，进行多维度评分和分类汇总，生成完整PRD文档。包含细粒度Java代码审查清单（Null安全、异常处理、Streams、并发、equals/hashCode、资源管理、API设计、性能、MyBatis/ORM、事务边界、SQL/DD...
import { useState, useEffect } from 'react';
function UserProfile({ userId }) {
const [user, setUser] = useState(null);
const [loading, setLoading] = useState(true);
useEffect(() => {
const controller = new AbortController();
const loadData = async () => {
try {
setLoading(true);
const res = await fetch(`/api/users/${userId}`, {
signal: controller.signal // ? 绑定中止信号
});
if (!res.ok) throw new Error('Failed to fetch');
const data = await res.json();
setUser(data); // ✅ 只有组件仍挂载时才更新
} catch (err) {
if (err.name === 'AbortError') {
console.log('Fetch aborted due to component unmount');
} else {
console.error('Fetch error:', err);
}
} finally {
setLoading(false);
}
};
loadData();
// ? 清理函数：组件卸载时中止请求
return () => controller.abort();
}, [userId]);
return <div>{loading ? 'Loading...' : user?.name}</div>;
}
注意：避免在 abort 后再 setState（但 AbortController 本身已解决该问题）
很多人担心“中止后还 setState”，其实 AbortError 会在 await fetch 或 await res.json() 时抛出，你可以在 catch 中判断并忽略它。只要不在 catch 外层或异步链后续无条件调用 setUser，就不会更新到卸载组件。
立即学习“Java免费学习笔记（深入）”；
- ✅ 安全：
if (!controller.signal.aborted) setUser(...)（可选，但非必需） - ⚠️ 不推荐：手动加
isMounted标志 —— 多余且易出错，AbortController 已足够 - ❌ 危险：不处理
AbortError，又在finally或后续.then中直接setState
其他场景补充
如果你用的是 axios，它也支持 CancelToken（旧版）或 AbortController（v0.27+），用法类似；如果是类组件，可在 componentWillUnmount 中调用 controller.abort()；在 Vue 中则用 onBeforeUnmount 做同样清理。
