怎么在页面刷新/关闭之前发送个请求, 且不想要提示框 ?

Question

怎么在页面刷新/关闭之前发送个请求, 且不想要提示框

window.addEventListener('beforeunload', async (e) => {
  // 发送请求 , 请求发送完了之后再刷新页面
});

window.addEventListener('beforeunload', async (event) => {
    await updateReq();
    event.returnValue = ' ';
    return '';
  }

使用await不生效

---

不想要提示确认

Answer 1

以前可以通过关闭页签的时候创建一个同步Ajax请求来处理，现在如果单纯想要发起一个请求，那么可以使用 Navigator.sendBeacon() 这个API。或者使用Fetch发起请求时配置 keepalive 属性。

至于如何使用社区里面有很多相关的文章 👇

• 你知道关闭页面时怎么向后台发送消息吗？
• sendBeacon 刷新/关闭页面之前发送请求
• 如何在页面关闭时发送 API 请求

当然其实你直接看MDN的文档也能够做出来的。

Answer 2

我这里有一个比较笨的方法，不是我发现的，我也是在社区中看见的，抱歉无法再找出来@给你看，大概意思就是浏览器刷新和关闭的时候会存在一个时间差，这个时间差可以判断你是关闭浏览器还是刷新浏览器。代码如下

// 判断是刷新还是关闭浏览器，刷新不删除localStorage，否则删除
onMounted(() => {
  let beforeTime = 0,
    leaveTime = 0;
  window.onunload = () => {
    leaveTime = new Date().getTime() - beforeTime;
    if (leaveTime <= 5) {
      console.log("====浏览器关闭=====");
      localStorage.clear();
    } else {
      console.log("====浏览器刷新=====");
    }
  };

  window.onbeforeunload = () => {
    beforeTime = new Date().getTime();
  };
});

这个代码我还是去gitee仓库上扒下来给你的，哈哈哈。