目录
需求背景:
记录登录时长,退出/异常退出的时候请求退出接口,完成退出标记,后端统计时长。
踩坑记录:
- 在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)
}