axios封装loading加载

实现如下图效果

 

 点击获取数据按钮出现loading效果

1.定义一个Loading组件

<template>
  <div v-if="isShow" class="box">
    <div class="container">
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'Loading',
  data() {
    return {
      isShow: false
    }
  },
  methods: {
    show() {
      this.isShow = true
    },
    close() {
      this.isShow = false
    }
  }
}
</script>

<style >
.box {
  width: 100vw;
  height: 100vh;
  position: absolute;
  top: 0;
  left: 0;
  background-color: gray;
  opacity: 0.4;
}
.container {
  width: 150px;
  height: 150px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.container > div {
  position: absolute;
  left: 50%;
  top: 50%;
  margin-top: -10px;
  width: 50%;
  height: 20px;
  transform-origin: left center;
}

.container > div::after {
  content: '';
  position: absolute;
  right: 0;
  top: 0;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background-color: red;
  /* background-color: #000; */
  transform: var(--scale);
  animation: dotscale 1.2s linear infinite;
  animation-delay: var(--animation-delay);
}

.container > div:nth-child(1) {
  transform: rotate(0deg);
  --animation-delay: 0s;
}

.container > div:nth-child(2) {
  transform: rotate(30deg);
  --animation-delay: -0.1s;
}

.container > div:nth-child(3) {
  transform: rotate(60deg);
  --animation-delay: -0.2s;
}

.container > div:nth-child(4) {
  transform: rotate(90deg);
  --animation-delay: -0.3s;
}

.container > div:nth-child(5) {
  transform: rotate(120deg);
  --animation-delay: -0.4s;
}

.container > div:nth-child(6) {
  transform: rotate(150deg);
  --animation-delay: -0.5s;
}

.container > div:nth-child(7) {
  transform: rotate(180deg);
  --animation-delay: -0.6s;
}

.container > div:nth-child(8) {
  transform: rotate(210deg);
  --animation-delay: -0.7s;
}

.container > div:nth-child(9) {
  transform: rotate(240deg);
  --animation-delay: -0.8s;
}

.container > div:nth-child(10) {
  transform: rotate(270deg);
  --animation-delay: -0.9s;
}

.container > div:nth-child(11) {
  transform: rotate(300deg);
  --animation-delay: -1s;
}

.container > div:nth-child(12) {
  transform: rotate(330deg);
  --animation-delay: -1.1s;
}

@keyframes dotscale {
  0% {
    transform: scale(1);
    filter: hue-rotate(0deg);
  }

  100% {
    transform: scale(0);
    filter: hue-rotate(360deg);
  }
}
</style>

 

2.loading.js处理Loading组件,生成组件实例，添加对应的数据和方法

import Loadings from "./views/Loading.vue";

let $vm;
const plugin = {
  install(vue, option) {
    const Loading = vue.extend(Loadings);
    if (!$vm) {
      //创建组件实例
      $vm = new Loading({
        el: document.createElement("div"),
      });
      document.body.appendChild($vm.$el);
    }
    //定义两个方法,loading在根组件中
    const loading = {
      show() {
        //根组件调用Loading组件中定义的方法
        $vm.show();
      },
      hide() {
        $vm.close();
      },
    };
    //将loading挂载到根组件上
    if (!vue.$iView) {
      vue.$iView = {
        loading,
      };
    } else {
      vue.$iView.loading = loading;
    }
    vue.mixin({
      created: function () {
        this.$iView = vue.$iView;
      },
    });
  },
};
export default plugin;
export const install = plugin.install;

 

3.main.js引入封装axios

import loading from "./loading";
Vue.use(loading);
// 通过service调用loading，options为loading配置项
const service = axios.create({
  timeout: 10000,
});
//请求拦截
service.interceptors.request.use(
  (config) => {
    console.log(config);
    if (config.isLoading) {
      //loading
      Vue.$iView.loading.show();
    }
    //若超时，清除loading
    setTimeout(() => {
      Vue.$iView.loading.hide();
    }, 10000);
    return config;
  },
  (error) => {
    console.log(error);
    return Promise.reject();
  }
);
service.interceptors.response.use(
  (response) => {
    // 关闭loading
    Vue.$iView.loading.hide();
    if (response.status === 200) {
      return response.data;
    } else {
      Promise.reject();
    }
  },
  (error) => {
    console.log(error);
    return Promise.reject();
  }
);
Vue.prototype.$http = service;
new Vue({
  router,
  render: (h) => h(App),
}).$mount("#app");