vue頁(yè)面回退或關(guān)閉,發(fā)送請(qǐng)求不中斷問(wèn)題
vue頁(yè)面回退或關(guān)閉,發(fā)送請(qǐng)求不中斷
最近做項(xiàng)目有個(gè)需求
video 播放視頻中，點(diǎn)擊瀏覽器 回退 按鈕 調(diào)用接口 統(tǒng)計(jì)觀看時(shí)長(zhǎng)。
就是這個(gè)看似簡(jiǎn)單的事，折騰我兩天，最后終于搞定。
首先 vue 在回退或關(guān)閉頁(yè)面之前調(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í)長(zhǎng)。
這時(shí)候問(wèn)題出現(xiàn)了
在瀏覽器回退（或關(guān)閉）后，axios 調(diào)用接口時(shí)被中斷，沒調(diào)用成功。
搜索問(wèn)題發(fā)現(xiàn)需要同步調(diào)用接口。后來(lái)用 async await 調(diào)用 axios 。
甚至用原生 XMLHttpRequest 對(duì)象同步調(diào)用接口，均以失敗告終。
原來(lái) Chrome 瀏覽器不允許頁(yè)面關(guān)閉期間進(jìn)行同步調(diào)用XMLHTTPRequest() 方法，這條規(guī)則適用于 beforeunload、unload、pagehide 和 visibilitychange 這些 API。
為了保證頁(yè)面在卸載時(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頁(yè)面打印printjs實(shí)現(xiàn)與進(jìn)階方案推薦教程
PrintJS是一個(gè)輕量級(jí)的JavaScript庫(kù),可以幫助我們輕松實(shí)現(xiàn)網(wǎng)頁(yè)打印功能,它支持打印HTML元素、JSON數(shù)據(jù)、圖片等多種格式,使用簡(jiǎn)單且功能強(qiáng)大,這篇文章主要介紹了vue頁(yè)面打印printjs實(shí)現(xiàn)與進(jìn)階方案的相關(guān)資料,需要的朋友可以參考下2026-06-06
Vue開發(fā)過(guò)程中遇到的疑惑知識(shí)點(diǎn)總結(jié)
vue是法語(yǔ)中視圖的意思，Vue.js是一個(gè)輕巧、高性能、可組件化的MVVM庫(kù)，同時(shí)擁有非常容易上手的API。下面這篇文章主要給大家總結(jié)了Vue在開發(fā)過(guò)程中遇到的疑惑知識(shí)點(diǎn),有需要的朋友可以參考借鑒，下面來(lái)一起看看吧。2017-01-01
Vue自定義v-has指令實(shí)現(xiàn)按鈕權(quán)限判斷
這篇文章主要給大家介紹了關(guān)于Vue自定義v-has指令實(shí)現(xiàn)按鈕權(quán)限判斷的相關(guān)資料，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2021-04-04
Vue3如何解決路由緩存問(wèn)題(響應(yīng)路由參數(shù)的變化)
這篇文章主要介紹了Vue3如何解決路由緩存問(wèn)題(響應(yīng)路由參數(shù)的變化),具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-03-03
函數(shù)式組件就是沒有管理任何狀態(tài),也沒有監(jiān)聽任何傳遞給它的狀態(tài),也沒有生命周期方法,它只是一個(gè)接受一些 prop 的函數(shù),下面這篇文章主要給大家介紹了關(guān)于Vue3封裝全局函數(shù)式組件方法的相關(guān)資料,需要的朋友可以參考下2023-06-06
這篇文章主要介紹了Vue2路由router的安裝和使用完整實(shí)例,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友參考下吧2025-05-05
Vue的.sync語(yǔ)法糖是一個(gè)用于雙向數(shù)據(jù)綁定的指令,可以在子組件中用來(lái)監(jiān)聽父組件傳遞下來(lái)的props的變化,本文給大家介紹了在Vue中,.sync語(yǔ)法糖的使用方法,感興趣的朋友跟著小編一起來(lái)學(xué)習(xí)吧2024-01-01
Vuex中mutations與actions的區(qū)別詳解
下面小編就為大家分享一篇Vuex中mutations與actions的區(qū)別詳解，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-03-03
vant-list組件觸發(fā)多次onload事件導(dǎo)致數(shù)據(jù)亂序的解決方案
這篇文章主要介紹了vant-list組件觸發(fā)多次onload事件導(dǎo)致數(shù)據(jù)亂序的解決方案2023-01-01
這篇文章主要介紹了vue異步加載高德地圖的實(shí)現(xiàn)，詳細(xì)的介紹了異步加載的實(shí)現(xiàn)方法。小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-06-06