![](https://img2018.cnblogs.com/blog/1170749/201812/1170749-20181217105415553-806102991.png)
//定义一个请求拦截器
axios.interceptors.request.use(function(config){
store.state.loading = true; //在请求发出之前进行一些操作
setTimeout(() => {
store.state.loading = false;
}, 10000);
//clearTimeout(timer)
return config
})
//定义一个响应拦截器
axios.interceptors.response.use(function(config){
store.state.loading = false;//在这里对返回的数据进行处理
store.state.ressuccess=true;
if(config.data.code === 297){
store.state.islogin = false
}
return config
})
新建组件loading.vue
<template>
<div class="loading" v-if="$store.state.loading" >
<Spin fix>
<Icon type="ios-loading" size=18 class="demo-spin-icon-load"></Icon>
<div class="fontStyle">加载中...</div>
</Spin>
</div>
</template>
<script>
export default {
name: 'loading',
data() {
return {
}
},
created() {
}
}
</script>
<style lang="less">
/*[v-cloak] {
display:none !important;
}*/
.loading .ivu-spin-fix {
.demo-spin-icon-load{
font-size:68px !important;
}
.fontStyle {
font-size:24px;
}
.ivu-icon {
font-weight: 1000;
}
background:rgba(0, 0, 0, 0.1);
}
.demo-spin-icon-load{
animation: ani-demo-spin 1s linear infinite;
}
@keyframes ani-demo-spin {
from { transform: rotate(0deg);}
50% { transform: rotate(180deg);}
to { transform: rotate(360deg);}
}
.demo-spin-col{
height: 100px;
position: relative;
border: 1px solid #eee;
}
.loading {
display: flex;
justify-content: center;
flex-direction: column;
align-items: center;
position: fixed;
left: 0;
top: 0;
z-index: 99999;
width: 100%;
height: 100%;
color: #fff;
background-color:transparent;
p {
padding: .15rem .15rem .2rem;
color: #fff;
font-size: .16rem;
}
img {
width: .4rem;
height: .4rem;
}
}
</style>