abortcontroller 可主动中止 fetch 请求，需新建实例并传入 signal，调用 abort() 后 fetch 抛出 aborterror，应在 catch 中判断 err.name === 'aborterror' 并避免取消后更新状态。
使用 AbortController 可以在请求发出后、响应返回前主动中止 Fetch 请求，避免资源浪费和状态错乱。核心在于将控制器的 signal 传入 fetch() 选项，并在需要时调用 abort() 方法。
创建 AbortController 并传入 signal
每次需要可取消的请求，都应新建一个 AbortController 实例，它的 signal 属性是一个 AbortSignal 对象，用于与 fetch 关联：
- 在调用
fetch(url, { signal })时，把controller.signal作为配置项传入 - 一个
signal只能绑定一次 fetch（但可监听多个事件） - 不要复用 controller 处理多个独立请求，否则 abort 会一并终止所有关联请求
触发取消：调用 controller.abort()
在任意时机（如用户离开页面、切换搜索关键词、点击“取消”按钮），调用 controller.abort() 即可中断请求：
- 触发后，
signal.aborted变为true - 正在执行的
fetch()会立即抛出AbortError（类型为DOMException） - 推荐在
catch中判断错误类型，区分网络失败和主动取消
处理取消后的错误和清理逻辑
Fetch 被取消后不会静默失败，而是拒绝 Promise，需显式捕获并做合理响应：
- 用
if (err.name === 'AbortError')判断是否为取消导致的异常 - 避免在取消后更新 UI 状态（如设置 loading = false 或渲染数据），防止竞态问题
- 若使用 React 等框架，确保 abort 发生时组件仍挂载（例如结合
useRef或mounted标志）
完整示例代码
（含防重复触发与组件卸载保护）
function fetchData(url) {
const controller = new AbortController();
fetch(url, { signal: controller.signal })
.then(res => res.json())
.then(data => {
// ✅ 确保未被取消才更新状态
if (!controller.signal.aborted) {
console.log('数据加载成功:', data);
}
})
.catch(err => {
if (err.name === 'AbortError') {
console.log('请求已被取消');
} else {
console.error('请求出错:', err);
}
});
// 返回取消函数，供外部调用
return () => controller.abort();
}
// 使用示例：
const cancel = fetchData('/api/posts');
// ……稍后取消
cancel(); // 立即中止请求
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
