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

需求背景

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

• 路由切换：项目使用 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监听浏览器刷新和关闭事件，并在页面关闭/刷新前发送请求