介绍
游览器专门做给 tracking 用的接口. 从前我们想 tracking 用户点击 anchor 是比较麻烦的.
因为 click 事件触发后, 想发 ajxax 去做 tracking record 但在 ajax 还没有返回时, 游览器已经跳转了.
解决方案是 preventDefault 等 ajax 返回后才执行跳转, 但这样体验就很差了丫. 所以就有了 SendBeacon.
游览器会背地里执行它, 确保不影响用户体验又成功发送 request.
参考
操作
const aboutLink = document.querySelector("#about-link")!; aboutLink.addEventListener("click", (e) => { const formData = new FormData(); formData.append("source", "google"); formData.append("medium", "cpc"); const queryParams = new URLSearchParams({ source: "google", medium: "cpc", }); navigator.sendBeacon("https://192.168.1.152:44300/api/tracking", queryParams); navigator.sendBeacon("https://192.168.1.152:44300/api/tracking", formData); });
它的 data 支持很多种格式
不支持 header 哦. 不要把它当成 Fetch 或者 XMLHttpRequest 来使用. 它只属于 tracking purpose 而已.