Vux+Axios攔截器增加loading的問題

摘要： 很多時候，我們在頁面使用Ajax重新整理時候，會希望它出現loading的圖示，讓使用者體驗更好一些。那麼如果我們每次在Axios裡面進行請求，都要顯示loading圖示的話，那麼沒有一個全域性的方法的話，勢必會造成程式碼冗餘的問題。有什麼方法可以實現這個方法呢？ 這裡，我們就要用到Axi...

很多時候，我們在頁面使用Ajax重新整理時候，會希望它出現loading的圖示，讓使用者體驗更好一些。那麼如果我們每次在Axios裡面進行請求，都要顯示loading圖示的話，那麼沒有一個全域性的方法的話，勢必會造成程式碼冗餘的問題。有什麼方法可以實現這個方法呢？

這裡，我們就要用到Axios的請求攔截器與相應攔截器了

首先，我們在請求攔截器裡面增加一個VUX的loading元件

axios.interceptors.request.use(

config => {

//請求攔截器，呼叫loading外掛
// 顯示loading
// 判斷是否重複提交請求，也就是loading是否還存在，如果存在則不顯示新的loading
let isShow = window.app.$vux.loading.isVisible()
if(!isShow&&config.showLoading){
window.app.$vux.loading.show({
text: 'Loading'
})
}
config.data = JSON.stringify(config.data);
config.headers = {
'Content-Type': 'application/json',
}
return config;

},

error => {

return Promise.reject(err);

}

);