Angular中window:beforeunload监听浏览器关闭时无法触发接口问题

这是浏览器处理页面卸载时的进程调度差异导致的：

• 页面刷新时，浏览器会保留当前页面的部分上下文，且会等待短时间内的异步请求完成（或至少尝试发送）——因为刷新本质是在同一标签页内加载新内容，页面进程不会立即终止。
• 关闭标签页时，浏览器会优先释放资源，快速终止页面所有进程。如果Connect.handleEnd()是异步请求（比如基于XMLHttpRequest、fetch的异步调用），浏览器会直接中断该请求，不会等待其完成。

添加confirm弹窗后，弹窗会阻塞页面卸载流程，直到用户完成交互，这段时间足够异步请求执行完毕，所以接口能正常调用。

要在无弹窗的情况下保证卸载时请求被浏览器处理，需使用浏览器专为这类场景设计的API：

方案1：使用navigator.sendBeacon() #

这是最推荐的方式，它会异步发送请求，且浏览器会保证请求在页面卸载前完成，不会阻塞页面卸载流程。
假设Connect.handleEnd()内部是发送POST请求，可修改为：

@HostListener('window:beforeunload', ['$event']) beforeUnloadHandler(event: Event) {
  if (this.msgService.istrue) {
    // 替换为实际接口地址与请求参数
    const payload = JSON.stringify({ /* 请求参数 */ });
    navigator.sendBeacon('/api/handle-end', payload);
  }
}

方案2：使用fetch的keepalive选项 #

如果需要自定义请求头、请求方法等更灵活的配置，可使用fetch并开启keepalive：

@HostListener('window:beforeunload', ['$event']) beforeUnloadHandler(event: Event) {
  if (this.msgService.istrue) {
    fetch('/api/handle-end', {
      method: 'POST',
      body: JSON.stringify({ /* 请求参数 */ }),
      headers: {
        'Content-Type': 'application/json'
      },
      keepalive: true
    });
  }
}

• navigator.sendBeacon()有 payload 大小限制（通常为64KB），如果请求内容过大，建议使用fetch+keepalive方案。
• 禁止在beforeunload中使用同步请求，会导致页面卸载卡顿，严重影响用户体验。

内容的提问来源于stack exchange，提问作者andridomace