Element UI中使用Axios優化Loading動畫

背景

最近在用Element UI + Vue 作中後臺管理系統，當咱們向後端發送請求時，須要給頁面一個loading加載動畫。Element UI給咱們提供了兩種調用 Loading 的方法：指令和服務。每次和後端的交互都要顯示loading框的話，咱們一般寫在封裝好的axios.js文件中以服務的形式調用。

問題分析

• 如何解決多個請求重疊的問題？
• 如何解決區域加載問題？

實現方法

Axios中爲咱們提供了請求攔截和請求響應的的接口，咱們能夠在axios.js中聲明一個loadingInstance變量，攔截到請求以後，建立一個loading實例，請求響應以後關閉loading。

那麼當多個請求重疊時會怎樣呢？

假如咱們同時發送兩次請求，因爲間隔時間極短，在建立一個loading實例以後，還將來的及關閉，loadingInstance就被從新賦值，致使咱們關閉loading時只能關閉最後一個loading實例，以前建立的loading實例已經淹沒在內存中沒法選取，也就無從關閉它們，就會致使頁面一直在loading。

因此問題的關鍵就是咱們要關閉以前的loading實例

• 咱們能夠在聲明loadingInstance的同時，聲明一個計數器count=0，攔截到請求以後，先對count作判斷，若是count>0，就須要先關閉以前的loading實例，而後再建立新的loading實例賦值給loadingInstance，同時count++。

let loadingInstance
let count = 0;
service.interceptors.request.use(config => {
    if(count>0){
        loadingInstance.close()
    }
    count ++
    loadingInstance = Loading.service({
        target: '.content',
        text:'加載中...'
    })
    return config
}, error => {
    Promise.reject(error)
})
service.interceptors.response.use(
    response => {
        loadingInstance.close()
        count = 0
        return response
    },
)
複製代碼

• 須要注意的是，以服務的方式調用的全屏 Loading 自己就是是單例的：若在前一個全屏 Loading 關閉前再次調用全屏 Loading，並不會建立一個新的 Loading 實例，而是返回現有全屏 Loading 的實例，因此不會出現重疊的狀況

那麼如何解決區域加載呢？

let loadingInstance = Loading.service({
    text: '請稍等',
    // 選擇你要插入的節點
    target: document.querySelector('.loadingtext')
});
複製代碼

• 須要注意的是雖然以服務的方式調用的全屏 Loading 自己就是是單例的，可是區域loading並非單例的，因此若是咱們要解決區域loading的重疊問題，就須要用到前面提到的辦法。