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 参数，用来接收中断指令。
启明星企业抽奖程序 系统采用ASP.NET4.0 无需数据库。在企业抽奖时，请勿关闭或者刷新页面。因为系统目前没有提供保存数据功能。例如在抽二等奖和一等奖之间，可能有时间间隔。那么，此时，你可以按F11取消全屏，然后最小化页面，再单击右下角喇叭，设置无声。1.启明星抽奖程序配置说明使用说明：在lottery/lottery文件夹下，有3个文本文件。company.txt存放公司名称，award.t
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 更加可控，特别是在频繁触发请求或需要清理异步操作的场景下非常实用。
