退出页面前发送请求实现方案

需求背景

用户退出当前页面时,修改的数据未进行保存,需要发送接口请求实现自动保存的功能。简单分析需求可知,退出页面包含 路由切换 和 **关闭浏览器标签 **页两种情况:

  • 路由切换:项目使用 Vue2 开发,离开页面时可以在 beforeDestroy 钩子函数中调用接口实现保存数据,但是这个方法只能在路由切换当前组件销毁前触发,无法监听到浏览器页面关闭的情况。
  • 关闭浏览器标签页:考虑在 window.onunload 钩子函数中发送请求。

解决方案

路由切换

路由切换时,当前组件将会被销毁,由于 beforeDestroy 钩子函数是在组件销毁前被调用,可以直接拿到当前组件的 data,因此可以在 beforeDestroy 钩子函数中直接使用 axios 去调用接口,保存数据。
路由切换时调用接口保存数据的方式简单,不做过多赘述。

关闭浏览器标签页

请求时机:

回顾一下浏览器加载、刷新、卸载(关闭)时触发的事件:

  • 加载时:触发 onload 事件
  • 刷新时:先触发 onbeforeunload 事件,然后是 onunload 事件,最后是 onload 事件。
  • 卸载时:先触发 onbeforeunload 事件,然后是 onunload 事件

刷新和卸载页面时都会先后触发 onbeforeunload 和 onunload 事件,但刷新页面的时候时不需要调用接口的,那么就需要区分刷新和关闭行为。

根据时间差来实现判断是刷新还是关闭标签:
在点击刷新或者关闭时开始计时记录下这一刻的时间戳,因为刷新和关闭 在执行onunload方法时的时间不一样,一般情况下经过测试:

  • 关闭时时间差不大于3毫秒
  • 刷新时即使只有一个简单的helloworld页面都不少于10毫秒
  • 而一般网站网页内容更多,时间差达到了100多毫秒
mounted () {
  let beginTime = 0;
  let differTime = 0;
  window.onbeforeunload = function () {
    beginTime = new Date().getTime();
  }
  
  window.onunload = function () {
    differTime = new Date().getTime() - beginTime;
    // 关闭页面操作
    if (differTime < 5) {
      // 请求接口数据
      
    }
  }
}
接口调用方案

由于 axios 库直接调用接口,后台无法收到请求,原因是当页面关闭销毁时,由于 axios 是异步的,http 请求就直接连接不上或者断开,导致无法向后台发送数据。
解决思路是:ajax 请求换成同步的,或者保持 http 连接。
ajax 设置为同步请求
原生方式:

var xhr = new XMLHttpRequest();
				
//打开请求, open方法第三个参数设置为false为同步请求
xhr.open('GET','js/data.json',false); //同步请求

// 发送请求
xhr.send(null);

目前高版本浏览器都不建议使用 XMLHttpRequest 对象方式发送同步请求

jQuery 方式:使用jq插件发送ajax请求时将 async 参数设置为 false 即可。
keepAlive
fetch 中设置 keepAlive 为 true 时,即使页面处于关闭状态也会保持连接,利用这个特性,可以发送可靠的请求。另外,使用 fetch 可以非常方便设置请求参数。

fetch(url, {
  method: "POST",
  headers: {
    "Content-Type": "application/json",
  },
  body: JSON.stringify({
    some: "data",
  }),
  // 保持连接
  keepalive: true,
});

navigator.sendBeacon
navigator.sendBeacon() 方法可用于通过HTTP将少量数据异步传输到Web服务器。会使用户代理在有机会时异步地向服务器发送数据,同时不会延迟页面的卸载或影响下一导航的载入性能,这意味着:

  • 数据发送是可靠的。
  • 数据异步传输。
  • 不影响下一导航的载入。
navigator.sendBeacon(
  "/log",
  JSON.stringify({
    some: "data",
  })
);

sendBeacon API 不支持添加请求头,可以利用 Blob 做一些改动支持请求头。

const blob = new Blob([JSON.stringify({ some: "data" })], {
    type: "application/json; charset=UTF-8",
  });
navigator.sendBeacon("/log", blob);

sendBeacon 本意是发送信标,所以通常是在设置页面埋点时使用,并且不需要发送太多的数据。

总结

本文总结了用户退出当前页面前发送请求问题的一些解决方法,由于我的使用场景需要接口带上额外的参数和token,因此选择了使用 fetch api 设置 keepAlive 的方式实现退出该需求的。

参考文档:
如何处理页面关闭时发送HTTP请求
fetch Api - MDN
Navigator.sendBeacon()-MDN
杂记:关于 navigator.sendBeacon 接口
vue 判断窗口是关闭还是刷新 笔记
vue监听浏览器刷新和关闭事件,并在页面关闭/刷新前发送请求

posted @ 2022-07-24 15:04  公瑾当年  阅读(2639)  评论(0编辑  收藏  举报