JavaScript 中异步日志上报怎么利用 navigator.sendBeacon 避免页面卸载时 Promise 被终止-js教程-PHP中文网

navigator.sendbeacon() 能稳定上报卸载日志，因其不依赖 promise 与事件循环，而是将数据交由浏览器底层网络栈“尽力送达”；需在 pagehide 等时机调用，传 urlsearchparams 等合规格式，后端适配 text/plain 解析并做幂等处理。

javascript 中异步日志上报怎么利用 navigator.sendbeacon 避免页面卸载时 promise 被终止

在页面卸载（如用户关闭标签页、跳转、刷新）时，常规的异步请求（如 fetch 或 XMLHttpRequest）很可能被浏览器中止，导致日志上报失败。而 navigator.sendBeacon() 是浏览器专为此场景设计的 API：它在页面即将卸载时**异步发送数据且不阻塞卸载流程**，且即使 Promise 已 resolve/reject，只要调用过 sendBeacon，数据仍会尽力发出。

为什么 sendBeacon 能绕过 Promise 终止问题

sendBeacon 不返回 Promise，也不依赖事件循环；它把数据交给浏览器底层网络栈后立即返回 true/false，由浏览器在后台「尽力送达」——这和 Promise 的生命周期完全解耦。即使当前 JS 执行栈已清空、Promise 已被 GC 回收，只要数据已交由 sendBeacon，就不会因页面卸载而丢失。

OpenJDK 24

下载

如何正确使用 sendBeacon 上报日志

只支持 POST 方法，且数据类型限于 ArrayBufferView、Blob、FormData、URLSearchParams 或纯字符串（不能是普通对象）
必须在 beforeunload、pagehide 或 visibilitychange（hidden 状态）等卸载相关时机调用
推荐优先监听 pagehide（兼容性更好，且能捕获 iOS Safari 后台标签页冻结）
上报前应序列化日志为字符串或构造 URLSearchParams，避免直接传对象

一个健壮的日志上报封装示例

以下代码兼顾兼容性、序列化与降级：

function reportLog(logData) {
  const url = '/api/log';
  const body = new URLSearchParams();
  Object.entries(logData).forEach(([k, v]) => {
    body.append(k, typeof v === 'object' ? JSON.stringify(v) : String(v));
  });

  // 尝试 sendBeacon
  if (navigator.sendBeacon && navigator.sendBeacon(url, body)) {
    return true;
  }

  // 降级：仅用于调试（实际卸载时 fetch 极大概率失败）
  if (process.env.NODE_ENV === 'development') {
    fetch(url, {
      method: 'POST',
      body,
      keepalive: true // 实验性，部分浏览器支持，但不如 sendBeacon 可靠
    });
  }
  return false;
}

// 在 pagehide 时触发
window.addEventListener('pagehide', () => {
  reportLog({
    type: 'page_exit',
    timestamp: Date.now(),
    url: window.location.href,
    referrer: document.referrer
  });
});