使用AbortController取消Fetch请求

AbortController 是浏览器 API，用于取消 fetch 请求。创建实例后，将其 signal 传入 fetch，调用 abort() 即可终止请求，常用于组件卸载时避免状态更新错误，需注意每次请求应独立创建 AbortController 并捕获 AbortError 错误类型。

在使用 fetch 发起网络请求时，有时需要在请求完成前主动取消它，比如用户跳转页面或执行新的搜索。JavaScript 提供了 AbortController 接口来实现这一功能。通过它，你可以优雅地终止一个或多个 fetch 请求。

什么是 AbortController？

AbortController 是浏览器提供的 API，用于中止一个或多个 DOM 请求，包括 fetch。它通过生成一个信号（signal），传递给 fetch，之后可通过调用 abort() 方法来取消请求。

如何使用 AbortController 取消 Fetch 请求

下面是使用 AbortController 控制 fetch 请求的基本步骤：

1. 创建 AbortController 实例

每当你想控制一个请求的生命周期，就创建一个新的 AbortController 对象。

2. 将 signal 传入 fetch 选项

fetch 支持一个可选的 signal 参数，用来接收中断指令。

PatentPal专利申请写作

AI软件来为专利申请自动生成内容

13

查看详情

3. 调用 abort() 方法取消请求

在适当的时候调用 controller.abort()，触发请求中止。

const controller = new AbortController();
fetch('/api/data', {
method: 'GET',
signal: controller.signal
})
.then(response => response.json())
.catch(err => {
if (err.name === 'AbortError') {
console.log('请求已被取消');
} else {
console.error('请求出错:', err);
}
});
// 取消请求（例如用户点击“取消”按钮）
controller.abort();

实际应用场景示例

在 React 或其他前端框架中，常用于组件卸载时防止状态更新错误：

useEffect(() => {
const controller = new AbortController();
fetch('/api/user', { signal: controller.signal })
.then(res => res.json())
.then(data => {
// 更新状态
})
.catch(err => {
if (err.name !== 'AbortError') {
console.error('请求失败:', err);
}
});
return () => {
// 组件卸载时取消请求
controller.abort();
};
}, []);

这样可以避免在组件已经销毁后还尝试更新状态，从而防止内存泄漏或报错。

注意事项

• 每次请求应使用独立的 AbortController，复用会导致多个请求同时被取消。
• 捕获错误时检查 AbortError，以区分正常错误和主动取消。
• 并非所有环境都支持 AbortController（如旧版 IE），必要时需添加 polyfill。

基本上就这些。AbortController 让 fetch 更加可控，特别是在频繁触发请求或需要清理异步操作的场景下非常实用。