【推荐】navigator.sendBeacon() 异步发送数据

navigator.sendBeacon()方法可用于通过HTTP将少量数据异步传输到Web服务器。

使用sendBeacon() 方法会使用户代理在有机会时异步地向服务器发送数据，同时不会延迟页面的卸载或影响下一导航的载入性能。这就解决了提交分析数据时的所有的问题：数据可靠，传输异步并且不会影响下一页面的加载。此外，代码实际上还要比其他技术简单许多！

const sendBeacon = (url, data = {}) => {
  const joinedQueue = navigator.sendBeacon(url, JSON.stringify(data));
  console.log('用户代理把数据加入传输队列' + (joinedQueue ? '成功' : '失败'));
}

sendBeacon()是以Http POST方法发送请求的。

sendBeacon()第二个参数可接受ArrayBufferView、Blob、FormData、DOMString类型的数据。

sendBeacon()会根据传入的数据自动设置请求头，数据类型和对应Content-Type如下：

• Formdata：multipart/form-data
• DOMString：text/plain

如果想传递json数据到后端，没法直接设置请求头的Content-Type，因此需要明确告诉后端开发人员你传递的是json格式的数据。

但是可以通过构建Blob对象间接达到设置Content-Type的效果。

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

通过Blob也可以发送其他MIME type的数据。

如果浏览器不支持sendBeacon()则回退到同步的XMLHttpRequest：

function sendReport(url, data) {
  if (navigator.sendBeacon) {
    const joinedQueue = sendBeacon(url, data);
    if (!joinedQueue) {
      syncRequest(url, data);
    }
  } else {
    syncRequest(url, data);
  }
}