在 javascript 中实现请求取消的桥接模式，核心在于利用 abortcontroller 实例作为信号源，将其 signal 属性传递给网络请求 api（如 fetch），并通过调用 abort() 方法触发中断。这种做法将“发起请求”与“控制生命周期”解耦，使得任何支持该标准的异步操作都能通过统一的信号机制进行取消。
如何创建并传递取消信号给 fetch 请求
要实现这一机制，首先需要实例化一个 AbortController 对象，获取其 signal 属性，并将其作为配置项传入 fetch 函数。当需要取消请求时，只需调用控制器实例的 abort() 方法即可。此时，浏览器会中止网络传输，并抛出一个名为 AbortError 的异常，开发者需在 catch 块中捕获该异常以处理取消逻辑。
const controller = new AbortController();
const signal = controller.signal;
// 发起请求并绑定信号
fetch('https://api.example.com/data', { signal })
.then(response => response.json())
.then(data => console.log('Success:', data))
.catch(error => {
if (error.name === 'AbortError') {
console.log('Request cancelled');
} else {
console.error('Fetch error:', error);
}
});
// 在需要时取消请求
controller.abort();上述代码展示了标准流程：创建控制器、绑定信号、执行请求、捕获异常。关键在于 signal 参数必须正确传递，且错误处理需区分 AbortError 与其他网络错误。
立即学习“Java免费学习笔记（深入）”；
如何处理多个并发请求的取消逻辑
当存在多个并发请求时，可以为每个请求分配独立的 AbortController，或创建一个共享控制器用于批量取消。若使用独立控制器，可分别管理每个请求的生命周期；若使用共享控制器，则调用一次 abort() 即可中断所有关联请求。推荐在组件卸载或用户交互导致数据失效时，使用共享控制器统一清理资源，避免内存泄漏。
const sharedController = new AbortController();
const signals = [sharedController.signal, sharedController.signal];
Promise.all([
fetch('/api/1', { signal: signals[0] }).then(r => r.json()),
fetch('/api/2', { signal: signals[1] }).then(r => r.json())
])
.then(results => console.log('All results:', results))
.catch(error => {
if (error.name === 'AbortError') {
console.log('One or more requests were cancelled');
}
});
// 取消所有关联请求
sharedController.abort();此示例中，两个请求共享同一个 signal，因此 abort() 会同时影响两者。这种设计简化了多请求场景下的取消逻辑，确保一致性。
基于 AbortController 实例的 abort() 调用时机对请求状态的影响
当 abort() 被调用时，若请求尚未完成，其状态将立即变为“已取消”，后续 then 回调不会执行，而是直接进入 catch 块。若请求已完成，abort() 调用无效，但也不会引发错误。因此，最佳实践是在确认请求仍在进行中再调用 abort()，可通过监听 signal.aborted 属性或结合 setTimeout 设置超时取消。
const controller = new AbortController();
const timeoutId = setTimeout(() => controller.abort(), 5000);
fetch('https://api.example.com/slow-data', { signal: controller.signal })
.then(response => {
clearTimeout(timeoutId); // 请求成功，清除超时
return response.json();
})
.then(data => console.log('Data:', data))
.catch(error => {
if (error.name === 'AbortError') {
console.log('Request timed out or manually cancelled');
}
});该代码演示了超时取消机制：setTimeout 在 5 秒后调用 abort()，若请求在此之前完成，则清除定时器以避免无效取消。这种模式有效防止长时间挂起的请求占用资源。
