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页面刷新成功发送停止内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
sort是数组的一个排序方法。学习js的朋友可以参考下。2011-07-07
使用代码实现当删除单词时就一次性删除整个单词，有个demo，相信大家看过之后就知道是什么意思了2014-09-09
在JavaScript中,构造函数和原型链是实现面向对象编程的核心机制,它们共同构成了JavaScript的类继承模型,这篇文章主要介绍了JavaScript构造函数与原型、原型链的相关资料,需要的朋友可以参考下2026-03-03
这篇文章主要介绍了JS保留两位小数 四舍五入函数的小例子，有需要的朋友可以参考一下2013-11-11
腾讯新闻详情页有一个事件进展效果, 觉得挺有意思. 于是, 就有了本文的效果: 按数据源均分时间点幻灯. 花了三个多小时写的, 当然, 包括样式与调试. 兼容主流。2010-12-12
Axios是一个基于Promise的HTTP客户端,专为浏览器和node.js设计,本文主要为大家详细介绍了Axios的具体使用,感兴趣的小伙伴可以跟随小编一起学习一下2024-01-01
本文汇总了Javascript中两个对象的比较、不同类型的比较以及对象跟原始值的比较，并进行了实例演示，希望能帮助到有需要的朋友们。2016-07-07
这篇文章主要介绍了微信小程序上拉加载和下拉刷新功能实现,本文通过实例代码给大家介绍的非常详细,感兴趣的朋友跟随小编一起看看吧2024-06-06
以前有人会说，new Function的方式是几乎与eval相等，今天我查了一下，确实是不同的东西，说这句话的人太不负责了。关于eval和new function，得到的结果都是一致的，都会叫你不要去使用它们。所以结论就是“不得不”才使用2012-12-12
这篇文章主要为大家详细介绍了小程序实现自定义多层级单选和多选，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-04-04
最新评论