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