Angular中@HostListener(window:unload)如何确保退出前完成HTTP请求？

这个问题的核心原因是浏览器的卸载机制：当触发window:unload事件时，浏览器会优先完成页面卸载流程，不会等待普通异步HTTP请求的完成。而Angular的HttpClient发起的请求默认是异步且没有持久化标记的，所以浏览器会直接终止这些请求，导致你的subscribe回调永远不会触发。

下面是几种可行的解决方案，按推荐程度排序：

1. 使用navigator.sendBeacon()（最推荐） #

sendBeacon是浏览器专门为页面卸载场景设计的API，它会异步发送请求，但浏览器会保证请求被调度执行，既不会阻塞页面卸载，也不会影响用户体验。

针对你的logout方法，可做如下修改：

private logout(): void {
  const ses = this.ngRedux.getState().planning.planSession;
  const logoutUrl = 'api/v1/auth/logout';

  // 处理删除plan session的请求（如果存在）
  if (ses !== null) {
    const deleteUrl = `${this.url}/${ses.id}`;
    // sendBeacon默认是POST请求，若后端不兼容可协商调整，或用Blob传递必要参数
    const deleteBlob = new Blob([JSON.stringify({})], { type: 'application/json' });
    navigator.sendBeacon(deleteUrl, deleteBlob);
  }

  // 发送logout请求
  const logoutBlob = new Blob([JSON.stringify({})], { type: 'application/json' });
  if (navigator.sendBeacon(logoutUrl, logoutBlob)) {
    this.tokenService.logout();
  } else {
    console.error('Logout请求发送失败');
  }
}

注意：部分浏览器可能不支持sendBeacon自定义请求方法（比如DELETE），如果后端无法兼容POST方式处理删除逻辑，可以改用下面的fetch方案。

2. 使用带keepalive选项的fetch #

fetchAPI支持keepalive: true选项，开启后浏览器会允许请求在页面卸载后继续完成，且支持所有HTTP方法，灵活性更高：

private logout(): void {
  const ses = this.ngRedux.getState().planning.planSession;
  const logoutUrl = 'api/v1/auth/logout';
  const authHeaders = {
    'Content-Type': 'application/json',
    // 按需添加授权头，比如 Authorization: `Bearer ${this.tokenService.getToken()}`
  };

  const requestPromises: Promise<any>[] = [];

  // 添加删除plan session的请求（如果存在）
  if (ses !== null) {
    const deleteUrl = `${this.url}/${ses.id}`;
    requestPromises.push(
      fetch(deleteUrl, {
        method: 'DELETE',
        headers: authHeaders,
        keepalive: true
      })
    );
  }

  // 添加logout请求
  requestPromises.push(
    fetch(logoutUrl, {
      method: 'POST',
      headers: authHeaders,
      body: null,
      keepalive: true
    }).then(() => {
      this.tokenService.logout();
    }).catch(err => {
      console.error('Logout请求失败:', err);
    })
  );

  // 无需await，keepalive会保证请求继续执行
  Promise.all(requestPromises).catch(err => console.error('请求执行失败:', err));
}

注意：keepalive有请求大小限制（通常为64KB），如果请求体过大可能会失败。

3. 不推荐：同步XMLHttpRequest #

同步请求会阻塞页面卸载，等待请求完成，但会导致用户体验变差（页面卡顿），且现代浏览器对同步XHR在unload事件中的使用有严格限制，大概率会被阻止：

private logout(): void {
  const ses = this.ngRedux.getState().planning.planSession;
  const xhr = new XMLHttpRequest();

  if (ses !== null) {
    xhr.open('DELETE', `${this.url}/${ses.id}`, false); // 第三个参数设为false表示同步
    xhr.send();
  }

  xhr.open('POST', 'api/v1/auth/logout', false);
  xhr.send();
  this.tokenService.logout();
}

除非万不得已，否则不建议使用该方案。

代码适配提示 #

因为sendBeacon和带keepalive的fetch不需要依赖Angular的Observable，所以需要调整closeMainWindow方法，不再使用subscribe：

closeMainWindow(): void {
  if (this.windowId === this.sessionId) {
    this.closeWindows();
    this.logout(); // 直接调用即可，无需订阅
  }
}

最后要注意：即使使用上述方案，也无法100%保证请求一定会被后端接收（比如网络突然中断），如果业务逻辑依赖这些请求的执行结果，建议在前端做容错处理，或后端设计成幂等接口。

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