JavaScript 中无法直接取消 fetch 请求，但可通过 AbortController 的 abort() 方法配合 pagehide 或 beforeunload 事件中止请求；需为每个请求单独创建 controller，框架中应优先在组件卸载时清理。
JavaScript 中无法直接“取消”已发出的 fetch 请求本身，但可以通过 AbortController 主动中止请求，配合页面卸载事件（如 beforeunload 或 pagehide）实现用户离开时清理进行中的请求。
使用 AbortController 配合 beforeunload 事件
AbortController 是标准方案，它提供一个 signal 对象，可传给 fetch。调用其 abort() 方法后，对应 fetch 会立即以 AbortError 拒绝 Promise。
- 在发起 fetch 前创建
AbortController实例，并保存引用（例如挂到全局或组件实例上） - 将
controller.signal作为signal选项传入 fetch - 监听
beforeunload事件，在触发时调用controller.abort() - 注意：需确保 controller 在请求完成或被中止后及时丢弃，避免内存泄漏
推荐用 pagehide 替代 beforeunload
beforeunload 有兼容性和行为限制（如 Chrome 中可能被静默忽略，且不支持异步操作），而 pagehide 更可靠，尤其对后台标签页、安卓 PWA 等场景更友好。
Alibabacloud Sdk Client Initialization For Java
下载
在 Java 中初始化和管理阿里云 SDK客户端。包括单例模式、线程安全、endpoint 与 region 配置、VPC 终端节点、同步与异步等。
-
pagehide在页面即将隐藏/卸载时触发，包括前进后退、关闭标签、最小化等 - 它不会阻塞页面跳转，也不需要返回字符串来触发确认弹窗
- 建议优先监听
pagehide，并回退到beforeunload作兼容
实际代码示例
以下是一个轻量封装，自动绑定和清理：
立即学习“Java免费学习笔记（深入）”；
function fetchWithCleanup(url, options = {}) {
const controller = new AbortController();
const signal = controller.signal;
// 发起请求
const promise = fetch(url, { ...options, signal });
// 监听页面隐藏/卸载
const onExit = () => controller.abort();
window.addEventListener('pagehide', onExit, { once: true });
window.addEventListener('beforeunload', onExit, { once: true });
// 请求结束后自动清理监听器（可选，提升健壮性）
promise.finally(() => {
window.removeEventListener('pagehide', onExit);
window.removeEventListener('beforeunload', onExit);
});
return promise;
}
// 使用
fetchWithCleanup('/api/data')
.then(res => res.json())
.catch(err => {
if (err.name === 'AbortError') {
console.log('请求已被取消');
} else {
console.error('请求失败', err);
}
});
注意事项与边界情况
- 多个并发请求需为每个请求单独创建
AbortController，不能共用一个 signal - 若使用框架（如 React），应在组件卸载时主动 abort，而非仅依赖全局事件（更精准）
- Service Worker 环境下，fetch 可能不受主页面 abort 影响，需额外处理
- 部分旧浏览器（如 IE）不支持
AbortController，需 polyfill 或降级处理
