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

2022-07-12 12:32:55 阅读：240 来源： 互联网

标签：const url joinedQueue sendBeacon 发送数据 navigator data

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);
  }
}

标签：const,url,joinedQueue,sendBeacon,发送数据,navigator,data
来源： https://www.cnblogs.com/sybboy/p/16469617.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

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