方法一：使用Navigator sendBeacon进行请求Navigator.sendBeacon()

navigator.sendBeacon()

Navigator.sendBeacon() - Web API 接口参考 | MDN

方法可用于通过 HTTP POST 将少量数据异步传输到 Web 服务器。

缺点：无法配置请求头导致请求424 目前我还不会配置

方法二：使用fetch() 的 keep-alive:true 进行请求

window.addEventListener('beforeunload', (e)=>{//navigator.sendBeacon(`******`，data)fetch(`*****`,{keepalive:true,headers:{Authorization:'Bearer ' + store.getters.access_token,// token'TENANT-ID':store.getters.TENANT_ID,VERSION:store.getters.VERSION}})
})

缺点：不清楚为啥会多次调用可能是多次进入这个页面没有remove监听事件

就是因为没有remove监听事件vue项目中在beforeDestroy中remove一下监听事件就不会出现重复请求的情况了

页面关闭时发起接口请求相关推荐

vue监听浏览器刷新和关闭事件，并在页面关闭/刷新前发送请求
vue监听浏览器刷新和关闭事件,并在页面关闭/刷新前发送请求 1.需求背景: 2.需求分析: 3.实现方式: 4.实现方式解析: 1)浏览器页面事件基础 2)在mounted监听beforeunloa ...
关于IOS无法在微信浏览器页面关闭时调用ajax问题
经测试,以下方法为监听ios页面关闭的方式 window.addEventListener('pagehide', function () {//页面关闭时触发 }); 但上述方法内无法调用ajax. ...
【Web技术】1486- 在页面关闭时提交监控数据的4个解决方案
概览本文以 "前端监控上报数据" 的业务场景,重点解析在页面实例关闭时,如何将监控数据上传到服务端的解决方案. 其中,涉及到4种方案,分别为: 同步XMLHttpReques ...
【Web技术】1424- 4 种在页面关闭时上传监控数据的解决方案
来自:掘金,作者:我是leon 链接:https://juejin.cn/post/7106365076197605413 概览本文以 "前端监控上报数据" 的业务场景,重点解析 ...
LayUi引入JSON文件进行表格重载时出现接口请求异常
标题 LayUi引入JSON文件进行表格重载时出现接口请求异常表格重载代码 HTML代码<table class="layui-hide" id="commodi ...
前端发起接口请求时报错：405 Method Not Allowed
当我们发起请求后,发现报错405,用调试工具查看根本没有发出请求,405就是接口不存在. 这里首先排除下是不是接口名写错了, 其次询问后端这个接口有没有同步再然后可能是HTTP调用方法错误,比如:定 ...
jquery1.4.4 ajax在页面关闭时无法abort,jquery ajax abort()的使用方法
jquery ajax abort()的使用方法由于使用的是jquery,挡在手册里没有找到关于.abort()方法,在网上搜索了一下,在http://ooxx.me/jquery-ajax-abo ...
js监测页面关闭发送Ajax请求（浏览器关闭注销用户，清空session）
说明: 需求为页面关闭发送一个ajax请求,使关闭浏览器及时清空session(浏览器关闭session并不会清空) 网站同时只能一个用户登录,同一账号后登录的用户不能把前一个登录的用户踢下线,有一个 ...
html页面获取关闭页面事件,html页面关闭事件
Onunload,onbeforeunload都是在刷新或关闭时调用,可以在 Onbeforeunload也是在页面刷新或关闭时调用,Onbeforeunload是正要去服务器读取新的页面时调用,此时 ...

页面关闭时发起接口请求

方法一：使用Navigator sendBeacon进行请求Navigator.sendBeacon()

navigator.sendBeacon()

方法二：使用fetch() 的 keep-alive:true 进行请求

页面关闭时发起接口请求相关推荐

最新文章

热门文章