axios vue 加载效果动画_vue中使用axios拦截器实现数据加载之前的loading动画显示 @劉䔳...

首先新建一个 loading.vue组件，写loading动画效果

.loader {

width: 100%;

height: 100%;

display: flex;

align-items: center;

justify-content: center

}

@-webkit-keyframes loading{

50% {

transform: scale(.4);

opacity: .3

}

100% {

transform: scale(1);

opacity: 1

}

}

.loading{

position: relative

}

.loading span {

display: block;

width: 15px;

height: 15px;

border-radius: 50%;

background-color: #333;

position: absolute

}

.loading span:nth-of-type(1) {

top: 25px;

left: 0;

-webkit-animation: loading-3 1s ease 0s infinite

}

.loading span:nth-of-type(2) {

top: 17px;

left: 17px;

-webkit-animation: loading-3 1s ease -.12s infinite

}

.loading span:nth-of-type(3) {

top: 0;

left: 25px;

-webkit-animation: loading-3 1s ease -.24s infinite

}

.loading span:nth-of-type(4) {

top: -17px;

left: 17px;

-webkit-animation: loading-3 1s ease -.36s infinite

}

.loading span:nth-of-type(5) {

top: -25px;

left: 0;

-webkit-animation: loading-3 1s ease -.48s infinite

}

.loading span:nth-of-type(6) {

top: -17px;

left: -17px;

-webkit-animation: loading-3 1s ease -.6s infinite

}

.loading span:nth-of-type(7) {

top: 0;

left: -25px;

-webkit-animation: loading-3 1s ease -.72s infinite

}

.loading span:nth-of-type(8) {

top: 17px;

left: -17px;

-webkit-animation: loading-3 1s ease -.84s infinite

}

在vuex中写一个状态来操控我的loading组件显示隐藏

export const store = new Vuex.Store({

state:{

isShow:false

}

})

Axios拦截器配置 在main.js中

分别定义一个请求拦截器(请求开始时执行某些操作)、响应拦截器(接受到数据后执行某些操作)，之间分别设置拦截时执行的操作，改变state内isShow的布尔值从而控制loading组件在触发请求数据开始时显示loading，返回数据时隐藏loading

axios.interceptors.request.use(function(config){

store.state.isShow=true; //在请求发出之前进行一些操作

return config

})

//定义一个响应拦截器

axios.interceptors.response.use(function(config){

store.state.isShow=false;//在这里对返回的数据进行处理

return config

})

在app.vue中引入我的loading组件