Vue+elementUi loading效果

elementui的loading效果

有指令和服务两种，指令是通过开关控制，服务是通过loading实例对象去控制的，但是这里需要注意的是，如果有多个请求发出，loading效果可能展示不对，比如请求两个接口，一个接口请求回来之后，立马关闭loading ,导致第二个请求还没有回来，已经关闭loading了，这样的体验是不好的。

这里解决的思路是，判断有多少个请求，等所有的请求回来之后再关闭

import {Loading} from 'element-ui'

let loading;//loading的实例对象

let loadingCount = 0;

function start(){

　　loading = Loading.service({

　　　　lock:true,

　　　　text:'加载中',

　　　　background:'rgba(0,0,0,0.1)'

　　})
};

function end(){

　　laoding.close();
}

 function showLoaing(){

　　if( loadingCount==0){

　　　　start();

　　};

　　loadingCount++

};

function hideLoading(){

　　loadingCount--;

　　if(loadingCount==0){

           end()

　　}
}

 axios.interceptors.request.use(req=>{

      showLoaing();

});

axios.interceptors.response.use(res=>{

　　hideLoading()

},err=>{

　　try{

　　　　hideLoading()})

　　}catch(err){

　　　　console.log(err)

　　}

}