问题背景

最近接到一个需求，需要在页面刷新或者关闭浏览器标签页的时候触发停止当前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