vue.js

关注公众号 jb51net

关闭
首页 > 网络编程 > JavaScript > javascript类库 > vue.js > vue页面回退或关闭,发送请求不中断

vue页面回退或关闭,发送请求不中断问题

作者:sonicwater

这篇文章主要介绍了vue页面回退或关闭,发送请求不中断问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教

vue页面回退或关闭,发送请求不中断

最近做项目有个需求

video 播放视频中,点击浏览器 回退 按钮 调用接口 统计观看时长。

就是这个看似简单的事,折腾我两天,最后终于搞定。

首先 vue 在回退或关闭页面之前调用某个方法

mounted() {
  window.addEventListener('beforeunload', e => this.pause(e))
},
destroyed() {
  window.removeEventListener('beforeunload', e => this.pause(e))
}

pause 方法中,要调用接口统计视频观看时长。

这时候问题出现了

在浏览器回退(或关闭)后,axios 调用接口时被中断,没调用成功。

搜索问题发现需要同步调用接口。后来用 async await 调用 axios

甚至用原生 XMLHttpRequest 对象同步调用接口,均以失败告终。

原来 Chrome 浏览器不允许页面关闭期间进行同步调用XMLHTTPRequest() 方法,这条规则适用于 beforeunloadunloadpagehidevisibilitychange 这些 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
  });
}

总结

您可能感兴趣的文章:
阅读全文