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使用ActiveXObject控件操作文件的相关技巧,具有一定参考借鉴价值,需要的朋友可以参考下2015-08-08
这篇文章主要介绍了原生javascript实现简单的datagrid数据表格的方法，效果十分棒,需要的朋友可以参考下2015-01-01
上一篇文章，我们讲解了图像处理中的膨胀和腐蚀函数，这篇文章将做边缘梯度计算函数，感兴趣的朋友可以了解下2013-01-01
本篇文章是基于jquery实现导航菜单高亮显示，当点击不同导航菜单实现当前点击的菜单是高亮的，有需要的朋友可以关注下本文2015-08-08
JScript的条件编译...2007-05-05
这篇文章主要为大家介绍了JS中生成随机数的用法，为大家提供了相关函数的使用方法，感兴趣的朋友可以参考一下2016-01-01
这篇文章主要介绍了微信小程序页面间传值与页面取值操作,结合实例形式分析了微信小程序页面间传值及页面取值操作相关实现技巧与操作注意事项,需要的朋友可以参考下2019-04-04
下面小编就为大家带来一篇详谈js原型继承的一些问题。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-09-09
下面小编就为大家带来一篇浅谈JavaScript:执行环境、作用域及垃圾回收。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2016-05-05
有几种方式，但都不完美 其一:不断循环，直到达到指定时间、其二:用xhr同步请求后台程序，比如传2000过去，后台就sleep 2秒后再返回，这种方式也有缺点，当N多客户端都请求后台时，一直保持连接http开销很大,感兴趣的朋友可以了解下啊2013-01-01
最新评论