如何识别 keepalive: true 参数在页面卸载（Unload）时发送埋点数据的奇效-js教程-PHP中文网

keepalive: true 是唯一能让 POST/PUT/DELETE 请求在页面卸载后尽力发出的机制，但需满足方法限制、同步调用、序列化 body 等硬性条件，且无回调。

如何识别 keepalive: true 参数在页面卸载（unload）时发送埋点数据的奇效

keepalive: true 不是“奇效”，而是一种有明确边界、需严格配合使用场景的浏览器机制。它不能保证请求100%到达服务端，但确实是当前唯一能让 POST/PUT/DELETE 类请求在页面卸载后仍被浏览器尽力发出的方式。

为什么普通 fetch 在页面关闭时大概率失败

页面触发导航（如点击链接、调用 window.location.href =）、刷新或关闭标签页时，JavaScript 执行环境会快速终止。此时：

未完成的 fetch 请求会被强制中止，无论是否已发到网络层
XMLHttpRequest 同样失效；同步 XHR 虽能发出去，但会阻塞页面、触发浏览器警告，已被现代浏览器限制
await、.then()、setTimeout 回调等异步逻辑全部丢弃，无法监听结果

keepalive: true 的真实作用与硬性要求

它不是魔法开关，而是向浏览器网络栈提交一个“后台发送任务”。生效必须同时满足：

必须是带 body 的请求：仅支持 POST / PUT / DELETE；GET 不允许设 keepalive（语法报错）
必须在卸载前同步调用：只能在 beforeunload、pagehide 或跳转前的同步代码块中执行，不可 await，不可包装成 Promise
不返回可等待的 Promise：调用即“递交”，后续无成功/失败回调，catch 仅用于调试，生产环境通常忽略
body 数据需已序列化：如 JSON.stringify()、FormData、Blob 等，不能传原始对象

和 sendBeacon 对比：选哪个更稳？

两者目标一致，但行为细节不同：

sendBeacon：专为卸载设计，兼容性稍弱（IE 不支持），数据必须是二进制兼容类型（Blob、FormData、URLSearchParams），且只支持同源 URL
fetch + keepalive：支持跨域（需服务端配 CORS），能传标准 JSON，但对请求方法和调用时机更敏感
实践中建议降级使用：优先 try navigator.sendBeacon，失败则 fallback 到 fetch(..., { keepalive: true })

一个可用的埋点上报函数示例

以下代码兼顾可靠性与简洁性，适用于页面退出类事件（如离开页面、关闭标签）：

function reportExit(data) {
  const payload = JSON.stringify({
    ...data,
    timestamp: Date.now(),
    url: location.href
  });

  // 优先用 sendBeacon
  if (navigator.sendBeacon) {
    const blob = new Blob([payload], { type: 'application/json' });
    return navigator.sendBeacon('/api/log', blob);
  }

  // 降级：fetch + keepalive（注意：必须同步调用）
  try {
    fetch('/api/log', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: payload,
      keepalive: true
    });
    return true;
  } catch {
    return false;
  }
}

// 绑定 pagehide（比 beforeunload 更可靠，尤其移动端）
window.addEventListener('pagehide', () => {
  reportExit({ event: 'page_exit', reason: 'user_close_tab' });
});