vue3-mgt-template/public/md/sendBeacon.md

sendBeacon 是一个用于在网页与服务器之间异步传输小数据的 Web API，特别适用于在页面卸载时发送数据。这种方法的优点是即使用户离开页面或关闭浏览器，数据也能被可靠地发送。

使用场景

• 记录分析数据（如页面浏览、用户行为等）。
• 发送用户反馈或事件数据。
• 发送数据时不影响页面的性能，尤其是在卸载期间。

语法

navigator.sendBeacon(url, data);

参数

• url: 要发送数据的服务器端点（必须是同源或允许跨源的URL）。
• data: 可选，发送的数据，可以是 ArrayBuffer, Blob, DOMString 或 FormData。

返回值

• 返回 true 表示请求已成功添加到发送队列，返回 false 表示请求失败（通常是因为目标 URL 不可达）。

示例代码

// 发送数据示例
const url = 'https://example.com/track';
const data = JSON.stringify({ action: 'page_exit', timestamp: Date.now() });

window.addEventListener('beforeunload', function() {
    const success = navigator.sendBeacon(url, data);
    console.log('Beacon sent:', success);
});

说明

1. 事件监听: 通过 beforeunload 事件监听用户离开页面的行为，在页面卸载之前调用 sendBeacon。
2. 数据格式: 在这个示例中，数据被转换为 JSON 字符串以便发送。
3. 异步特性: sendBeacon 方法不会阻塞页面的关闭，这意味着它不会延迟用户的离开。

注意事项

• 数据大小: sendBeacon 适合发送小量数据，通常不应超过 64 KB。
• 网络请求: sendBeacon 会在后台发送请求，因此不需要等待响应。
• 支持性: 现代浏览器都支持 sendBeacon，但在较旧的浏览器中可能不支持。

小结

sendBeacon 提供了一种有效的方式来在页面卸载时或用户离开时发送数据，确保数据的传输不会影响用户体验。如果你需要在用户离开时记录重要的数据或事件，sendBeacon 是一个合适的选择。如果有其他问题或需要更详细的信息，请告诉我！