多個請求下的 loading 展示與關閉

情境：

如果每次只發送一個請求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() // 減少數值 

})

實測成功！超讚