javascript 中实现请求取消的事件驱动机制,核心是使用 abortcontroller 对象。通过调用其 abort() 方法触发中断信号,监听该信号的请求会抛出 aborterror 异常,开发者需在 try...catch 块中捕获此异常以处理取消逻辑。

fetch 如何响应 signal 参数
在发起网络请求时,将 AbortController.signal 作为配置项传入,即可建立事件监听通道。当控制器被中止时,正在进行的请求会立即停止并抛出错误。

const controller = new AbortController();
const { signal } = controller;
fetch('https://example.com/api', { signal })
.then(response => response.json())
.then(data => console.log(data))
.catch(error => {
if (error.name === 'AbortError') {
console.log('Request cancelled');
} else {
console.error('Fetch failed:', error);
}
});
// 模拟取消操作
setTimeout(() => controller.abort(), 1000);
自定义事件发射器如何实现取消通知
对于非网络请求的异步任务,可以基于 EventTarget 或简单的回调函数构建类似的取消机制。通过暴露一个 cancel 方法,在内部标记状态并触发特定事件,从而通知外部监听者。
立即学习“Java免费学习笔记(深入)”;

class TaskRunner extends EventTarget {
constructor() {
super();
this.isCancelled = false;
}
async run(task) {
try {
await task();
} catch (error) {
if (!this.isCancelled) throw error;
}
}
cancel() {
this.isCancelled = true;
this.dispatchEvent(new Event('cancel'));
}
}
const runner = new TaskRunner();
runner.addEventListener('cancel', () => console.log('Task cancelled'));
runner.cancel();
捕获 AbortError 时的具体判断条件
在 catch 块中处理取消逻辑时,必须检查错误的 name 属性是否为 'AbortError'。这是区分正常网络错误与主动取消的关键依据,避免将用户主动取消的请求误报为系统故障。



















