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

背景

用户离开页面时, 浏览器会取消正在发出的异步请求。这是因为默认情况下,异步请求是非阻塞的。一旦请求被放入队列中,网络请求交给浏览器的网络线程 (网络线程不会阻塞 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 天前
localStorage 不够用?试试 IndexedDB !
前端·javascript·浏览器
知心宝贝5 天前
写了那么久的前端,你真的了解浏览器背后的“小动作“吗?
前端·程序员·浏览器
mCell7 天前
JavaScript 运行机制详解:再谈 Event Loop
前端·javascript·浏览器
鹏多多9 天前
js使用History.replaceState实现不刷新修改浏览器url
前端·javascript·浏览器
辰九九10 天前
Uncaught URIError: URI malformed 报错如何解决?
前端·javascript·浏览器
PineappleCoder12 天前
浏览器垃圾回收机制:V8引擎的“清道夫”是怎样工作的?
前端·浏览器
白雾茫茫丶13 天前
浏览器进程模型及事件循环机制
浏览器
OEC小胖胖14 天前
第七章:数据持久化 —— `chrome.storage` 的记忆魔法
前端·chrome·浏览器·web·扩展
OEC小胖胖14 天前
第六章:玩转浏览器 —— `chrome.tabs` API 精讲与实战
前端·chrome·浏览器·web·扩展