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

如果你用了诸如神策、火山引擎等数据分析工具，你可能会遇到重定向的时候，想要统计的数据丢失了。一个成熟的解决方法是用 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 方法设置请求头，具体代码如下：

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"} ，大功告成！