在页面重新加载之前执行http请求-前端问题

Execute a http request before page reload(在页面重新加载之前执行http请求)

本文介绍了在页面重新加载之前执行http请求的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我正在使用Reaction应用程序，并且希望在用户尝试关闭该页或重新加载该页时销毁该会话。

我尝试的内容：

window.onbepreunload=()=>；true：这将提供一个默认提示符，其中可能包含自定义消息。
提示(反应路由器)：未捕获页面重新加载
通过EventListener使用生效

数据-lang="js"数据-隐藏="假"数据-控制台="真"数据-巴贝尔="假">

useEffect(() => {

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

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

我尝试在响应http调用的超时时间内添加evt.returValue=‘’。但它也没有起作用。

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

提前谢谢。

更新1：

数据-lang="js"数据-隐藏="假"数据-控制台="真"数据-巴贝尔="假">

 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=xhr时，使用type=ping调用该请求

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

推荐答案
想知道服务工作者在这里是否有用，因为他们在后台线程中运行。我还没有尝试过，但值得一试。

navigator.serviceWorker.register('serviceWorker.js'); window.onunload = function() { navigator.serviceWorker.controller.postMessage({ type: 'closeWindow' }); }; self.onmessage = function(event) { if (event.data.type === 'closeWindow') { } }

这篇关于在页面重新加载之前执行http请求的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持编程学习网！