首先新建一個 loading.vue組件旋奢，寫loading動畫效果

    <template>
                <div class="loader">
                    <div class="loading">
                        <span></span>

                        <span></span>

                        <span></span>

                        <span></span>

                        <span></span>

                        <span></span>

                        <span></span>

                        <span></span>

                    </div>
                </div>
</template>

<style scoped lang="scss">
.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
}
</style>

在vuex中寫一個狀態(tài)來操控我的loading組件顯示隱藏

  export const store = new Vuex.Store({
      state:{
          isShow:false
       }
  })

Axios攔截器配置 在main.js中

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

    axios.interceptors.request.use(function(config){
      store.state.isShow=true; //在請求發(fā)出之前進行一些操作
      return config
  })
//定義一個響應(yīng)攔截器
    axios.interceptors.response.use(function(config){
    store.state.isShow=false;//在這里對返回的數(shù)據(jù)進行處理
    return config
  })

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

    <loading v-if="this.$store.state.isShow"></loading>