javascript - Angular 6：尝试在浏览器关闭事件（浏览器的卸载/卸载事件之前）上进行同步调用（删除）

Question

实际上，一旦用户关闭浏览器，我想使用服务调用（删除方法）更新 Db 中的标志。我能够使用onbeforeunload和onunload事件检测浏览器关闭操作，但异步调用对我不起作用（有时在调试模式下它工作正常，但在更高的环境下它不起作用）。

然后，我尝试发出同步请求，但后来我发现当页面被用户导航离开或关闭时，Chrome 现在在页面关闭期间不允许同步 XHR。检查链接：https ://www.chromestatus.com/feature/4664843055398912

我已经尝试过新XMLHttpRequest()的同步，也可以获取 api，Navigator.sendBeacon()但不幸的是对我没有任何作用。

请建议一些有用的东西，因为我访问了这么多帖子，但对我没有用。

提前致谢。

score 0 · Accepted Answer

您可以使用获取 API。语法是：

fetch('API', {
    method: 'POST', // Other opn are also supported like GET,PUT DELETE
    body: '',
    keepalive: true
});

score 0 · Accepted Answer

我对此有一些解决方案。希望他们中的任何一个都能解决您的问题。

constructor() {
    window.onbeforeunload = ()=>{
      //call API here
    }
  }

在您的组件构造函数中编写上面的代码

或者

在我看来，更好的想法是让心跳 api 每 N 秒发送一次请求，以通知服务器会话处于活动状态并且用户在线。在服务器上每 M 分钟检查一次是否有超过 N 秒的心跳请求：如果是这样 - 执行 API 请求（您想在崩溃时执行的内容）。

或者

'beforeunload' 将在刷新页面、关闭选项卡或关闭浏览器时触发。

  @HostListener('window:beforeunload', ['$event'])
    beforeUnload(e: Event) {
        e.returnValue = false;
    }

或者

无法确保每次用户退出浏览器页面时都会触发特定功能。原因是浏览器可能出于多种原因关闭窗口。是的，它可能是用户操作，但这不是唯一的情况。例如浏览器可能会崩溃。

就我而言，我将不得不找到另一种策略来跟踪用户停留在页面上的时间。例如，我计划在用户退出之前发送大量 API 调用，其中包含我需要了解他在页面上停留的所有信息。当我找到一个好的解决方案时，我会更新答案。无论如何，我仍然会等待更好的答案。

2 回答 2