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

Question

我正在开发一个 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 = '';)
});
  }, []);

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

我尝试在超时内添加 evt.returnValue = '' 并响应 http 调用。但它也不起作用。

相同或实现相同的任何解决方法，即在页面重新加载/关闭时进行 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 在 取消

如何在重新加载时只允许 http 调用？

Answer 1

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

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


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

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