JS 中怎么在用户离开页面时自动取消所有未完成的网络请求-js教程-PHP中文网

用户离开页面时应统一abort所有活跃abortcontroller实例以避免内存泄漏：用visibilitychange提前中断非关键请求，beforeunload兜底清理；集中用set管理控制器，fetch后及时删除，不适用于sendbeacon/keepalive。

js 中怎么在用户离开页面时自动取消所有未完成的网络请求

用户离开页面（刷新、关闭标签页、跳转路由）时，未完成的网络请求若不主动清理，可能触发状态更新到已卸载组件、造成内存泄漏，或浪费带宽。核心做法是：**在页面卸载前统一 abort 所有活跃的 AbortController 实例**，而不是依赖单个请求的生命周期管理。

绑定到页面卸载事件：用 beforeunload 或 visibilitychange 预警

浏览器原生提供两个关键时机用于捕获“即将离开”：

beforeunload：在页面真正卸载前触发，适合做最后清理。但注意它不能执行异步操作（如 await fetch），只能同步调用 abort()；
visibilitychange（配合 document.hidden）：当用户切走标签页或最小化窗口时触发，比 beforeunload 更早，适合提前中止非关键请求（如轮询、日志上报）。

推荐组合使用：visibilitychange 做轻量级中断，beforeunload 作兜底保障。

集中管理控制器：避免每个请求独立声明

不要在组件内部零散创建 controller，而应建立一个可追踪的请求池：

Wjs Uploading Video

将一个或多个视频上传至YouTube。当用户想“上传到YouTube”“发YouTube”“批量上传”“upload to YouTube”“post videos to YouTube”或发布到YouTube时使用此技能。

下载

用 Set 或 Map 存储当前所有活跃的 AbortController 实例；
每次发起 fetch 前 new AbortController()，并 add 到集合；
fetch 成功/失败后，从集合中 delete 对应 controller（防止重复 abort）；
在 beforeunload 中遍历集合，对每个 controller 调用 abort()。

示例代码片段：

const activeControllers = new Set();
window.addEventListener('beforeunload', () => {
  activeControllers.forEach(c => c.abort());
  activeControllers.clear();
});
// 发起请求时：
const controller = new AbortController();
activeControllers.add(controller);
fetch('/api/data', { signal: controller.signal })
  .finally(() => activeControllers.delete(controller));

注意 Axios 和旧版兼容性

Axios 1.2.0+ 已原生支持 AbortSignal，可直接传 signal；旧版本若仍在用 CancelToken，需确保 cancel() 调用发生在 beforeunload 里，而非仅靠按钮点击。对于 XMLHttpRequest，仍可用 xhr.abort()，但建议逐步迁移到 fetch + AbortController 统一管理。