JavaScript实现在页面刷新时成功发送停止请求
更新时间：2023年11月16日 09:55:00 作者：杨柒柒
最近接到一个需求,需要在页面刷新或者关闭浏览器标签页的时候触发停止当前sql的接口,所以本文小编给大家详细介绍了解决方案和实现代码,需要的朋友可以参考下
问题背景
最近接到一个需求，需要在页面刷新或者关闭浏览器标签页的时候触发停止当前sql的接口。
解决方案
首先想到生命周期函数beforeDestroy，但很可惜，beforeDestroy只是在组件被销毁时触发，关闭tab时进程都杀掉了，并不会触发。
然后，想到用beforeunload和unload获取到页面刷新或者关闭浏览器标签页的时机，并调用相应的接口。此时发现接口是发了，但是页面刷新时有了如下问题：
这是因为页面刷新会自动取消axios的异步请求。
当然此时也有解决方案，比如用原生的XMLHttpRequest，设置为同步请求，对于ajax，设置$.ajax({ url: "some.php", async: false})即可同步请求。
但是改成同步请求后会阻碍页面的卸载，也就是说如果请求很慢，你明明点了刷新点了关闭，却会一直卡在当前界面中，用户体验就很不友好了。
最后通过查阅资料，找到了navigator.sendBeacon的方案，它是非阻塞请求，不会卡住。
当然它也有一定缺陷，不能在控制台的network找到请求，只能通过抓包或者后端日志的形式判断是否调用了该接口，好在此缺陷并不影响需求，又解决了请求卡住的问题，因此可用。
方案实现代码
_stopSql (sql) {
let formData = new FormData()
formData.append('regionId', regionId)
formData.append('dbName', dbName)
formData.append('sql', sql)
navigator.sendBeacon(`${origin}/stop`, formData)
}
到此这篇关于JavaScript实现在页面刷新时成功发送停止请求的文章就介绍到这了,更多相关JavaScript页面刷新成功发送停止内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
这篇文章主要介绍了JavaScript点击按钮后弹出透明浮动层的方法,可实现点击按钮弹出居中的透明浮动层的效果,涉及javascript操作鼠标事件及页面样式的相关技巧,需要的朋友可以参考下2015-05-05
本文主要介绍了JavaScript验证API的使用，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2023-02-02
Js on及addEventListener原理用法区别解析
这篇文章主要介绍了Js on及addEventListener原理用法区别解析,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下2020-07-07
这篇文章主要为大家介绍了JS中的提升机制变量提升函数提升实例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-09-09
js对文字进行编码涉及3个函数：escape,encodeURI,encodeURIComponent，相应3个解码函数：unescape,decodeURI,decodeURIComponent2010-02-02
JS操作图片(增,删,改) 例子，需要的朋友可以参考一下2013-04-04
addEventListener()和removeEventListener()追加事件和删除追加事件
这篇文章主要给大家介绍了关于addEventListener()和removeEventListener()追加事件和删除追加事件的相关资料，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2020-12-12
在javascript中随机数 math random如何生成指定范围数值的随机数
本篇文章给大家介绍在javascript中随机数math random如何生成指定范围数值的随机数，由于math.random生成了一个伪随机数，之后还要经过我们的后期处理。对随机数math random感兴趣的朋友一起了解了解吧2015-10-10
这篇文章主要给大家介绍了关于用JS获取Headers头部信息的相关资料,头部信息是在JavaScript中进行网络请求时常用的操作,Headers 头部信息包含了请求或响应的元数据,需要的朋友可以参考下2023-09-09
这篇文章主要介绍了JS实现匀速运动的代码实例，有需要的朋友可以参考一下2013-11-11
最新评论