javascript 中实现请求取消的生命周期管理，核心在于利用 abortcontroller 实例与 fetch api 的 signal 选项配合。通过创建控制器并传入信号，可以在请求发起后、完成前随时调用 abort() 方法中断网络传输，同时触发 onabort 回调以清理资源或更新 ui 状态。
如何初始化控制器并绑定到 fetch 请求
要开始生命周期管理，第一步是实例化 AbortController 并将其 signal 属性传递给 fetch 调用。这样浏览器会在底层监听该信号，一旦信号被中止，正在进行的 HTTP 请求将立即终止，而不是等待超时。
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('Request cancelled');
} else {
console.error('Fetch failed:', error);
}
});
// 后续任意时刻调用 abort() 取消请求
// controller.abort();
如何处理取消后的错误捕获与状态重置
当请求被取消时，fetch 会抛出一个名为 AbortError 的异常。开发者需要在 catch 块中专门识别这个错误类型，以避免将其误报为网络故障。同时，应在此处执行状态重置逻辑，例如关闭加载指示器或恢复按钮的可点击状态，确保应用界面回到可用状态。
立即学习“Java免费学习笔记（深入）”；
async function fetchDataWithCleanup() {
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') {
resetLoadingState(); // 重置 UI 状态
} else {
handleError(error); // 处理其他网络错误
}
} finally {
// 无论成功、失败还是取消，都执行清理工作
cleanupResources();
}
}
// 模拟用户操作触发取消
setTimeout(() => {
controller.abort();
}, 5000);
基于 AbortController 实例的 isAborted 属性判断当前状态
在复杂的业务逻辑中，有时需要判断请求是否已经被取消，以便决定后续的操作流程。AbortController` 实例提供了一个只读的 <code>isAborted 属性，可以实时反映控制器的中止状态。通过检查该属性，可以避免重复发送取消指令或在已取消的请求基础上进行无效的数据处理。
