Angular 5中如何在用户关闭浏览器窗口时调用API？

这个问题其实很常见——浏览器在处理页面卸载（unload/beforeunload）时，会主动终止大部分异步操作，目的是让页面快速关闭，所以你用普通的Angular HttpClient调用自然会被掐断，只有调试模式下浏览器放慢了节奏，请求才有机会完成。

下面给你几个可靠的解决方案：

1. 优先使用navigator.sendBeacon() #

这是浏览器专门为页面卸载场景设计的API，它会把请求加入浏览器的后台发送队列，保证请求能在页面关闭前完成，而且不会阻塞页面卸载流程。

代码改造示例： #

@HostListener('window:beforeunload', ['$event'])
beforeUnloadHandler(event) {
  // 准备要发送的JSON数据
  const payload = { /* 你的跟踪数据，比如用户停留时长、操作记录等 */ };
  // 将JSON转为Blob（sendBeacon支持Blob/FormData/字符串格式）
  const blob = new Blob([JSON.stringify(payload)], { type: 'application/json' });
  
  // 发送请求，第一个参数是API端点URL
  const success = navigator.sendBeacon('/your-tracking-api', blob);
  
  // 可选：可以在控制台看是否发送成功（调试用）
  console.log('跟踪请求发送状态:', success);
}

2. 用fetch配合keepalive: true #

如果你的API需要自定义请求头或者HTTP方法（比如PUT），sendBeacon满足不了的话，可以用fetch并开启keepalive选项，效果和sendBeacon类似：

@HostListener('window:beforeunload', ['$event'])
beforeUnloadHandler(event) {
  fetch('/your-tracking-api', {
    method: 'POST', // 或你需要的方法
    body: JSON.stringify({ /* 你的数据 */ }),
    headers: {
      'Content-Type': 'application/json',
      // 其他自定义头，比如Authorization
    },
    keepalive: true, // 关键：告诉浏览器要保留这个请求直到发送完成
  });
}

关键注意事项 #

• 优先监听beforeunload而非unload：unload事件在某些极端场景下（比如浏览器崩溃、页面强制关闭）可能不会触发，beforeunload是页面开始卸载前的第一个事件，可靠性更高。
• 跨域配置：如果你的API和前端不在同一个域名下，需要确保API服务器的CORS配置允许POST（或你用的方法）请求，并且允许keepalive相关的头。
• iframe场景兼容：这两个方案在iframe中都能正常工作，只要iframe的域名和API的CORS规则匹配即可。
• 不要阻塞页面关闭：不要在beforeunload里做同步的重型操作，也不要滥用event.preventDefault()（除非你真的需要提示用户确认离开），否则会影响用户体验。

为什么你原来的方法不行？因为Angular的HttpClient底层是基于XMLHttpRequest或fetch的普通异步请求，浏览器在卸载时会直接终止这些未完成的请求，而sendBeacon和带keepalive的fetch是浏览器特殊处理的，会优先保证请求发送完成。

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