如何在页面刷新时成功发送停止请求
问题背景
最近接到一个需求，需要在页面刷新或者关闭浏览器标签页的时候触发停止当前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)
}
参考文章Web sendBeacon
投递腾讯等公司7个岗位
查看30道真题和解析