如何避免在重定向时丢失统计数据

在使用神策、火山引擎等数据分析工具的时候，页面重定向时，可能会遇到统计数据丢失的情况。

一个成熟的解决方法是用 sendBeacon方法。navigator.sendBeacon(url, data)这个方法主要用于在卸载（unload）文档之前向 Web 服务器发送数据，是一个 POST 方法。里面的data参数是可选的，类型为 ArrayBuffer、ArrayBufferView、Blob、DOMString、FormData 或 URLSearchParams。

在统计数据时，我们常常向后端接口传送一个 JSON 类型的数据，我们知道，这种情况需要前端在发起请求时，设置请求头 content-type=application/json，不设置的话会出问题。如果只是简单的写成 navigator.sendBeacon('/api',{ key: "value" })，这是行不通的，此时请求头里的 Content-Type 为 text/plain;charset=UTF-8, 这不对啊！

为了将 JSON 数据顺利地传送给后端接口，我们可以通过 Blob 对象，间接为navigator.sendBeacon方法设置请求头，具体代码如下：

javascript

const data = { key: "value" };
const headers = {
  type: "application/json",
};
const blob = new Blob([JSON.stringify(data)], headers);
navigator.sendBeacon(`/api`, blob);

你可以把上面的代码粘贴到浏览器里的 Console 面板，运行一下，你会发现此时的 Content-Type 就是 application/json 了，同时 Request Payload 是 {"key":"value"}，大功告成！