Angular中window:beforeunload事件内发送HTTP请求的实现方案问询

现有代码失效原因 #

window:beforeunload 是同步执行的事件，不会等待异步操作（包括Promise、HttpClient返回的Observable）执行完成就会结束页面卸载流程，你当前用async/await封装的方案本质还是异步请求，会在页面卸载时被直接中断，因此无法正常触发。

Angular官方推荐实现方式 #

Angular目前没有针对该场景的专属内置封装，官方推荐基于浏览器标准API实现，有两种稳定方案：

方案1：使用原生navigator.sendBeacon（优先推荐） #

navigator.sendBeacon是浏览器原生设计用于卸载阶段发起异步请求的API，会保证请求在页面卸载流程中正常完成，不会被中断，适配Angular的写法如下：

@HostListener('window:beforeunload')
beforeUnload(): void {
  const requestData = JSON.stringify({});
  // 封装为JSON格式Blob适配后端接口要求
  const payload = new Blob([requestData], { type: 'application/json; charset=UTF-8' });
  // 替换为你的接口地址
  navigator.sendBeacon(`${environment.apiBaseUrl}/article/persistence`, payload);
}

方案2：Angular 14+ 配合fetch后端的keepalive配置 #

如果你需要复用现有HttpClient的封装逻辑，可以开启HttpClient的fetch后端，配置keepalive: true实现相同效果：

1. 首先在根模块配置HttpClient使用fetch后端：

// app.module.ts
import { provideHttpClient, withFetch } from '@angular/common/http';

@NgModule({
  providers: [
    provideHttpClient(withFetch())
  ]
})
export class AppModule {}

2. 修改你的Service请求配置，添加keepalive参数：

// article.service.ts
setArticlePersistence(data: any) {
  return this.http.post('/article/persistence', data, {
    keepalive: true
  }).subscribe();
}

3. 事件监听中直接触发请求即可，不需要加await等待返回：

@HostListener('window:beforeunload')
beforeUnload(): void {
  this.articleService.setArticlePersistence({});
}

注意事项 #

• navigator.sendBeacon和keepalive配置的fetch请求都有64KB左右的体积限制，超过限制的请求会被浏览器拒绝
• 两种方案默认都仅支持POST请求，如需其他请求方法只能使用同步XHR（不推荐，会阻塞页面卸载，严重影响用户体验）

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