Beacon API 无法获取服务器响应，因其设计为单向无响应机制，仅在页面卸载时可靠发送数据且不阻塞流程；它不返回 Promise、不触发事件、不提供回调，仅返回布尔值表示是否成功入队。
Beacon API 不能取回数据 —— 它是单向、无响应的发送机制，浏览器不提供回调、不返回 Response，也不支持读取服务器返回内容。
为什么 Beacon API 发完收不到响应？
Beacon 的设计目标就是「发完就走」：在页面卸载（如关闭标签页、导航跳转、刷新）时可靠发出请求，且不阻塞卸载流程。因此它刻意舍弃了所有接收能力：
- 没有
Promise，没有then()或catch() - 不触发
fetch的任何事件（load、error等） -
navigator.sendBeacon()只返回true（成功排队）或false（失败，如 URL 超长、跨域被拒） - 服务器即使返回
200 OK并带 JSON 内容，前端也完全无法访问
想发数据又需要服务端反馈？换方案
如果必须拿到服务端返回（比如确认日志 ID、获取 token、校验结果），navigator.sendBeacon() 不适用，应改用：
-
普通
fetch()：页面未卸载前使用，配合AbortSignal.timeout()防卡顿 -
同步
XMLHttpRequest（已废弃，仅作说明）：不推荐，会阻塞页面卸载，已被现代浏览器限制 - Service Worker + Background Sync（进阶）：适合离线场景，但需注册 SW，且仍无法在卸载瞬间获响应
示例：用 fetch() 替代 beacon 获取响应
立即学习“前端免费学习笔记（深入）”；
fetch('/api/log', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ event: 'page_exit', time: Date.now() }),
signal: AbortSignal.timeout(3000)
})
.then(r => r.json())
.then(data => console.log('server replied:', data))
.catch(err => console.warn('log failed:', err));Beacon 的唯一正确用法：只发不收
Beacon 的价值在于「尽力而为地发出去」，典型适用场景：
- 用户行为埋点（点击、停留时长、错误上报）
- 页面卸载前的清理通知（如释放锁、标记在线状态为离线）
- 无需确认的统计类请求（PV/UV、A/B 实验曝光）
关键实操注意点：
- 必须用
POST方法，且body类型仅支持ArrayBufferView、Blob、FormData、URLSearchParams、USVString—— 不能直接传 plain object - 跨域请求受 CORS 限制，但 beacon 不触发预检（
OPTIONS），所以服务端需明确允许（Access-Control-Allow-Origin: *） - URL 最大长度约 64KB（各浏览器略有差异），超长会静默失败（
sendBeacon()返回false）
示例：正确发送结构化日志
const data = new URLSearchParams();
data.append('event', 'unload');
data.append('url', window.location.href);
data.append('dur', performance.now() - startTime);
// ✅ 正确：返回 true 表示已入队
const sent = navigator.sendBeacon('/collect', data);
if (!sent) console.warn('beacon send failed');
真正容易被忽略的是：Beacon 不是「轻量 fetch」，它是不可逆的单程信使。一旦你写了 sendBeacon()，就别再想着 parse response —— 那个 response 根本不存在于 JS 运行时里。
