刷新页面前, 我们能够将请求发出么

背景

用户离开页面时, 浏览器会取消正在发出的异步请求。这是因为默认情况下,异步请求是非阻塞的。一旦请求被放入队列中,网络请求交给浏览器的网络线程 (网络线程不会阻塞 JS 线程)。这意味着当页面进入 "终止" 状态时, 它们可能被销毁。 那究竟有方案能够保证页面刷新前接口的调用么?

方案

javascript 复制代码
// 监听页面卸载事件(刷新/关闭)
window.addEventListener('beforeunload', () => {
  const data = JSON.stringify({ event: 'refresh', time: Date.now() });
  navigator.sendBeacon('/api/log', data);
});

优势

  • 专为页面卸载场景设计
  • 不阻塞页面卸载过程
  • 能处理大容量数据(现代浏览器支持最高64KB)
  • 自动处理内容类型(可发送Blob/字符串)

参考 MDN 的介绍

navigator.sendBeacon

方案2:使用 fetch() + keepalive

javascript 复制代码
window.addEventListener('beforeunload', async () => {
  try {
    await fetch('/api/log', {
      method: 'POST',
      body: JSON.stringify({ action: 'page_refresh' }),
      keepalive: true,  // 关键参数
      headers: { 'Content-Type': 'application/json' }
    });
  } catch (e) {
    console.error('请求失败,但页面已卸载', e);
  }
});

注意事项

  1. 仅适用于 Chrome/Edge(Firefox 不支持)
  2. 请求头受限(无法设置 Content-Length 等)
  3. 响应不可读取(设计上只保证发送)

最终选择方案 2 实现需求。

相关推荐
会飞的小菠菜2 天前
快速将多个PPT、PPTX幻灯片统一转换成浏览器能直接打开的HTML网页文件
html·powerpoint·浏览器·ppt·格式转换·网页
Sosse4 天前
window.close()失效 + Chrome浏览器调试线上代码
前端·浏览器
用户407385588084 天前
TabFlow: 一款简洁的 Chrome 标签页域名分类器
chrome·浏览器
小刘鸭地下城6 天前
深入探索浏览器缓存键:一次HTTP强缓存失效引发的思考
浏览器
奇舞精选7 天前
CEF框架实践:构建Mac混合桌面应用
macos·浏览器
Keepreal4967 天前
浏览器同源策略与跨域解决方案
安全·浏览器
不一样的少年_8 天前
别再无脑装插件了!你的浏览器扩展可能正在“偷家”
前端·安全·浏览器
Keepreal4968 天前
浏览器事件循环
javascript·浏览器
pc大老9 天前
如何修复 Google Chrome 上的白屏问题
前端·网络·chrome·浏览器·谷歌
子兮曰13 天前
现代滚动技术深度解析:scrollTo与behavior属性的应用与原理
前端·javascript·浏览器