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就可确保浏览器关闭或回退，调用接口的链接不会被关闭，调用成功。

总结

您可能感兴趣的文章:

vue-cli3访问public文件夹静态资源报错的解决方式
这篇文章主要介绍了vue-cli3访问public文件夹静态资源报错的解决方式，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2020-09-09
vue中 v-for循环的用法详解
这篇文章主要介绍了vue中 v-for循环的用法详解,本文通过实例代码的形式给大家介绍的非常详细，具有一定的参考借鉴价值，需要的朋友可以参考下
2020-02-02
Vue Router的懒加载路径的解决方法
这篇文章主要介绍了Vue Router的懒加载路径的解决方法，非常不错，具有一定的参考借鉴价值,需要的朋友可以参考下
2018-06-06
Vue生态的新成员Pinia的详细介绍
本文主要介绍了Vue生态的新成员Pinia的详细介绍，文中通过示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2022-01-01
浅谈super-vuex使用体验
super-vuex是一套用于简化Vuex的数据架构。这篇文章主要介绍了浅谈super-vuex使用体验，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2018-06-06
vue打包npm run build时候界面报错的解决
这篇文章主要介绍了vue打包npm run build时候界面报错的解决，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2020-08-08
el-upload 文件上传组件的使用讲解
Upload 上传文件这个功能是我们在企业实际开发当中使用频率是非常高的这样一个文件上传的功能,element ui组件组也给我们提供了上传的组件,本文给大家介绍el-upload 文件上传组件的使用,感兴趣的朋友跟随小编一起看看吧
2024-02-02
Vue3优雅的实现跨组件通信的常用方法总结
开发中经常会遇到跨组件通信的场景,props 逐层传递的方法实在是太不优雅了,所以今天总结下可以更加简单的跨组件通信的一些方法,文中通过代码实例讲解的非常详细,需要的朋友可以参考下
2023-11-11
Vue3使用video-player实现视频播放
video-player是一个基于video.js的视频播放器组件,本文主要介绍了Vue3使用video-player实现视频播放,具有一定的参考价值,感兴趣的可以了解一下
2024-01-01
浅谈vuex为什么不建议在action中修改state
这篇文章主要介绍了浅谈vuex为什么不建议在action中修改state，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2020-02-02