JavaScript 中怎么使用 Beacon API 在页面卸载时发送数据-js教程-PHP中文网

beacon api 是浏览器提供的轻量级异步数据发送机制，专用于页面卸载时可靠上报数据。它通过 navigator.sendbeacon() 发送 post 请求，支持多种数据格式并自动设置 content-type，相比 fetch 或 xhr 在 beforeunload/unload 中更可靠，且不阻塞卸载流程。

javascript 中怎么使用 beacon api 在页面卸载时发送数据

Beacon API 是浏览器提供的一个轻量级机制，专门用于在页面即将关闭、刷新或导航离开时，异步发送少量数据到服务器，且不阻塞页面卸载流程。它比 fetch 或 XMLHttpRequest 在 beforeunload / unload 中更可靠——因为后者常被浏览器忽略或取消。

为什么不能用 fetch 或 XMLHttpRequest？

在 beforeunload 或 unload 事件中发起常规网络请求，存在明显问题：

浏览器可能直接终止未完成的请求（尤其在快速跳转或关闭标签页时）
fetch 默认是异步但依赖事件循环，而卸载阶段 JS 执行会被快速中断
XMLHttpRequest 同步模式（async: false）已被废弃，且会卡住 UI，体验极差

Beacon API 的基本用法

使用 navigator.sendBeacon()，传入目标 URL 和要发送的数据（支持 ArrayBuffer、Blob、FormData、URLSearchParams 或字符串）：

const data = JSON.stringify({
  page: location.href,
  duration: performance.now() - startTime,
  timestamp: Date.now()
});
<p>// 发送 POST 请求（Content-Type 自动设为 text/plain）
navigator.sendBeacon('/log', data);
</p>

注意：Beacon 只支持 POST 方法，且请求体类型决定自动设置的 Content-Type（如字符串 → text/plain；FormData → multipart/form-data；URLSearchParams → application/x-www-form-urlencoded）。

Alibabacloud Sdk Client Initialization For Java

在 Java 中初始化和管理阿里云 SDK客户端。包括单例模式、线程安全、endpoint 与 region 配置、VPC 终端节点、同步与异步等。

下载

推荐的使用时机和最佳实践

不要等到 unload 再调用，应尽早准备并在 visibilitychange 或 pagehide 中触发：

pagehide 比 unload 更可靠（支持缓存页面如安卓 Chrome 的后台恢复）
visibilitychange 可捕获用户切走标签页的场景（配合 document.hidden 判断）
建议在页面初始化时监听，并在首次隐藏/卸载时发送一次，避免重复
发送前尽量压缩数据（Beacon 有大小限制，Chrome 约 64KB，Firefox 约 128KB）

示例：

let sent = false;
<p>function sendAnalytics() {
if (sent || !navigator.sendBeacon) return;
const payload = new URLSearchParams();
payload.set('page', location.pathname);
payload.set('time_on_page', Math.round(performance.now() - startTime));
navigator.sendBeacon('/track', payload);
sent = true;
}</p><p>window.addEventListener('pagehide', sendAnalytics);
window.addEventListener('visibilitychange', () => {
if (document.visibilityState === 'hidden') sendAnalytics();
});
</p>

服务端接收注意事项

后端需能处理 Beacon 发来的 POST 请求，注意以下几点：

Beacon 不会等待响应，所以服务端无需返回内容（但必须返回 HTTP 2xx 状态码，否则控制台可能报错）
若用 URLSearchParams 或 FormData，按对应 Content-Type 解析；若用纯字符串，建议用 text/plain 接收并手动解析 JSON
不要在 Beacon 请求中做耗时操作（如写磁盘、远程调用），它运行在浏览器后台，超时或失败无反馈