关闭/刷新浏览器，刷新页面发送请求解决方案

Posted 2022-11-23 哈娄

目录

需求背景：

踩坑记录：

最终方案：

---

需求背景：

记录登录时长，退出/异常退出的时候请求退出接口，完成退出标记，后端统计时长。

踩坑记录：

• 在onbeforeunload时机进行发送请求, 后加了关闭浏览器提醒弹窗(可取消关闭)功能, 导致此时机请求是不对的。
• 在onunload时机请求，关闭/刷新 浏览器操作时 发送的ajax会被浏览器取消掉，不会发出或者发送失败。
• 网上查找使用ajax同步，实践也会被取消掉不会发出请求。

最终方案：navigator.sendBeacon

navigator.sendBeacon(url, data)。使用blob方法传对象格式参数给后端。(请求记录可使用抓包工具查看, 浏览器network看不到)

• url

  url 参数表明 data 将要被发送到的网络地址。

• data 可选

  data 参数是将要发送的 ArrayBuffer、ArrayBufferView、Blob、DOMString、FormData 或 URLSearchParams 类型的数据

此方法是无阻塞请求，不会影响页面的交互卡顿

window.onunload = () => 
        const data =  cno: 222 
        const blob = new Blob([ JSON.stringify(data) ], 
            type: 'application/json; charset=UTF-8',
        )
        navigator.sendBeacon(url, blob)