页面关闭时上传监控数据

最近有个需求，需要在页面关闭时请求后台发送一些监控数据，真是想的头大。最开始想到了ajax发送同步请求，但是效果不好而且在新版本chrome已经被废弃，无奈网上搜寻，找到了fetch实现的解决方案，算是解决了掉头发的困扰。

AJAX发送同步请求

先给出代码：

const data = JSON.stringify({
    // 监控数据
});

var xhr = new XMLHttpRequest();

// 第三个参数false，表示当前请求是同步
xhr.open('post', '后台地址', false);
// 发送json数据
xhr.setRequestHeader('content-type', 'application/json');

xhr.onreadystatechange = function() {
 // 发送成功后，页面已销毁，所以这里执行不了
}

xhr.send(data);
    

同步请求后阻止代码的执行，这会导致用户操作屏幕无响应，体验实在太差了。

而且由于发送成功后页面已经销毁，不能读取响应值。

而且在新版的chrome(版本高于80)已经不支持了。公告如下：

Chrome now disallows synchronous calls to XMLHTTPRequest() during page dismissal when the page is being navigated away from or is closed by the user. This applies to beforeunload, unload, pagehide, and visibilitychange.

Fetch

keepalive的作用：

当用户离开网页时,脚本向服务器提交一些用户行为的统计信息.如果keepalive是false,数据无法发送,因为浏览器已经把页面卸载了

标记keepalive的fetch请求允许在页面卸载后执行。

const url = '后端接口';
const data = JSON.stringify({
   // 监控数据
 });
 
fetch(url, {
 method: 'POST',
 body: data,
 headers: {
  'Content-Type': 'application/json'
 },
 // keepalive为true，允许fetch请求在页面卸载后执行。
 keepalive: true,
});