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

背景

用户离开页面时, 浏览器会取消正在发出的异步请求。这是因为默认情况下,异步请求是非阻塞的。一旦请求被放入队列中,网络请求交给浏览器的网络线程 (网络线程不会阻塞 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 实现需求。

相关推荐
不一样的少年_12 小时前
1024程序员节:用不到100行代码做个“代码雨屏保”装X神器(附源码)
前端·javascript·浏览器
Juchecar17 小时前
翻译:ChatGPT 的 Atlas:一款反网络的浏览器
浏览器
小时前端18 小时前
面试官:线上应用内存持续泄漏,你如何快速定位并止血?
前端·浏览器
萌萌哒草头将军2 天前
重磅!首个 AI 浏览器发布,ChatGPT Atlas 浏览器问世!🚀🚀🚀
chrome·浏览器·v8
不一样的少年_2 天前
她说想要浪漫,我把浏览器鼠标换成了柴犬,点一下就有烟花(附源码)
前端·javascript·浏览器
一点一木3 天前
ChatGPT Atlas 发布:把 AI 直插进浏览器的一次重构
人工智能·chatgpt·浏览器
前端小蜗3 天前
🌐 利用Chrome内置 【AI翻译 API】实现国际化
前端·javascript·浏览器
小时前端3 天前
面试官:我为什么总在浏览器存储问题上追问IndexedDB?
前端·浏览器
不一样的少年_5 天前
你家孩子又偷玩网页游戏? 试试这个防沉迷工具
前端·javascript·浏览器
UpYoung!6 天前
技术贴!【谷歌浏览器】实用工具推荐之谷歌浏览器(Google Chrome)离线纯净版完全安装指南:告别广告与捆绑骚扰
chrome·运维开发·谷歌浏览器·浏览器·谷歌·实用工具·办公学习神器