在用户刷新或关闭页面的时候,需要发送给后端一条请求传递某些信息,正常使用页面卸载的事件监听或vue生命周期钩子函数,如:
window.addEventListener('beforeunload',()=> {
// do something
})
但测试发现:
- 刷新页面时基本满足要求
- 关闭页面时,后台接收不到请求
搜索相关信息发现,对于现在的Chrome来说,在页面导航离开或者被用户关闭时,不允许发送同步的XHR请求,涉及到的事件有beforeunload、unload、pagehide 和 visibilitychange。
navigator.sendBeacon()
后来通过搜索发现有个接口可以实现,就是 navigator.sendBeacon()
语法
navigator.sendBeacon(url,data)
参数
url表明data将要被发送到的网络地址。data参数是将要发送的数据
返回值
当用户代理成功把数据加入传输队列时,sendBeacon()方法将返回true,否则返回fasle。