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)

})