From f4372dac30c0a468c81142ac5c15ae3c5d2cb804 Mon Sep 17 00:00:00 2001
From: "Cesar.Shang" <shangshang86799@163.com>
Date: Mon, 19 Jun 2023 16:24:08 +0800
Subject: [PATCH] =?UTF-8?q?request=20=E5=A2=9E=E5=8A=A0=E7=BB=9F=E4=B8=80l?=
 =?UTF-8?q?oading=E6=95=88=E6=9E=9C?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .gitignore                 |   2 +
 src/components/Loading.vue | 116 +++++++++++++++++++++++++++++++++++++
 src/utils/loading.ts       |  43 ++++++++++++++
 src/utils/request.ts       |   8 ++-
 4 files changed, 168 insertions(+), 1 deletion(-)
 create mode 100644 src/components/Loading.vue
 create mode 100644 src/utils/loading.ts

diff --git a/.gitignore b/.gitignore
index a547bf3..ea43704 100644
--- a/.gitignore
+++ b/.gitignore
@@ -22,3 +22,5 @@ dist-ssr
 *.njsproj
 *.sln
 *.sw?
+
+yarn.lock
diff --git a/src/components/Loading.vue b/src/components/Loading.vue
new file mode 100644
index 0000000..ccc2203
--- /dev/null
+++ b/src/components/Loading.vue
@@ -0,0 +1,116 @@
+<script setup lang="ts">
+interface LoadingProps {
+  options: {
+    showLoading: boolean;
+  }
+}
+
+defineProps<LoadingProps>()
+</script>
+
+<template>
+  <section class="loading-box" v-if="options.showLoading">
+    <div class="loading-content">
+      <div class="sk-cube-grid">
+        <div class="sk-cube sk-cube1"></div>
+        <div class="sk-cube sk-cube2"></div>
+        <div class="sk-cube sk-cube3"></div>
+        <div class="sk-cube sk-cube4"></div>
+        <div class="sk-cube sk-cube5"></div>
+        <div class="sk-cube sk-cube6"></div>
+        <div class="sk-cube sk-cube7"></div>
+        <div class="sk-cube sk-cube8"></div>
+        <div class="sk-cube sk-cube9"></div>
+      </div>
+    </div>
+  </section>
+</template>
+
+<style scoped>
+.loading-box {
+  position: fixed;
+  left: 0;
+  top: 0;
+  width: 100%;
+  height: 100%;
+  background: rgba(0, 0, 0, .3);
+  z-index: 99;
+}
+
+.loading-content {
+  position: absolute;
+  left: 50%;
+  top: 50%;
+  transform: translate(-50%);
+  z-index: 99;
+}
+
+.sk-cube-grid {
+  width: 40px;
+  height: 40px;
+}
+.sk-cube-grid .sk-cube {
+  width: 33%;
+  height: 33%;
+  background-color: #1890ff;
+  float: left;
+  -webkit-animation: sk-cubeGridScaleDelay 1.3s infinite ease-in-out;
+  animation: sk-cubeGridScaleDelay 1.3s infinite ease-in-out;
+}
+.sk-cube-grid .sk-cube1 {
+  -webkit-animation-delay: 0.2s;
+  animation-delay: 0.2s;
+}
+.sk-cube-grid .sk-cube2 {
+  -webkit-animation-delay: 0.3s;
+  animation-delay: 0.3s;
+}
+.sk-cube-grid .sk-cube3 {
+  -webkit-animation-delay: 0.4s;
+  animation-delay: 0.4s;
+}
+.sk-cube-grid .sk-cube4 {
+  -webkit-animation-delay: 0.1s;
+  animation-delay: 0.1s;
+}
+.sk-cube-grid .sk-cube5 {
+  -webkit-animation-delay: 0.2s;
+  animation-delay: 0.2s;
+}
+.sk-cube-grid .sk-cube6 {
+  -webkit-animation-delay: 0.3s;
+  animation-delay: 0.3s;
+}
+.sk-cube-grid .sk-cube7 {
+  -webkit-animation-delay: 0s;
+  animation-delay: 0s;
+}
+.sk-cube-grid .sk-cube8 {
+  -webkit-animation-delay: 0.1s;
+  animation-delay: 0.1s;
+}
+.sk-cube-grid .sk-cube9 {
+  -webkit-animation-delay: 0.2s;
+  animation-delay: 0.2s;
+}
+
+@-webkit-keyframes sk-cubeGridScaleDelay {
+  0%, 70%, 100% {
+    -webkit-transform: scale3D(1, 1, 1);
+    transform: scale3D(1, 1, 1);
+  } 35% {
+      -webkit-transform: scale3D(0, 0, 1);
+      transform: scale3D(0, 0, 1);
+    }
+}
+
+@keyframes sk-cubeGridScaleDelay {
+  0%, 70%, 100% {
+    -webkit-transform: scale3D(1, 1, 1);
+    transform: scale3D(1, 1, 1);
+  } 35% {
+      -webkit-transform: scale3D(0, 0, 1);
+      transform: scale3D(0, 0, 1);
+    }
+}
+</style>
diff --git a/src/utils/loading.ts b/src/utils/loading.ts
new file mode 100644
index 0000000..381cdeb
--- /dev/null
+++ b/src/utils/loading.ts
@@ -0,0 +1,43 @@
+import {createApp, reactive} from "vue";
+import Loading from "@/components/Loading.vue";
+
+const options = reactive({
+  showLoading: false
+});
+
+const divDom = document.createElement('div');
+const $loading = createApp(Loading, { options }).mount(divDom);
+
+export class AxiosLoading {
+  private loadingCount: number
+  private loading: any
+
+  constructor() {
+    this.loadingCount = 0
+  }
+
+  private initLoading() {
+    if (this.loading) {
+      options.showLoading = false;
+    }
+    document.body.appendChild(divDom);
+    this.loading = $loading;
+    options.showLoading = true;
+  }
+
+  public addLoading() {
+    if (this.loadingCount === 0) {
+      this.initLoading()
+    }
+    this.loadingCount++
+  }
+
+  public closeLoading() {
+    if (this.loadingCount > 0) {
+      if (this.loadingCount === 1) {
+        options.showLoading = false;
+      }
+      this.loadingCount--
+    }
+  }
+}
diff --git a/src/utils/request.ts b/src/utils/request.ts
index 7d8330a..f198579 100644
--- a/src/utils/request.ts
+++ b/src/utils/request.ts
@@ -1,5 +1,6 @@
 
 import Axios from 'axios'
