vue页面回退或关闭,发送请求不中断问题
vue页面回退或关闭,发送请求不中断
最近做项目有个需求
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
就可确保浏览器关闭或回退,调用接口的链接不会被关闭,调用成功。
总结
相关文章
详解让sublime text3支持Vue语法高亮显示的示例
本篇文章主要介绍了让sublime text3支持Vue语法高亮显示的示例,非常具有实用价值,需要的朋友可以参考下2017-09-09Vue报错:Injection "xxxx" not found的解决办法
这篇文章主要给大家介绍了关于Vue报错:Injection "xxxx" not found的解决办法,文中通过图文将解决的办法介绍的非常详细,对大家的学习具有一定的参考借鉴价值,需要的朋友可以参考下2023-07-07Vue中scrollIntoView()方法详解与实际运用举例
这篇文章主要给大家介绍了关于Vue中scrollIntoView()方法详解与实际运用举例的相关资料,该scrollIntoView()方法将调用它的元素滚动到浏览器窗口的可见区域,需要的朋友可以参考下2023-12-12
最新评论