vue3-mgt-template/public/md/sendBeacon.md

`sendBeacon` 是一个用于在网页与服务器之间异步传输小数据的 Web API，特别适用于在页面卸载时发送数据。这种方法的优点是即使用户离开页面或关闭浏览器，数据也能被可靠地发送。

### 使用场景

- 记录分析数据（如页面浏览、用户行为等）。
- 发送用户反馈或事件数据。
- 发送数据时不影响页面的性能，尤其是在卸载期间。

### 语法

```javascript
navigator.sendBeacon(url, data);
```

#### 参数

- **`url`**: 要发送数据的服务器端点（必须是同源或允许跨源的URL）。
- **`data`**: 可选，发送的数据，可以是 `ArrayBuffer`, `Blob`, `DOMString` 或 `FormData`。

### 返回值

- 返回 `true` 表示请求已成功添加到发送队列，返回 `false` 表示请求失败（通常是因为目标 URL 不可达）。

### 示例代码

```javascript
// 发送数据示例
const url = 'https://example.com/track';
const data = JSON.stringify({ action: 'page_exit', timestamp: Date.now() });

window.addEventListener('beforeunload', function() {
    const success = navigator.sendBeacon(url, data);
    console.log('Beacon sent:', success);
});
```

### 说明

1. **事件监听**: 通过 `beforeunload` 事件监听用户离开页面的行为，在页面卸载之前调用 `sendBeacon`。
2. **数据格式**: 在这个示例中，数据被转换为 JSON 字符串以便发送。
3. **异步特性**: `sendBeacon` 方法不会阻塞页面的关闭，这意味着它不会延迟用户的离开。

### 注意事项

- **数据大小**: `sendBeacon` 适合发送小量数据，通常不应超过 64 KB。
- **网络请求**: `sendBeacon` 会在后台发送请求，因此不需要等待响应。
- **支持性**: 现代浏览器都支持 `sendBeacon`，但在较旧的浏览器中可能不支持。

### 小结

`sendBeacon` 提供了一种有效的方式来在页面卸载时或用户离开时发送数据，确保数据的传输不会影响用户体验。如果你需要在用户离开时记录重要的数据或事件，`sendBeacon` 是一个合适的选择。如果有其他问题或需要更详细的信息，请告诉我！