Angular beforeunload API-使用 fetch 进行调用

Question

我在 Angular 15 中有一个组件，当窗口或选项卡关闭时，需要对我的后端进行 API 调用。我尝试像下面这样解决它，但显然这不是一个好的解决方案，因为使用 fetch 不能保证调用成功完成。我该如何确保该窗口仅在 API 调用完成后关闭？ （希望成功，但在错误情况下它仍然应该关闭窗口。）

@HostListener('window:beforeunload', ['$event'])
  beforeUnloadHandler(event) {
    if (this.sll_ID && this.auth.getUser().id) {
      const headerDict = {
        'Authorization': this.auth.getAuthToken()
      }

      const formData = new FormData();
      formData.append('id', JSON.stringify(this.sll_ID))
      formData.append('locked', JSON.stringify(0))
      formData.append('locked_by', JSON.stringify(this.auth.getUser().id))

      fetch(environment.apiUrl + "/api/sllorderlock/", {
        method: 'POST',
        headers: headerDict,
        body: formData,
        keepalive: true,
      });
    }
}

Answer 1

请使用 Beacon API 的

_navigator.sendBeacon_

方法。

当

visibilitychange

发生变化，并且窗口隐藏时，创建formdata，然后浏览器将发送它。

（注意：您需要调整授权，尝试发送

blob

，请参阅：Navigator.sendBeacon() 传递标头信息）

@HostListener('window:visibilitychange', ['$event'])
async beforeUnloadHandler(event: DocumentVisibilityState) {

  if (document.visibilityState === 'hidden') {

    if (this.sll_ID && this.auth.getUser().id) {
      const headerDict = {
        'Authorization': this.auth.getAuthToken()
      }

      const formData = new FormData();
      formData.append('id', JSON.stringify(this.sll_ID))
      formData.append('locked', JSON.stringify(0))
      formData.append('locked_by', JSON.stringify(this.auth.getUser().id))

      navigator.sendBeacon(environment.apiUrl + "/api/sllorderlock/", formData);
      
    }
  }
}

查看更多：JavaScript、浏览器、窗口关闭 - 发送 AJAX 请求或在窗口关闭时运行脚本