使用 abortcontroller 中断 fetch 请求的核心做法是：创建一个控制器实例，将其 signal 属性传递给 fetch 的第二个参数配置对象中；当需要取消时调用控制器的 abort() 方法，此时正在进行的请求会立即终止并抛出一个 aborterror。
如何初始化控制器并绑定到 fetch 请求
在发起网络请求前，必须先实例化 AbortController。这个实例包含一个 signal 对象，该对象充当请求与控制器之间的通信桥梁。将 signal 放入 fetch 调用的配置项中，浏览器就能监听该信号的状态变化。一旦信号被标记为已中止，底层网络请求就会停止传输数据。
const controller = new AbortController();
const signal = controller.signal;
fetch('https://api.example.com/data', {
signal: signal
})
.then(response => response.json())
.then(data => console.log(data))
.catch(error => {
if (error.name === 'AbortError') {
console.log('Fetch aborted');
} else {
console.error('Fetch failed:', error);
}
});上述代码展示了标准的请求结构。关键在于 signal: signal 这一行配置。如果不调用 controller.abort()，请求会正常完成或因为网络错误而失败。只有显式调用中止方法，才会触发特定的错误分支。这种机制允许开发者在用户离开页面、重复提交或超时等场景下主动切断连接，释放资源。
立即学习“Java免费学习笔记（深入）”；
什么情况下应该调用 abort 方法
通常在用户交互触发取消意图或检测到超时风险时调用 abort()。例如，用户在搜索结果输入框中快速打字，每次按键都发起新请求，此时应取消上一个未完成的请求以避免竞态条件。或者设置一个定时器，如果请求在规定时间内未完成，则强制中断。调用该方法后，signal.aborted 属性变为 true，且任何基于该信号的后续操作都会受到阻断。
// 模拟超时取消逻辑
const controller = new AbortController();
const timeoutId = setTimeout(() => {
controller.abort();
}, 5000); // 5秒后自动取消
fetch('https://api.example.com/slow-endpoint', {
signal: controller.signal
})
.then(res => res.json())
.then(data => {
clearTimeout(timeoutId); // 成功获取数据，清除定时器
console.log(data);
})
.catch(err => {
if (err.name === 'AbortError') {
console.log('Request timed out or cancelled');
}
});这段代码演示了结合定时器的取消策略。在 fetch 成功后清除定时器是为了防止内存泄漏和无效的中止操作。如果在 5 秒内请求未完成，定时器触发 abort()，请求中断。这种模式在处理不可靠网络环境下的长耗时请求时非常有效。注意，abort() 可以多次调用，但只会生效一次，后续调用不会产生额外副作用。
捕获 AbortError 的具体处理方式
当请求被中止时，catch 块接收到的错误对象具有 name 属性为 'AbortError'。这是区分正常网络错误（如 404、500）和用户主动取消的关键标识。开发者应当检查这个属性，以便在 UI 上给出不同的反馈，例如静默忽略取消操作，而不是显示“连接失败”的错误提示。不处理此特定错误可能导致控制台报错或误导用户的状态提示。
