config axios

src/App.vue

@@ -1,11 +1,13 @@
 <script setup lang="ts">
-import { NConfigProvider } from "naive-ui";
+import { NConfigProvider, NMessageProvider } from "naive-ui";
 import { zhCN, dateZhCN } from "naive-ui";
 </script>
 
 <template>
   <n-config-provider :locale="zhCN" :dateLocale="dateZhCN">
-    <router-view></router-view>
+    <n-message-provider :duration="10000">
+      <router-view />
+    </n-message-provider>
   </n-config-provider>
 </template>
 

src/plugins/axiosApp.ts

@@ -0,0 +1,93 @@
+import axios from "axios";
+import { loadProgressBar } from "axios-progress-bar";
+// import { notifyInvalidTokenThrottled } from "./axiosNotice";
+import axiosRetry from "axios-retry";
+import { useMessage } from "naive-ui";
+const message = useMessage();
+import { store } from "@/store/store";
+
+const config = {
+  // baseURL: process.env.baseURL || process.env.apiUrl || ""
+  timeout: 1 * 60 * 1000, // Timeout
+  withCredentials: true, // Check cross-site Access-Control
+};
+
+const _axiosApp = axios.create(config);
+axiosRetry(_axiosApp);
+
+_axiosApp.interceptors.request.use(
+  function (config) {
+    if (config.setGlobalMask) {
+      store.increaseGlobalMaskCount("axios");
+    }
+    return config;
+  },
+  function (error) {
+    if (error.config.setGlobalMask) {
+      store.decreaseGlobalMaskCount("axios");
+    }
+    message.error(JSON.stringify(error));
+    console.log(error);
+    return Promise.reject(error);
+  }
+);
+
+// Add a response interceptor
+_axiosApp.interceptors.response.use(
+  (response) => {
+    if (response.config.setGlobalMask) {
+      store.decreaseGlobalMaskCount("axios");
+    }
+    return response;
+  },
+  (error) => {
+    if (error.config?.setGlobalMask) {
+      store.decreaseGlobalMaskCount("axios");
+    }
+    const showErrorMessage = !error.config?.noErrorMessage;
+    if (!error.response) {
+      if (showErrorMessage) {
+        // "Network Error" 网络不通，直接返回
+        message.error("网络连接异常，请检查网络设置。");
+      }
+      return Promise.reject(error);
+    }
+    // 这里是返回状态码不为200时候的错误处理
+    const status = error.response.status;
+
+    // 登录失效 跳转登录页面
+    if (status == 403 || status == 401) {
+      // notifyInvalidTokenThrottled();
+      return Promise.reject(error);
+    } else if (status == 405) {
+      if (showErrorMessage) {
+        message.error("没有权限！");
+      }
+      return Promise.reject(error);
+    } else if (status == 502) {
+      if (showErrorMessage) {
+        message.error("服务器异常(502)！");
+      }
+      return Promise.reject(error);
+    }
+
+    if (status != 200) {
+      const data = error.response.data;
+      if (data && data.message) {
+        if (showErrorMessage) {
+          message.error(data.message + "");
+        }
+      } else {
+        if (showErrorMessage) {
+          message.error("未定义异常: " + JSON.stringify(data, null, 2));
+        }
+      }
+      return Promise.reject(error);
+    }
+  }
+);
+
+// eslint-disable-next-line
+loadProgressBar(null, _axiosApp);
+
+export const httpApp = _axiosApp;

src/plugins/axiosIndex.ts

@@ -0,0 +1,2 @@
+export { httpApp } from "./axiosApp";
+export { httpNoAuth } from "./axiosNoAuth";

src/plugins/axiosNoAuth.ts

@@ -0,0 +1,55 @@
+import axios from "axios";
+import { loadProgressBar } from "axios-progress-bar";
+import axiosRetry from "axios-retry";
+import { useMessage } from "naive-ui";
+const message = useMessage();
+
+const config = {
+  timeout: 60 * 1000, // Timeout
+};
+
+const _axiosNoAuth = axios.create(config);
+axiosRetry(_axiosNoAuth);
+
+/**
+ * 本应用的无auth api，或者第三方的api
+ * 1. 统一使用的http api，方便使用，无需fetch
+ * 2. 无默认headers
+ */
+
+_axiosNoAuth.interceptors.request.use(
+  function (config) {
+    return config;
+  },
+  function (error) {
+    message.error(JSON.stringify(error));
+    return Promise.reject(error);
+  }
+);
+
+// Add a response interceptor
+_axiosNoAuth.interceptors.response.use(
+  (response) => {
+    return response;
+  },
+  (error) => {
+    if (!error.response) {
+      // "Network Error" 网络不通，直接返回
+      message.error("网络连接异常，请检查网络设置。");
+      return Promise.reject(error);
+    }
+
+    const data = error.response.data;
+    if (data && data.desc) {
+      message.error(data.desc + "");
+    } else {
+      message.error(`异常(${error.response.status}): ${error.config.url}`);
+    }
+    return Promise.reject(error);
+  }
+);
+
+// eslint-disable-next-line
+loadProgressBar(null, _axiosNoAuth);
+
+export const httpNoAuth = _axiosNoAuth;

src/store/store.ts

@@ -3,10 +3,32 @@ import { Store } from "@/types/student-client";
 
 export const useStore = defineStore("ecs", {
   state: () => {
-    return {} as Store;
+    return {
+      globalMaskCount: 0,
+    } as Store;
+  },
+  getters: {
+    /** 当前是否有globalMask */
+    hasGlobalMask(): boolean {
+      return store.globalMaskCount > 0;
+    },
+  },
+  actions: {
+    /** 增加当前的globalMaskCount */
+    increaseGlobalMaskCount(byWho: string) {
+      store.globalMaskCount++;
+      console.debug(byWho, "increaseGlobalMaskCount", store.globalMaskCount);
+    },
+    /** 减少当前的globalMaskCount */
+    decreaseGlobalMaskCount(byWho: string) {
+      store.globalMaskCount++;
+      console.debug(byWho, "decreaseGlobalMaskCount", store.globalMaskCount);
+      if (store.globalMaskCount < 0) {
+        console.error("store.globalMaskCount < 0");
+        store.globalMaskCount = 0;
+      }
+    },
   },
-  getters: {},
-  actions: {},
 });
 
 export let store = null as unknown as ReturnType<typeof useStore>;

src/types/global.d.ts

@@ -1,6 +1,7 @@
 // import filters from "@/filters";
 // import { default as message } from "ant-design-vue/lib/message";
 
+export {};
 // declare module "@vue/runtime-core" {
 // interface ComponentCustomProperties {
 // $filters: typeof filters;

src/types/student-client.d.ts

@@ -156,6 +156,7 @@ export type Store = {
     /** 获取摄像头，且在多页面共享，减少打开摄像头失败的次数 */
     stream: MediaStream | null;
   };
+  globalMaskCount: 0;
 };
 
 type SchoolDomain = `${string}.ecs.qmth.com.cn`;