Javascript 如何在react中执行浏览器关闭/选项卡关闭时的服务器调用

我正在尝试使用JavaScript事件在react js on browser close/tab close中使用redux saga进行服务器调用以保存数据，但它在调用服务之前关闭了浏览器

onClose = () =>{
  return this.props.saveData()  // saveData will save data using redux saga.
}

componentDidMount() {
  window.addEventListener('beforeunload',this.close);
}

componentWillMount() {
  window.addEventListener('beforeunload',this.onClose);
}

---

我希望在关闭浏览器或选项卡之前调用服务并保存数据，但它在调用服务以保存数据之前关闭浏览器

浏览器关闭不会等到您的服务到达服务器并返回。最好您可以根据下面的答案更改您的实现

更新：

请尝试从您的api返回布尔值，从中您可以理解到达服务器的命中率。然后可以将关闭事件返回到浏览器

onClose = () =>{
   let status = this.props.saveData();  // saveData will save data using redux saga.
   if(status){
      return;
}

更新：

onClose = () =>{
   let status = this.props.saveData();  // saveData will save data using redux saga.
   if(status){
      return;
}

componentDidMount() {
  setTimeout(function() {
     window.addEventListener('beforeunload',this.close);
  }, 2000);
}

componentWillMount() {
}

---

一种解决方案是在页面加载时建立一个websocket连接

关闭选项卡/浏览器将关闭连接，服务器将立即知道

一个成熟的解决方案是socket.io，如果websocket不可用，它提供回退到“长轮询”或常规轮询（在这种情况下，您需要一种“基于事件”的方法来处理请求）

---

据了解，它们具有很强的可扩展性：

一台经过适当配置的服务器可以同时处理数十万个webSocket连接，这些连接大部分处于空闲状态，因为空闲的webSocket几乎不使用服务器CPU

---

另外，浏览器关闭事件是不可预测的，根据我的经验，有时它不会按预期调用。它正在返回消息。我不想返回和显示消息。我想调用服务器。无法从您发布的url获取如何使用代码。我试过示例程序，它工作正常，正在等待响应。一旦它到达返回声明，标签立即关闭。谢谢Alwin Jose。它有时起作用，有时不起作用。此外，它在IE11上不起作用，正如我前面所说，浏览器关闭事件是不可预测的。它可能会打电话，也可能不会。我想知道浏览器关闭时api调用的目的。这样我就能找到合适的解决办法。您正在进行多次登录检查吗？