JavaScript實(shí)現(xiàn)在頁面刷新時(shí)成功發(fā)送停止請求
問題背景
最近接到一個(gè)需求，需要在頁面刷新或者關(guān)閉瀏覽器標(biāo)簽頁的時(shí)候觸發(fā)停止當(dāng)前sql的接口。
解決方案
首先想到生命周期函數(shù)beforeDestroy，但很可惜，beforeDestroy只是在組件被銷毀時(shí)觸發(fā)，關(guān)閉tab時(shí)進(jìn)程都?xì)⒌袅?，并不?huì)觸發(fā)。
然后，想到用beforeunload和unload獲取到頁面刷新或者關(guān)閉瀏覽器標(biāo)簽頁的時(shí)機(jī)，并調(diào)用相應(yīng)的接口。此時(shí)發(fā)現(xiàn)接口是發(fā)了，但是頁面刷新時(shí)有了如下問題：
這是因?yàn)轫撁嫠⑿聲?huì)自動(dòng)取消axios的異步請求。
當(dāng)然此時(shí)也有解決方案，比如用原生的XMLHttpRequest，設(shè)置為同步請求，對于ajax，設(shè)置$.ajax({ url: "some.php", async: false})即可同步請求。
但是改成同步請求后會(huì)阻礙頁面的卸載，也就是說如果請求很慢，你明明點(diǎn)了刷新點(diǎn)了關(guān)閉，卻會(huì)一直卡在當(dāng)前界面中，用戶體驗(yàn)就很不友好了。
最后通過查閱資料，找到了navigator.sendBeacon的方案，它是非阻塞請求，不會(huì)卡住。
當(dāng)然它也有一定缺陷，不能在控制臺(tái)的network找到請求，只能通過抓包或者后端日志的形式判斷是否調(diào)用了該接口，好在此缺陷并不影響需求，又解決了請求卡住的問題，因此可用。
方案實(shí)現(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實(shí)現(xiàn)在頁面刷新時(shí)成功發(fā)送停止請求的文章就介紹到這了,更多相關(guān)JavaScript頁面刷新成功發(fā)送停止內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
JavaScript點(diǎn)擊按鈕后彈出透明浮動(dòng)層的方法
這篇文章主要介紹了JavaScript點(diǎn)擊按鈕后彈出透明浮動(dòng)層的方法,可實(shí)現(xiàn)點(diǎn)擊按鈕彈出居中的透明浮動(dòng)層的效果,涉及javascript操作鼠標(biāo)事件及頁面樣式的相關(guān)技巧,需要的朋友可以參考下2015-05-05
本文主要介紹了JavaScript驗(yàn)證API的使用，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2023-02-02
Js on及addEventListener原理用法區(qū)別解析
這篇文章主要介紹了Js on及addEventListener原理用法區(qū)別解析,文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2020-07-07
JS中的提升機(jī)制變量提升函數(shù)提升實(shí)例詳解
這篇文章主要為大家介紹了JS中的提升機(jī)制變量提升函數(shù)提升實(shí)例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-09-09
js對文字進(jìn)行編碼涉及3個(gè)函數(shù)：escape,encodeURI,encodeURIComponent，相應(yīng)3個(gè)解碼函數(shù)：unescape,decodeURI,decodeURIComponent2010-02-02
JS操作圖片(增,刪,改) 例子，需要的朋友可以參考一下2013-04-04
addEventListener()和removeEventListener()追加事件和刪除追加事件
這篇文章主要給大家介紹了關(guān)于addEventListener()和removeEventListener()追加事件和刪除追加事件的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-12-12
在javascript中隨機(jī)數(shù) math random如何生成指定范圍數(shù)值的隨機(jī)數(shù)
本篇文章給大家介紹在javascript中隨機(jī)數(shù)math random如何生成指定范圍數(shù)值的隨機(jī)數(shù)，由于math.random生成了一個(gè)偽隨機(jī)數(shù)，之后還要經(jīng)過我們的后期處理。對隨機(jī)數(shù)math random感興趣的朋友一起了解了解吧2015-10-10
這篇文章主要給大家介紹了關(guān)于用JS獲取Headers頭部信息的相關(guān)資料,頭部信息是在JavaScript中進(jìn)行網(wǎng)絡(luò)請求時(shí)常用的操作,Headers 頭部信息包含了請求或響應(yīng)的元數(shù)據(jù),需要的朋友可以參考下2023-09-09
JS實(shí)現(xiàn)勻速運(yùn)動(dòng)的代碼實(shí)例
這篇文章主要介紹了JS實(shí)現(xiàn)勻速運(yùn)動(dòng)的代碼實(shí)例，有需要的朋友可以參考一下2013-11-11