页面卸载时AJAX请求失效问题求助（Chrome 104 Android）

AI 小北

2026-8-9

页面卸载时发送阅读时长请求失败的解决方案

在Chrome Android 104环境下，你用beforeunload事件结合同步AJAX发送请求失效的核心原因是：现代浏览器（尤其是移动端）为了优化页面卸载速度、避免阻塞用户操作，会限制甚至直接中断卸载阶段的同步请求。

下面是几种可行的解决办法：

方案1：使用`navigator.sendBeacon()`（推荐）

这是浏览器专门为页面卸载/后台场景设计的统计数据上报API，异步执行但浏览器会保证请求完成，不会阻塞页面卸载流程。

代码示例：

document.addEventListener('visibilitychange', function() {
  // 页面隐藏时就发送数据（覆盖切换标签、锁屏、卸载等场景）
  if (document.visibilityState === 'hidden') {
    const formData = new FormData();
    formData.append('report', 120); // 替换为实际计算的阅读时长
    navigator.sendBeacon('', formData); // 第一个参数填入你的接口URL
  }
});

说明：用visibilitychange替代beforeunload能覆盖更多用户离开场景，且数据发送时机更早，成功率更高；sendBeacon支持FormData、Blob或字符串格式，无法直接传JSON时用FormData封装即可。

方案2：用`fetch`结合`keepalive`选项

如果需要自定义请求头、发送JSON格式数据，可以借助fetch的keepalive参数：

document.addEventListener('visibilitychange', function() {
  if (document.visibilityState === 'hidden') {
    fetch('', {
      method: 'POST',
      body: JSON.stringify({ report: 120 }),
      headers: {
        'Content-Type': 'application/json'
      },
      keepalive: true
    });
  }
});

注意：keepalive有数据大小限制（通常为64KB），适合数据量不大的上报场景。