情境:
如果每次只發送一個請求API,不會有問題。
多個發送,就會發生問題了。
舉例:
發送第一個請求,開啟 isLoading = true 動畫。
結束時關閉動畫,關閉 isLoading = false 動畫。
現在有一個請求結束了,關閉 isLoading = false 動畫,但是另一個請求由於其他原因還沒結束。
造成的結果就是,頁面請求還沒完成,Loading 動畫卻關閉了,用戶會以為頁面加載完成了。但其實還沒完成請求。
解決方案:
loadingCount: 0
再增加兩個方法,對 loadingCount 進行加減的判斷式
methods: {
addLoading() {
// 發送請求後開啟動畫
this.isShowLoading = true
// 發送請求參數就 +1
this.loadingCount++
},
isCloseLoading() {
// 請求發送結束後參數就 -1
this.loadingCount--
// 如果數值為 0 則關閉動畫
if (this.loadingCount == 0) {
this.isShowLoading = false
}
}
}
在 axios 情境下會變成:
axios.post(url,formdata,{
addLoading() // 增加數值
header: {
//...
})
.then(( response ) => {
//...
})
.catch(( err ) => {
//...
})
.finally(( ) => {
isCloseLoading() // 減少數值
})
實測成功!超讚