vue页面回退或关闭,发送请求不中断问题
更新时间：2024年01月25日 09:50:16 作者：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就可确保浏览器关闭或回退，调用接口的链接不会被关闭，调用成功。
总结
相关文章
PrintJS是一个轻量级的JavaScript库,可以帮助我们轻松实现网页打印功能,它支持打印HTML元素、JSON数据、图片等多种格式,使用简单且功能强大,这篇文章主要介绍了vue页面打印printjs实现与进阶方案的相关资料,需要的朋友可以参考下2026-06-06
vue是法语中视图的意思，Vue.js是一个轻巧、高性能、可组件化的MVVM库，同时拥有非常容易上手的API。下面这篇文章主要给大家总结了Vue在开发过程中遇到的疑惑知识点,有需要的朋友可以参考借鉴，下面来一起看看吧。2017-01-01
这篇文章主要给大家介绍了关于Vue自定义v-has指令实现按钮权限判断的相关资料，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2021-04-04
这篇文章主要介绍了Vue3如何解决路由缓存问题(响应路由参数的变化),具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2024-03-03
函数式组件就是没有管理任何状态,也没有监听任何传递给它的状态,也没有生命周期方法,它只是一个接受一些 prop 的函数,下面这篇文章主要给大家介绍了关于Vue3封装全局函数式组件方法的相关资料,需要的朋友可以参考下2023-06-06
这篇文章主要介绍了Vue2路由router的安装和使用完整实例,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友参考下吧2025-05-05
Vue的.sync语法糖是一个用于双向数据绑定的指令,可以在子组件中用来监听父组件传递下来的props的变化,本文给大家介绍了在Vue中,.sync语法糖的使用方法,感兴趣的朋友跟着小编一起来学习吧2024-01-01
下面小编就为大家分享一篇Vuex中mutations与actions的区别详解，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-03-03
vant-list组件触发多次onload事件导致数据乱序的解决方案
这篇文章主要介绍了vant-list组件触发多次onload事件导致数据乱序的解决方案2023-01-01
这篇文章主要介绍了vue异步加载高德地图的实现，详细的介绍了异步加载的实现方法。小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-06-06
最新评论