当前位置：首页 > news >正文

如何在关闭浏览器标签前，可靠地发送 HTTP 请求？

news 2025/10/11 5:49:56

我们经常遇到一个经典场景：用户即将关闭页面或浏览器标签，而我们需要在此刻抓住最后的机会，向服务器发送一些重要信息。

然而，这看似简单的需求，在实践中却充满了挑战。传统的异步请求（如 fetch 或 XMLHttpRequest）在页面卸载事件中极有可能被浏览器中断，导致请求失败。

问题的根源：为什么常规请求会失败？

当用户关闭一个标签页时，浏览器会触发一系列页面卸载（Unload）事件，如 pagehide 和 unload。

在这个过程中，任何在 unload 事件处理器中发起的标准异步 fetch 或 XMLHttpRequest 请求都会面临一个问题：请求刚刚发出，页面就已经被销毁了。

由于页面的 JavaScript 执行环境已不复存在，浏览器没有义务继续完成这个请求，因此会主动取消它。

过去，开发者为了解决这个问题，会使用同步的 XMLHttpRequest。它会强制阻塞主线程，直到请求完成。这种方法虽然“有效”，但对用户体验是毁灭性的——它会导致浏览器 UI 卡死，页面无法响应，直到网络请求结束。

那么，我们该如何在不破坏用户体验的前提下，可靠地发送这“最后一封信”呢？

现代解决方案一：`navigator.sendBeacon()`

navigator.sendBeacon() 是 W3C 专门为解决此类问题而设计的 API。它的核心使命就是：以异步、非阻塞的方式，可靠地将少量数据发送到服务器。

工作原理

当我们调用 sendBeacon() 时，浏览器会将这个请求添加到一个内部队列中，然后立即返回，不会阻塞页面卸载。浏览器会保证在合适的时机（例如在后台）发送这个请求，即使发起请求的页面已经关闭。

特点

可靠性高：由浏览器保证发送，不受页面卸载影响
异步非阻塞：不影响用户关闭页面的速度和体验
使用简单：API 非常直观
数据有限制：只能单向发送 POST 请求，且无法自定义请求头（Headers）

代码示例

假设我们需要在用户离开页面时，发送一条包含页面停留时间的分析日志。

// 推荐使用 'pagehide' 事件，它比 'unload' 更可靠
window.addEventListener('pagehide', (event) => {// event.persisted 为 true 表示页面进入了往返缓存 (bfcache)，并未真正卸载// 这种情况下我们通常不发送信标if (event.persisted) {return;}const analyticsData = {timeOnPage: Math.round(performance.now()),lastAction: 'close_tab',};// 将数据转换为 Blob，这是 sendBeacon 支持的格式之一const blob = new Blob([JSON.stringify(analyticsData)], {type: 'application/json; charset=UTF-8',});// 使用 sendBeacon 发送数据// 该方法会返回 true (成功加入队列) 或 false (数据过大或格式错误)const success = navigator.sendBeacon('/log-analytics', blob);if (success) {console.log('分析日志已成功加入发送队列。');} else {console.error('无法发送分析日志。');}
});

现代解决方案二：`fetch()` 与 `keepalive: true`

fetch API 作为现代网络请求的基石，也提供了一种优雅的解决方案。通过在 fetch 的 init 对象中设置 keepalive: true，我们可以告诉浏览器：“这个请求很重要，请在页面卸载后继续完成它。”

工作原理

fetch({ keepalive: true }) 的工作方式与 sendBeacon 类似。它将一个 fetch 请求标记为“持续活动”，使其生命周期可以超越当前页面。浏览器会像处理 sendBeacon 请求一样，在后台处理它。

特点

灵活性高：相比 sendBeacon，它支持更多的 HTTP 方法（如 POST, PUT 等），并允许有限的请求头自定义
API 统一：如果我们项目中已经大量使用 fetch，使用 keepalive 可以保持代码风格一致
同样无法处理响应：和 sendBeacon 一样，由于页面已经关闭，我们无法在前端读取或处理服务器返回的响应

代码示例

假设我们需要在用户关闭页面时，自动保存文本编辑器中的草稿。使用 PUT 请求可能更符合 RESTful 风格。

window.addEventListener('pagehide', (event) => {if (event.persisted) {return;}const draftContent = document.getElementById('editor').value;if (!draftContent) return;const draftData = {content: draftContent,timestamp: Date.now(),};// 使用 fetch 和 keepalive: true// 注意：即使请求成功，这里的 .then 和 .catch 也可能不会执行，因为页面正在卸载try {fetch('/api/drafts/save', {method: 'PUT',headers: {'Content-Type': 'application/json',},body: JSON.stringify(draftData),// 这是关键！keepalive: true,});console.log('保存草稿的请求已提交。');} catch (e) {// 这个 catch 块很可能不会捕获到网络错误console.error('提交保存草稿请求时发生错误:', e);}
});