vue页面回退或关闭,发送请求不中断问题
作者:sonicwater
这篇文章主要介绍了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
就可确保浏览器关闭或回退,调用接口的链接不会被关闭,调用成功。