使用 sendBeacon 发送数据

使用 Navigator.sendBeacon 发送数据非常简单。以下是使用 sendBeacon 发送数据的基本步骤：

一、引入 Navigator 对象

在使用 sendBeacon 之前，需要先引入 Navigator 对象。通常可以在代码的顶部或适当的位置引入 Navigator 对象，例如：

// 引入 Navigator 对象
const navigator = window.navigator;

二、确定发送的数据

确定要发送的数据。数据可以是字符串、对象、数组或其他可序列化的数据类型。例如，要发送一个包含用户信息的对象，可以这样定义数据：

const data = {
   
  userId: 123,
  userName: 'John Doe'
};

三、调用 sendBeacon 方法

使用 Navigator.sendBeacon 方法发送数据。该方法接受两个参数：目标 URL 和要发送的数据。例如：

// 调用 sendBeacon 方法发送数据
navigator.sendBeacon('/log', JSON.stringify(data));

在上面的示例中，/log 是目标 URL，可以根据实际需求进行修改。JSON.stringify(data) 将数据转换为 JSON 字符串，以便发送。

四、处理发送结果

sendBeacon 方法返回一个布尔值，表示数据是否成功发送。可以根据返回值进行相应的处理，例如：

// 处理发送结果
if (navigator.sendBeacon('/log', JSON.stringify(data))) {
   
  console.log('数据发送成功');
} else {
   
  console.log('数据发送失败');
}

需要注意的是，sendBeacon 方法的发送是异步的，不会阻塞页面的卸载或关闭。因此，无法直接获取发送的结果。但是，可以根据返回值进行简单的判断。

此外，sendBeacon 方法还有一些限制和注意事项：

1. 数据大小限制：不同的浏览器对发送的数据大小有不同的限制。一般来说，数据大小应在几 KB 到几十 KB 之间。如果数据过大，可能会导致发送失败。
2. 同源策略限制：sendBeacon 方法遵循同源策略，只能向同源的目标 URL 发送数据。如果目标 URL 与当前页面的源不同，可能会导致发送失败。
3. 浏览器兼容性：sendBeacon 方法在大多数现代浏览器中都得到支持，但在某些旧版本的浏览器中可能不支持。在使用之前，建议先检查浏览器的兼容性。

总的来说，sendBeacon 是一种在页面卸载或关闭时可靠发送数据的方法。它适用于一些需要在页面关闭后发送数据的场景，例如统计分析、错误报告等。在使用时，需要注意数据大小限制、同源策略限制和浏览器兼容性等问题。