首先新建一個(gè) loading.vue組件，寫(xiě)loading動(dòng)畫(huà)效果

.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中寫(xiě)一個(gè)狀態(tài)來(lái)操控我的loading組件顯示隱藏

export const store = new Vuex.Store({

state:{

isShow:false

}

})

Axios攔截器配置 在main.js中

分別定義一個(gè)請(qǐng)求攔截器(請(qǐng)求開(kāi)始時(shí)執(zhí)行某些操作)、響應(yīng)攔截器(接受到數(shù)據(jù)后執(zhí)行某些操作)，之間分別設(shè)置攔截時(shí)執(zhí)行的操作，改變state內(nèi)isShow的布爾值從而控制loading組件在觸發(fā)請(qǐng)求數(shù)據(jù)開(kāi)始時(shí)顯示loading，返回?cái)?shù)據(jù)時(shí)隱藏loading

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

store.state.isShow=true; //在請(qǐng)求發(fā)出之前進(jìn)行一些操作

return config

})

//定義一個(gè)響應(yīng)攔截器

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

store.state.isShow=false;//在這里對(duì)返回的數(shù)據(jù)進(jìn)行處理

return config

})

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

總結(jié)

以上是生活随笔為你收集整理的axios vue 加载效果动画_vue中使用axios拦截器实现数据加载之前的loading动画显示 @劉䔳...的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。