应主动终止跳转前 pending 的 ajax 请求：fetch 用 AbortController.abort()，XMLHttpRequest 调用 xhr.abort()；跳转后勿发请求，改由目标页自行加载；beforeunload 中禁用异步操作，改用 sendBeacon 上报；SPA 中需在组件卸载时清理请求。
跳转前主动终止 pending 的 AJAX 请求
页面跳转时若还有未完成的 fetch 或 XMLHttpRequest，浏览器通常会静默取消，但某些场景（如上传中、长轮询）可能触发异常回调或资源残留。不能依赖自动清理。
- 对
fetch，使用AbortController：在beforeunload或跳转逻辑前调用abort() - 对
XMLHttpRequest，手动调用xhr.abort()；注意需保留对实例的引用，不能在闭包里丢弃 - 避免在
setTimeout或事件回调里发起无管理的请求——跳转时它们可能仍在排队
location.href / history.pushState 后不立即发请求
跳转后 js 可能继续执行（尤其 location.href = url 非同步阻塞），若紧跟着发 AJAX，实际请求会发向旧页面 URL，或被新页面加载中断。
- 不要写成：
location.href = '/new'; fetchData();——fetchData仍会在跳转前执行 - 正确做法是：跳转动作本身作为流程终点；如需新页初始化数据，应由目标页自己负责（服务端渲染或新页 JS 加载时 fetch）
- 若必须“跳转并带参数”，改用
history.pushState()+ 手动更新 ui，而非真实跳转，再发请求
监听 beforeunload 时别做异步操作
beforeunload 回调里禁止调用 fetch、setTimeout 等异步行为，浏览器会忽略，且可能报 Uncaught DOMException: Failed to execute 'fetch' on 'window': Cannot construct a Request because the window is being unloaded。
- 只允许同步逻辑：比如设置提示文案、清空本地缓存键值对
- 需要上报日志？改用
navigator.sendBeacon()，它专为卸载前发送小量数据设计 - 不要试图在
beforeunload里等一个 promise resolve —— 它永远等不到
SPA 路由切换时的请求生命周期管理
单页应用中，router.push() 或 hash 变更不会刷新页面，但组件卸载/重挂载容易导致请求“悬空”或重复发起。
立即学习“前端免费学习笔记（深入）”；
- react 中，在
useEffect清理函数里 abort 当前请求（配合AbortController） - vue 中，利用
onBeforeUnmount或watch监听路由变化，主动 cancel 未完成的axios请求（需配置cancelToken或使用AbortSignal） - 所有请求都应绑定当前视图的生命周期，而不是全局或事件驱动式发射
真正难处理的是跨组件共享请求状态又没统一取消机制的情况——比如一个表单提交请求被多个按钮触发，而用户点完就切走了，这时候没 abort 就真会发出去，且响应回来时 this 可能已销毁。