H5浏览器关闭同时向服务端发送请求

Mr.LTao

已于 2022-08-19 11:41:29 修改

阅读量525

点赞数

文章标签： javascript 前端 vue.js

于 2022-08-19 11:40:18 首次发布

本文链接：https://blog.csdn.net/weixin_43625704/article/details/126421642

版权

本文探讨了在H5浏览器关闭时如何利用fetch API向服务端发送请求，重点介绍了beforeunload和unload事件，以及针对iOS的pagehide处理。fetch方法基于Promise，为替换xhr而设计，通过设置keepalive选项，能在页面卸载后继续保持连接。

摘要由CSDN通过智能技术生成

beforeunload和unload ：刷新页面或者关闭卸载页面时都执行

ios要做单独做处理，使用pagehide

mounted(){
 if (getUserAgent() === 'IOS') {
      window.addEventListener('pagehide', e => this.unloadHandler(e))
    } else {
      window.addEventListener('unload', e => this.unloadHandler(e))
    }
}



 destroyed() {
    if (getUserAgent() === 'IOS') {
      window.removeEventListener('pagehide', e => this.unloadHandler(e))
    } else {
      window.removeEventListener('unload', e => this.unloadHandler(e))
    }
  }



unloadHandler(e){
   this.commitTryWatchTime()
}




    // 上报试看时长
async commitTryWatchTime() {
    const params = {}
      params.sign = getSignStr(params)
      const formdata = new FormData()
      for (const k in params) {
        formdata.append(k, params[k])
      }
      const url = process.env.VUE_AP