fix:loading

index.html

@@ -7,6 +7,7 @@
     window.Buffer = Buffer;
   </script>
   <meta charset="UTF-8" />
+  <meta http-equiv="Cache-Control" content="max-age=86400" />
   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
   <title>Checking</title>
   <link rel="icon" href="/favicon.ico" />

src/App.vue

@@ -26,6 +26,16 @@
     </v-dialog>
     <recharge></recharge>
     <confirm v-if="showConfirm"></confirm>
+    <v-dialog v-model="showLoading" max-width="320" persistent>
+      <v-list class="py-2" color="primary" elevation="12" rounded="lg">
+        <v-list-item title="Loading...">
+          <template v-slot:append>
+            <v-progress-circular color="primary" indeterminate="disable-shrink" size="16"
+              width="2"></v-progress-circular>
+          </template>
+        </v-list-item>
+      </v-list>
+    </v-dialog>
   </v-app>
 </template>
 
@@ -78,6 +88,10 @@ export default defineComponent({
       const { messageText } = useMessageStore();
       return messageText
     },
+    showLoading() {
+      const { showLoading } = useMessageStore();
+      return showLoading
+    },
   },
   methods: {
     // 关闭消息

src/services/apiService.ts

@@ -3,34 +3,81 @@ import { useUserStore } from "@/store/user.js";
 import config from "./env";
 import { useMessageStore } from "@/store/message.js";
 import { getLocalStore } from "@/utils";
+
+// 创建axios实例
 const axiosInstance = axios.create({
   baseURL: config.api,
   withCredentials: true,
   timeout: 300000,
 });
 
+/* 请求合并只出现一次loading */
+let needLoadingRequestCount = 0;
+/* 计时器对象 */
+let timer = null as any;
+
+function showFullScreenLoading() {
+  if (needLoadingRequestCount === 0) {
+    loading('start') /* loading加载 */
+  }
+  needLoadingRequestCount++
+}
+
+function tryHideFullScreenLoading() {
+  if (needLoadingRequestCount <= 0) return
+  needLoadingRequestCount--
+  if (needLoadingRequestCount === 0) {
+    if (timer) clearTimeout(timer);
+    loading('end') /* loading结束 */
+  }
+}
+/* loading加载 */
+function loading(str: string) {
+  const { setShowLoading } = useMessageStore();
+  if (str == 'start') {
+    timer = setTimeout(() => {
+      setShowLoading(true);
+    }, 300) /* 300ms 间隔内的 loading 合并为一次 */
+
+  } else if (str == 'end') {
+    setShowLoading(false);
+  }
+}
+
 // 希望控制报错信息，就把接口地址写这里
 const notMessage: any = [];
 
+// 请求拦截器
 axiosInstance.interceptors.request.use(
   (config: any) => {
+
     if (getLocalStore("certificate")) {
       config.headers.certificate = getLocalStore("certificate");
     }
 
+    if (config.showLoading) {
+      showFullScreenLoading()
+    }
+
     return config;
   },
   (error) => {
     return Promise.reject(error);
   }
 );
 
+// 响应拦截器
 axiosInstance.interceptors.response.use(
-  (response) => {
+  (response: any) => {
+    if (response.config.showLoading) {
+      tryHideFullScreenLoading()
+    }
+
     return response;
   },
   (error) => {
 
+    tryHideFullScreenLoading() // 消除loading
     const { setMessageText } = useMessageStore();
     setMessageText("Network is unstable, please check your network.");
 
@@ -65,7 +112,7 @@ const handleRes = ({ response, url, data }: any) => {
   }
 };
 
-export async function post(url: any, params: object, config = {}) {
+export async function post(url: any, params: object, config = { showLoading: true } as any) {
   try {
     const res = await axiosInstance.post(url, params, config);
     return handleRes({
@@ -80,9 +127,9 @@ export async function post(url: any, params: object, config = {}) {
   }
 }
 
-export async function get(url: any, params: object) {
+export async function get(url: any, params: object, config = { showLoading: true } as any) {
   try {
-    const res = await axiosInstance.get(url, { params });
+    const res = await axiosInstance.get(url, { ...config, params });
     return handleRes({
       response: res,
       url,

src/store/message.ts

@@ -3,6 +3,7 @@ import { defineStore } from "pinia";
 export const useMessageStore = defineStore("message", {
   state: () => ({
     showMessage: false, // 全局提示显示
+    showLoading: true, // 全局loading显示
     messageText: "",
   }),
   actions: {
@@ -12,6 +13,9 @@ export const useMessageStore = defineStore("message", {
     },
     setShowMessage(data: boolean) {
       this.showMessage = data;
+    },
+    setShowLoading(data: boolean) {
+      this.showLoading = data;
     }
   },
 });