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

【问题标题】：Execute a http request before page reload在页面重新加载之前执行 http 请求
【发布时间】：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 我已经使用信标更新了我的问题和方法。

标签： javascript reactjs http axios addeventlistener

【解决方案1】：

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

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


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

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

【讨论】：