vue頁面回退或關(guān)閉,發(fā)送請求不中斷問題
更新時間：2024年01月25日 09:50:16 作者：sonicwater
這篇文章主要介紹了vue頁面回退或關(guān)閉,發(fā)送請求不中斷問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
vue頁面回退或關(guān)閉,發(fā)送請求不中斷
最近做項目有個需求
video 播放視頻中，點擊瀏覽器 回退 按鈕 調(diào)用接口 統(tǒng)計觀看時長。
就是這個看似簡單的事，折騰我兩天，最后終于搞定。
首先 vue 在回退或關(guān)閉頁面之前調(diào)用某個方法
mounted() {
window.addEventListener('beforeunload', e => this.pause(e))
},
destroyed() {
window.removeEventListener('beforeunload', e => this.pause(e))
}
mounted組件掛載生命周期 讓window監(jiān)聽beforeunload事件，并給對應(yīng)方法。destroyed銷毀生命周期 讓window去除監(jiān)聽beforeunload事件。
在 pause 方法中，要調(diào)用接口統(tǒng)計視頻觀看時長。
這時候問題出現(xiàn)了
在瀏覽器回退（或關(guān)閉）后，axios 調(diào)用接口時被中斷，沒調(diào)用成功。
搜索問題發(fā)現(xiàn)需要同步調(diào)用接口。后來用 async await 調(diào)用 axios 。
甚至用原生 XMLHttpRequest 對象同步調(diào)用接口，均以失敗告終。
原來 Chrome 瀏覽器不允許頁面關(guān)閉期間進行同步調(diào)用XMLHTTPRequest() 方法，這條規(guī)則適用于 beforeunload、unload、pagehide 和 visibilitychange 這些 API。
為了保證頁面在卸載時可以成功調(diào)用接口請求數(shù)據(jù)，官方建議使用 sendBeacon() 或者 Fetch keep-alive 。
以 Fetch keep-alive 為例：
pause() {
let url = process.env.VUE_APP_BASE_URL + '/api/setData';
let data = {
...params // 一些參數(shù)
}
// fetch 調(diào)用接口
fetch( url, {
method: 'POST',
headers:{
'Accept': 'application/json',
'Content-Type': 'application/x-www-form-urlencoded',
'Authorization': 'Bearer ' + getToken() // getToken 返回 token
},
body: qs.stringify(data),
keepalive: true
});
}
fetch方法不需要安裝依賴，vue中直接使用- 將
keepalive設(shè)置為true就可確保瀏覽器關(guān)閉或回退，調(diào)用接口的鏈接不會被關(guān)閉，調(diào)用成功。
總結(jié)
相關(guān)文章
在vue項目中,輸入框只允許輸入數(shù)字,現(xiàn)將自己使用的一種方法記錄,本文結(jié)合實例代碼給大家介紹的非常詳細,感興趣的朋友一起看看吧2023-11-11
Vue實現(xiàn)移除數(shù)組中特定元素的方法小結(jié)
這篇文章主要介紹了Vue如何優(yōu)雅地移除數(shù)組中的特定元素,文中介紹了單個去除和批量去除的操作方法,并通過代碼示例講解的非常詳細,具有一定的參考價值,需要的朋友可以參考下2024-03-03
Element UI 上傳組件實現(xiàn)文件上傳并附帶額外參數(shù)功能
在使用 ElementUI 的上傳組件 el-upload 實現(xiàn)文件上傳功能時,如果單文件上傳是比較簡單的,但是在實際需求中,往往會在上傳文件時伴隨著一些其他參數(shù),怎么操作呢,下面通過示例代碼講解感興趣的朋友一起看看吧2023-08-08
本文通過實例代碼給大家介紹了vue中的inject學(xué)習(xí)教程，非常不錯，具有一定的參考借鑒價值，需要的朋友參考下吧2019-04-04
這篇文章主要介紹了iView框架問題整理小結(jié)，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-10-10
這篇文章主要給大家介紹了關(guān)于如何利用Vue實現(xiàn)簡易播放器的相關(guān)資料，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-12-12
基于vue實現(xiàn)圖片預(yù)覽功能并顯示在彈窗的最上方
這篇文章主要為大家詳細介紹了如何基于vue實現(xiàn)圖片預(yù)覽功能并顯示在彈窗的最上方,感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下2024-10-10
ElementUI?select彈窗在特定場合錯位問題解決方案
這篇文章主要介紹了ElementUI?select彈窗在特定場合錯位問題解決方案,本文給大家介紹的非常詳細,對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友參考下吧2024-01-01
這篇文章主要介紹了vue 虛擬DOM的原理，幫助大家更好的理解和學(xué)習(xí)vue，感興趣的朋友可以了解下2020-10-10
Vue3 setup語法糖銷毀一個或多個定時器(setTimeout/setInterval)
這篇文章主要給大家介紹了關(guān)于Vue3 setup語法糖銷毀一個或多個定時器(setTimeout/setInterval)的相關(guān)資料,vue是單頁面應(yīng)用,路由切換后,定時器并不會自動關(guān)閉,需要手動清除,當(dāng)頁面被銷毀時,清除定時器即可,需要的朋友可以參考下2023-10-10