關於vue 全局loading方案

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)
})

 

 

 

將loading繼續進行封裝(帶參數)

import { Loading } from 'element-ui'
 
let loadingCount = 0
let loading
 
const startLoading = (options = {}) => {
    loading = Loading.service({
        lock: true,
        text: '加載中……',
        background: 'rgba(0, 0, 0, 0.7)',
        ...options,
    })
}
 
const endLoading = () => {
    loading.close()
}
 
export const showLoading = (options) => {
    if (loadingCount === 0) {
        startLoading(options)
    }
    loadingCount += 1
}
 
export const hideLoading = () => {
    if (loadingCount <= 0) {
        return
    }
    loadingCount -= 1
    if (loadingCount === 0) {
        endLoading()
    }
}

export default function(Vue) {
      //添加全局API
     Vue.prototype.$loading = {
        showLoading,
        hideLoading
    }
}

 

main.js引入；

import loading from '@frameworks/assets/js/Loading'

注意一定要use

Vue.use(loading)

最后一步就是調用了

this.$loading.showLoading()//打開
this.$loading.hideLoading()//關閉