+import {AxiosLoading} from "@/utils/loading";
 
 const baseURL = import.meta.env.VITE_API_BASEURL
 
@@ -8,9 +9,12 @@ const axios = Axios.create({
   timeout: 20000 // 请求超时 20s
 })
 
+const loading = new AxiosLoading();
+
 // 前置拦截器（发起请求之前的拦截）
 axios.interceptors.request.use(
   (response) => {
+    loading.addLoading();
     /**
      * 根据你的项目实际情况来对 config 做处理
      * 这里对 config 不做任何处理，直接返回
@@ -25,6 +29,7 @@ axios.interceptors.request.use(
 // 后置拦截器（获取到响应时的拦截）
 axios.interceptors.response.use(
   (response) => {
+    loading.closeLoading()
     /**
      * 根据你的项目实际情况来对 response 和 error 做处理
      * 这里对 response 和 error 不做任何处理，直接返回
@@ -32,6 +37,7 @@ axios.interceptors.response.use(
     return response
   },
   (error) => {
+    loading.closeLoading()
     if (error.response && error.response.data) {
       const code = error.response.status
       const msg = error.response.data.message
@@ -43,4 +49,4 @@ axios.interceptors.response.use(
   }
 )
 
-export default axios
\ No newline at end of file
+export default axios
-- 
Gitee