在页面重新加载之前执行 http 请求

Posted 2023-02-19

【中文标题】在页面重新加载之前执行 http 请求

【英文标题】：Execute a http request before page reload

【发布时间】：2021-08-02 03:53:43

【问题描述】：

我正在开发一个 React 应用程序，我想在用户尝试关闭页面或重新加载页面时销毁会话。

我尝试过的事情：

window.onbeforeunload = () => true ：这提供了一个默认提示，可以自定义消息。 提示（react-router）：未捕获页面重新加载 通过useEffect中的eventListener

useEffect(() => 

  window.addEventListener("beforeunload", function(evt) 
    // Cancel the event (if necessary)
    evt.preventDefault();
   
    axios.get('url/destroy').then(res=>  evt.returnValue = '';)
);
  , []);

面临的问题：请求被取消。

我尝试在响应 http 调用的超时内添加 evt.returnValue = ''。但这也没有用。

任何相同或实现相同的解决方法，即在页面重新加载/关闭时进行 http 调用。

提前致谢。

更新 1：

 useEffect(() => 
    window.addEventListener("beforeunload", (e) =>
      alertUser(e, cookies.get("env"))
    );
   
  , []);
    const alertUser = async (e, tempBool) => 
    e.preventDefault();
    if (tempBool) 
      let blob = new Blob(
        [
          JSON.stringify(
            data: "data",
          ),
        ],
         type: "application/json" 
      );
      navigator.sendBeacon(
        "ur/destroy_session",
        blob
      );
      e.returnValue = "";
     else 
      e.returnValue = "";
    
  ;

我想根据某个 cookie 值发送请求。 在这种情况下，请求被调用 type=ping 在按 reload 和 type=xhr 在 取消

Reload如何只允许http调用？

【问题讨论】：

可以beacons 帮忙吗？

@Phix 我已经使用信标更新了我的问题和方法。

【参考方案1】：

想知道服务工作者是否可以在这里派上用场，因为它们在后台线程中运行。没试过，但值得一试。

navigator.serviceWorker.register('serviceWorker.js');


window.onunload = function() 
  navigator.serviceWorker.controller.postMessage(
    type: 'closeWindow'
  );
;

self.onmessage = function(event) 
  if (event.data.type === 'closeWindow')