点赞、收藏、评论，三连击，回家不迷路

故事是这样发生的，由于公司业务发展需要，产品需要对不同人访问做一个访问记录及访问时长，这个访问时长就很难了，从开始到结束这个过程，我们需要把时间上传服务器，如果正常埋点你会发现，还没发送完成就已经被中止了。<br>

于是我在百度上不停的查找方法，有时搜索手势不对，对收搜结果差别还是很大的，刚开始搜索我找到了一个叫onbeforeunload的事件，这是关闭浏览器前或者刷新浏览器会触发的事件，让我感觉希望的前线，具体如下：

onbeforeunload 事件属性

windowwindow.onbeforeunload=function(e){     　　

    var e = window.event||e;

    e.returnValue=("确定离开当前页面吗？");

}

等你搬到你代码里面你会发现，确实可以阻拦浏览器关闭或者刷新，但是出现弹框后所以js都不会执行了，请求也会停留，这。。。不符合我的需求啊。onbeforeunload详情解析<hr>

无奈，我只能继续开始寻找，寻找一个适合需求的方法，几经查找几个小时，发现一个新的方法它叫navigator.sendBeacon，刚开始我是一脸蒙逼的，内心不停的思索，这个玩意能满足我的需求？这么简单能发起请求？这东西怎么用，会不会很复杂？三连击连问。说实话能，解决三连问的问题

今日主角 navigator.sendBeacon(url, data)

• url

  url 参数表明 data 将要被发送到的网络地址。

• data

  data 参数是将要发送的 ArrayBufferView 或 Blob, DOMString 或者 FormData 类型的数据。

• MDN文档更多详情解析

• 以下是几种格式传参方式：

// 1. DOMString类型，该请求会自动设置请求头的 Content-Type 为 text/plain
const reportData = (url, data) => {
  navigator.sendBeacon(url, data);
};

// 2. 如果用 Blob 发送数据，这时需要我们手动设置 Blob 的 MIME type，
// 一般设置为 application/x-www-form-urlencoded。
const reportData = (url, data) => {
  const blob = new Blob([JSON.stringify(data), {
    type: 'application/x-www-form-urlencoded',
  }]);
  navigator.sendBeacon(url, blob);
};

// 3. 发送的是Formdata类型，
// 此时该请求会自动设置请求头的 Content-Type 为 multipart/form-data。
var data = {
   name: '前端名狮子'  ,
   age: 20
};
const reportData = (url, data) => {
  const formData = new FormData();
  Object.keys(data).forEach((key) => {
    let value = data[key];
    if (typeof value !== 'string') {
      // formData只能append string 或 Blob
      value = JSON.stringify(value);
    }
    formData.append(key, value);
  });
  navigator.sendBeacon(url, formData);
};

// 监听网页关闭或刷新
window.addEventListener('unload', logData, false);
function logData() {
    navigator.sendBeacon("/log", analyticsData);
}

• 1. 先讲解线上测试方法

  • 判断是否发送成功线上测试地址

  • 测试代码写法，如下：

  if ('sendBeacon' in navigator) {
    window.addEventListener('pagehide', function() {
      navigator.sendBeacon(
        'https://putsreq.herokuapp.com/4GE2nVUuDoDGsNyKES2G',
        'Sent by a beacon!2');
    }, false);
  }
  

  • 测试结果查看方法如下(可以结合图片)：
    1. 可以查看Requests次数。
    2. 测试前，可以清空记录clear history。
    3. 查看发送请求头及内容Headers。
       
• 2. 可以利用浏览器自带保留请求接口或控制台输出的方法，刷新查看是否发送请求（这里需要注意几点）
  • 1.接口查看需要先点击preserve log，然后点击All，在网络捉取才会出现，因为navigator.sendBeacon发送的请求类型不属于平时请求的XHR类型。
  • 2.控制台查看需要先点击preserve log，然后刷新就不会把之前输出的全部清空。
  • 3.可以结合下面的图片进行操作，很方便。最后上传完可以叫后端查看数据是否提交成功了。

浏览器兼容性

本人掘金号

喜欢记得点个赞，谢谢