Question

我正在尝试使用JavaScript事件在浏览器关闭/选项卡关闭中的react js中使用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);
}

我希望在关闭浏览器或选项卡之前先致电服务并保存数据，但是在致电服务以保存数据之前会关闭浏览器

Answer 1

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

Trying to detect browser close event

更新：

请尝试从您的api返回一个布尔值，从中您可以了解到达服务器的匹配。然后，您可以将close事件返回到浏览器。

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() {
}

Answer 2

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

关闭标签页/浏览器将关闭连接，服务器将立即知道。

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

根据jfriend00's answer to Websockets and scalability，它们具有很好的可扩展性：

经过适当配置的单个服务器可以处理成千上万个同时处于空闲状态的webSocket连接，因为空闲的webSocket几乎不使用服务器CPU。

如何在React中关闭浏览器/关闭标签页服务器调用

2 个答案: