vue页面回退或关闭, 发送请求不中断
最近做项目有个需求: video 播放视频中,点击浏览器回退按钮调用接口统计观看时长。
·
最近做项目有个需求:
video
播放视频中,点击浏览器回退
按钮调用接口
统计观看时长。
就是这个看似简单的事,折腾我两天,最后终于搞定。
首先 vue
在回退或关闭页面之前调用某个方法
mounted() {
window.addEventListener('beforeunload', e => this.pause(e))
},
destroyed() {
window.removeEventListener('beforeunload', e => this.pause(e))
}
mounted
组件挂载生命周期 让window
监听beforeunload
事件,并给对应方法。destroyed
销毁生命周期 让window
去除监听beforeunload
事件。
在 pause
方法中,要调用接口统计视频观看时长。
这时候问题出现了!
在浏览器回退(或关闭)后,axios
调用接口时被中断,没调用成功。搜索问题发现需要同步调用接口。后来用 async await
调用 axios
。 甚至用原生 XMLHttpRequest
对象同步调用接口,均以失败告终。
原来 Chrome
浏览器不允许页面关闭期间进行同步调用XMLHTTPRequest()
方法,这条规则适用于 beforeunload
、unload
、pagehide
和 visibilitychange
这些 API
。
为了保证页面在卸载时可以成功调用接口请求数据,官方建议使用 sendBeacon()
或者 Fetch keep-alive
。
以 Fetch keep-alive
为例:
pause() {
let url = process.env.VUE_APP_BASE_URL + '/api/setData';
let data = {
...params // 一些参数
}
// fetch 调用接口
fetch( url, {
method: 'POST',
headers:{
'Accept': 'application/json',
'Content-Type': 'application/x-www-form-urlencoded',
'Authorization': 'Bearer ' + getToken() // getToken 返回 token
},
body: qs.stringify(data),
keepalive: true
});
}
fetch
方法不需要安装依赖,vue
中直接使用- 将
keepalive
设置为true
就可确保浏览器关闭或回退,调用接口的链接不会被关闭,调用成功。
更多推荐
已为社区贡献3条内容
所有评论(0)