JavaScript實現(xiàn)在頁面刷新時成功發(fā)送停止請求
問題背景
最近接到一個需求，需要在頁面刷新或者關(guān)閉瀏覽器標簽頁的時候觸發(fā)停止當前sql的接口。
解決方案
首先想到生命周期函數(shù)beforeDestroy，但很可惜，beforeDestroy只是在組件被銷毀時觸發(fā)，關(guān)閉tab時進程都殺掉了，并不會觸發(fā)。
然后，想到用beforeunload和unload獲取到頁面刷新或者關(guān)閉瀏覽器標簽頁的時機，并調(diào)用相應(yīng)的接口。此時發(fā)現(xiàn)接口是發(fā)了，但是頁面刷新時有了如下問題：
這是因為頁面刷新會自動取消axios的異步請求。
當然此時也有解決方案，比如用原生的XMLHttpRequest，設(shè)置為同步請求，對于ajax，設(shè)置$.ajax({ url: "some.php", async: false})即可同步請求。
但是改成同步請求后會阻礙頁面的卸載，也就是說如果請求很慢，你明明點了刷新點了關(guān)閉，卻會一直卡在當前界面中，用戶體驗就很不友好了。
最后通過查閱資料，找到了navigator.sendBeacon的方案，它是非阻塞請求，不會卡住。
當然它也有一定缺陷，不能在控制臺的network找到請求，只能通過抓包或者后端日志的形式判斷是否調(diào)用了該接口，好在此缺陷并不影響需求，又解決了請求卡住的問題，因此可用。
方案實現(xiàn)代碼
_stopSql (sql) {
let formData = new FormData()
formData.append('regionId', regionId)
formData.append('dbName', dbName)
formData.append('sql', sql)
navigator.sendBeacon(`${origin}/stop`, formData)
}
到此這篇關(guān)于JavaScript實現(xiàn)在頁面刷新時成功發(fā)送停止請求的文章就介紹到這了,更多相關(guān)JavaScript頁面刷新成功發(fā)送停止內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
sort是數(shù)組的一個排序方法。學習js的朋友可以參考下。2011-07-07
使用代碼實現(xiàn)當刪除單詞時就一次性刪除整個單詞，有個demo，相信大家看過之后就知道是什么意思了2014-09-09
JavaScript構(gòu)造函數(shù)與原型、原型鏈示例詳解
在JavaScript中,構(gòu)造函數(shù)和原型鏈是實現(xiàn)面向?qū)ο缶幊痰暮诵臋C制,它們共同構(gòu)成了JavaScript的類繼承模型,這篇文章主要介紹了JavaScript構(gòu)造函數(shù)與原型、原型鏈的相關(guān)資料,需要的朋友可以參考下2026-03-03
這篇文章主要介紹了JS保留兩位小數(shù) 四舍五入函數(shù)的小例子，有需要的朋友可以參考一下2013-11-11
原生Js實現(xiàn)按的數(shù)據(jù)源均分時間點幻燈片效果(已封裝)
騰訊新聞詳情頁有一個事件進展效果, 覺得挺有意思. 于是, 就有了本文的效果: 按數(shù)據(jù)源均分時間點幻燈. 花了三個多小時寫的, 當然, 包括樣式與調(diào)試. 兼容主流。2010-12-12
Axios是一個基于Promise的HTTP客戶端,專為瀏覽器和node.js設(shè)計,本文主要為大家詳細介紹了Axios的具體使用,感興趣的小伙伴可以跟隨小編一起學習一下2024-01-01
本文匯總了Javascript中兩個對象的比較、不同類型的比較以及對象跟原始值的比較，并進行了實例演示，希望能幫助到有需要的朋友們。2016-07-07
這篇文章主要介紹了微信小程序上拉加載和下拉刷新功能實現(xiàn),本文通過實例代碼給大家介紹的非常詳細,感興趣的朋友跟隨小編一起看看吧2024-06-06
以前有人會說，new Function的方式是幾乎與eval相等，今天我查了一下，確實是不同的東西，說這句話的人太不負責了。關(guān)于eval和new function，得到的結(jié)果都是一致的，都會叫你不要去使用它們。所以結(jié)論就是“不得不”才使用2012-12-12
這篇文章主要為大家詳細介紹了小程序?qū)崿F(xiàn)自定義多層級單選和多選，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-04-04