abortcontroller 是解决页面跳转时请求未取消问题的标准方案：1. 每次请求新建 controller 并传 signal 给 fetch；2. 在路由切换或组件卸载前调用 abort；3. 注意区分 aborterror、避免 signal 复用、不支持 xmlhttprequest 等细节。
页面跳转时自动取消未完成的请求，是避免内存泄漏和无效状态更新的关键。AbortController 正是为此设计的标准 API，它不依赖框架，原生支持 fetch 和部分现代浏览器 API（如 setTimeout 的 AbortSignal 扩展）。
1. 创建并传递 AbortSignal 到 fetch 请求
每次发起请求前新建 AbortController，把它的 signal 传给 fetch。这样只要调用 controller.abort()，对应请求就会中止：
let controller = null;
function loadData() {
// 清掉上一次（如有）
if (controller) controller.abort();
controller = new AbortController();
const signal = controller.signal;
fetch('/api/data', { signal })
.then(res => res.json())
.then(data => console.log(data))
.catch(err => {
if (err.name === 'AbortError') {
console.log('请求已被取消（例如页面跳转）');
} else {
console.error('真实错误：', err);
}
});
}
2. 在路由切换或卸载前主动 abort
在单页应用中，监听路由变化；在多页或通用场景中，监听 beforeunload 或组件卸载时机：
-
React（useEffect 清理函数）：返回的清理函数里调用
controller.abort() - Vue（onBeforeUnmount）：同理，在卸载前 abort
-
原生 JS 跳转前：
window.addEventListener('beforeunload', () => controller?.abort()) -
手动跳转时：比如点击链接前先 abort，再
location.href = '/next'
3. 注意事项与常见陷阱
AbortController 只中断网络请求本身，并不阻止后续的 .then 或 .catch 执行 —— 所以务必检查 err.name === 'AbortError' 来区分取消和真实失败。
- 每个请求应使用独立的
AbortController，复用 signal 会导致多个请求被一并取消 - 已 resolve/reject 的 Promise 不会因 abort 改变状态，但未响应的请求会立即终止，不再触发 then/catch 中的网络逻辑
- 目前
XMLHttpRequest不支持 AbortSignal，需改用 fetch 或自行封装取消逻辑 - 某些库（如 axios）支持传入
signal，但低版本需通过cancelToken兼容
4. 封装成可复用的请求函数（推荐）
把 AbortController 管理逻辑抽离，让业务代码更干净：
function abortableFetch(input, init = {}) {
const controller = new AbortController();
const signal = controller.signal;
// 自动绑定 abort 到页面卸载
const onUnload = () => controller.abort();
window.addEventListener('beforeunload', onUnload, { once: true });
return {
promise: fetch(input, { ...init, signal }).finally(() => {
window.removeEventListener('beforeunload', onUnload);
}),
abort: () => controller.abort()
};
}
// 使用
const req = abortableFetch('/api/user');
req.promise.then(...).catch(...);
// 手动取消（比如用户离开当前模块）
req.abort();
核心就三点：创建 controller、传 signal、在合适时机 abort。不复杂但容易忽略细节，尤其是错误判断和生命周期对齐。
Java免费学习笔记：立即使用
解锁 Java 大师之旅：从入门到精通的终极指南
