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

背景

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

相关推荐
圆心角4 天前
浏览器垃圾回收机制-面试足够了
前端·浏览器·v8
拾光拾趣录7 天前
一个“全局变量”引发的线上事故
前端·浏览器
拾光拾趣录7 天前
一次诡异的登录失效
前端·浏览器
拾光拾趣录8 天前
为什么浏览器那条“假进度”救不了我们?
前端·javascript·浏览器
labixiong8 天前
浏览器是如何渲染页面的?概述浏览器渲染原理
前端·浏览器
FliPPeDround19 天前
🚀 CRXJS v2.0正式版发布:Chrome扩展开发新体验
前端·浏览器·vite
海底火旺20 天前
浏览器渲染全过程解析
前端·javascript·浏览器
拾光拾趣录20 天前
浏览器存储:从Cookie到IndexedDB
前端·浏览器·indexeddb
拾光拾趣录20 天前
前端静态资源本地缓存:从秒开到省流量
前端·性能优化·浏览器
yanlele20 天前
【实践篇】【01】我用做了一个插件, 点击复制, 获取当前文章为 Markdown 文档
前端·javascript·浏览器