1.axios方案

在axios請求裡面統一新增loading

先申明兩個變數，記錄頁面是否有loading和請求個數

let loadingInstance，//記錄頁面中存在的loading
loadingCount = 0 //記錄當前正在請求的數量

在請求開始的時候判斷頁面是不是有loading，如果沒有loading，就建立一個loading

響應的時候，關閉loading

錯誤的時候，關閉loading

這樣一來，就會有一個問題，頁面中有多個請求正在進行的時候，前面的請求提前收到響應，後面的loading就不會出來

上面這個圖 loading 可能只會存在10s，其實應該是15s

解決辦法：

用一個變數記錄頁面的正在進行的請求數，並進行呢維護這個值，如果新來一個請求就加1，結束就減去1，錯誤的也減去1

在loading要進行關閉的時候判斷

只有這個值為0的時候才去關閉loading

程式碼：

let loadingInstance,loadingCount = 0 //申明loading
//http request 攔截器
axios.interceptors.request.use(
    config => {
        console.log("開啟前"+loadingCount)
        if (loadingCount == 0) {
            console.log(
 
"有loading了")
            console.log("開啟時"+loadingCount)
            loadingInstance = Loading.service({
                lock: true,
                customClass: "z-index999",
                text: "資料載入中，請稍後...",
                spinner: "el-icon-loading",
                background: "rgba(0, 0, 0, 0.7)"
            })
        }
        loadingCount
 
++
        let Authorization = cookies.get('access_token') ? { "Authorization": "Bearer " + cookies.get('access_token') } : {}
        let headers = {
            "language": "zh_cn",
            "Content-Type": "application/x-www-form-urlencoded"
        }
        config.headers = Object.assign(Authorization, headers)
        return config
    },
    error => {
        // loadingCount--
        // if (loadingInstance && loadingCount==0) {
        //     loadingInstance.close()
        // }
        return Promise.reject(err);
    }
);

//響應攔截器即異常處理
axios.interceptors.response.use(response => {
    loadingCount--
    console.log("關閉時的"+loadingCount)
    if (loadingInstance && loadingCount == 0) {
        loadingInstance.close()
    }
    //console.log(response)
    switch (response.status) {
        case 200:
            responseBefore(response)
            return response
            break
        case 400:
            return Promise.resolve({ code: response.status, message: '錯誤請求' })
            break
        case 401:
            return Promise.resolve({ code: response.status, message: '未授權，請重新登入' })
            break
        default:
            return Promise.resolve({ status: response.status, message: '未知錯誤' })
            break
    }
}, error => {
    // loadingCount--
    // if (loadingInstance && loadingCount == 0) {
    //     loadingInstance.close()
    // }
    console.warn(`timeout of ${axios_defaults_timeout}ms exceeded`);
    return Promise.reject(error)
})