vue中使用axios拦截器实现数据加载之前的loading动画

首先新建一个 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中写一个状态来操控我的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组件

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