首先新建一個 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組件

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。