使用 abortcontroller 和 signal 实现请求取消的流水线处理。通过创建控制器实例，将 signal 传递给每个请求，并在需要时调用 abort() 方法触发中断。
如何初始化 AbortController 并绑定信号
在发起请求前，必须实例化一个 AbortController 对象，并将其 signal 属性作为配置项传入 fetch 或 axios 等请求库中。这样做的结果是，当后续调用控制器的 abort() 方法时，所有绑定了该信号的请求都会立即停止并抛出错误。
const controller = new AbortController();
const signal = controller.signal;
fetch('https://api.example.com/data', { signal })
.then(res => res.json())
.catch(err => {
if (err.name === 'AbortError') {
console.log('Request cancelled');
}
});
// 稍后取消请求
controller.abort();
上述代码展示了标准的初始化流程。首先创建控制器，然后将其 signal 注入到 fetch 请求的配置对象中。最后通过调用 controller.abort() 来执行取消操作。如果请求被成功取消，catch 块会捕获到一个名为 AbortError 的错误对象，开发者可以据此判断请求是被正常终止还是发生了网络异常。
立即学习“Java免费学习笔记（深入）”；
如何在异步函数中优雅地处理取消逻辑
在复杂的异步流程中，直接调用 abort() 可能会导致未处理的 Promise 拒绝。最佳实践是在每个异步步骤中检查 signal.aborted 状态，或者使用 try-catch 包裹整个流程以统一处理取消事件。
async function fetchDataWithCancellation() {
const controller = new AbortController();
try {
const response = await fetch('/api/step1', { signal: controller.signal });
const data = await response.json();
// 检查是否在被取消
if (controller.signal.aborted) return;
const result = await process(data, { signal: controller.signal });
return result;
} catch (error) {
if (error.name !== 'AbortError') {
throw error; // 非取消错误重新抛出
}
console.log('Pipeline cancelled');
}
}
function process(data, options) {
return new Promise((resolve, reject) => {
setTimeout(() => {
if (options.signal.aborted) {
reject(new DOMException('Aborted', 'AbortError'));
} else {
resolve(data);
}
}, 1000);
});
}
这个示例展示了一个更健壮的流水线处理模式。在 fetchDataWithCancellation 函数中，我们捕获了可能发生的 AbortError。对于自定义的异步操作如 process 函数，我们需要手动检查 signal.aborted 属性，并在检测到取消时主动拒绝 Promise 并抛出 AbortError。这种模式确保了即使在没有原生支持信号的检查点，也能正确响应取消指令。
当用户快速切换页面时如何防止内存泄漏
在单页应用中，组件卸载时应立即调用 abort() 以清理正在进行的请求。这不仅能避免无效的网络消耗，还能防止因更新已卸载组件状态而导致的 React 警告或内存泄漏。
useEffect(() => {
const controller = new AbortController();
fetch('/api/user', { signal: controller.signal })
.then(res => res.json())
.then(data => setUser(data))
.catch(err => {
if (err.name !== 'AbortError') {
setError(err.message);
}
});
return () => {
controller.abort(); // 清理函数
};
}, []);
在 React 的 useEffect 钩子中，返回的清理函数会在组件卸载或依赖项变化时执行。在这个例子中，清理函数调用了 controller.abort()。这意味着如果用户在数据加载完成前离开了当前页面，请求会被立即终止，从而避免了后续对已不存在状态的更新尝试。这是前端开发中管理副作用的标准做法。
