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

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

news/2025/11/7 13:44:15/文章来源:https://www.cnblogs.com/yxysuanfa/p/19199463

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

然而，这看似简单的需求，在实践中却充满了挑战。传统的异步请求（如 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);
  }
});