1. 程式人生 > >vue+element+axios全域性loading增加target標籤時處理方法

vue+element+axios全域性loading增加target標籤時處理方法

問題:

    在axios的攔截器中配置全域性loading時。如果加上target屬性時。呼叫close方法關閉loading時。close方法將失效

原因:

    加上target標籤時候loading將不是一個單例。

解決方式:

let loadinginstance, loadCount = 0, loadingArray=[];
axios.interceptors.request.use( config => { loadCount++ loadinginstance = Loading.service({ target: '.content-wrapper'
, fullscreen: false, text: '正在載入中.....', background: 'rgba(0, 0, 0, 0.7)' }) loadingArray.push(loadinginstance) console.log('攔截器請求攔截222222') return config; }, err => { loadCount-- if (!loadCount) { loadingArray.forEach(item=>
item.close()) } return Promise.reject(err); });
// http response 攔截器
axios.interceptors.response.use(data => { // 響應成功關閉loading console.log('攔截器返回的資料',data) loadCount-- let msg = "" if (!data.data.success) { msg = data.data.errorMsg Message({ message: msg, type: 'warning'
}); } if (!loadCount) { loadingArray.forEach(item=>item.close()) } return data}, error => { loadCount--; if (!loadCount) { loadingArray.forEach(item => item.close()) } Message.error('網路異常,請稍後再試') return Promise.reject(error)})