使用 abortcontroller 实例的 signal 属性传递给 fetch 请求，并在需要时调用 abort() 方法来取消请求。通过监听 signal 的 abort 事件或捕获 fetch 抛出的 aborterror 异常，可以执行清理逻辑或更新 ui 状态。
如何发起一个可被外部中断的请求
在发起请求前创建 AbortController 对象，将其 signal 放入 fetch 的配置选项中。这样网络层会在信号触发时立即终止连接，并抛出错误供上层处理。
const controller = new AbortController();
const signal = controller.signal;
// 模拟异步操作后取消
setTimeout(() => {
controller.abort();
}, 3000);
fetch('https://api.example.com/data', { signal })
.then(response => response.json())
.catch(error => {
if (error.name === 'AbortError') {
console.log('请求已取消');
} else {
console.error('其他错误:', error);
}
});
如何处理取消后的资源清理与状态同步
当请求被取消时，除了捕获异常，还需要确保相关的加载状态重置，防止界面卡在“加载中”。可以在 finally 块中统一处理状态恢复，保证无论成功、失败还是取消，UI 都能回到初始态。
立即学习“Java免费学习笔记（深入）”；
let isLoading = true;
const controller = new AbortController();
try {
const response = await fetch('/api/data', { signal: controller.signal });
const data = await response.json();
updateUI(data);
} catch (error) {
if (error.name !== 'AbortError') {
showError(error.message);
}
} finally {
isLoading = false;
// 检查是否因取消而退出，避免覆盖用户手动触发的新请求
if (!controller.signal.aborted) {
renderCompleteState();
}
}
基于多个并发请求共享同一个 AbortController 的具体问题
如果多个请求共用同一个 AbortController，调用一次 abort() 会同时取消所有关联请求。这在实现“搜索防抖”或“列表项切换”时非常有用，但需注意若只需取消特定请求，应使用独立的控制器实例以避免副作用。
