fix:modify the usage of axios (goplus#147)

* fix:modify the usage of axios

* fix:decoupling naiveui message prompts from axios init

* fix:modify the object exported by axios to the original 'service'

spx-gui/src/api/asset.ts

@@ -1,9 +1,9 @@
 /*
  * @Author: Yao xinyue
  * @Date: 2024-01-22 11:17:08
- * @LastEditors: xuning [email protected]
- * @LastEditTime: 2024-03-06 11:33:15
- * @FilePath: /builder/spx-gui/src/api/asset.ts
+ * @LastEditors: Zhang Zhi Yang
+ * @LastEditTime: 2024-03-06 14:50:20
+ * @FilePath: \spx-gui\src\api\asset.ts
  * @Description:
  */
 import { service } from '@/axios'

spx-gui/src/axios/index.ts

@@ -1,59 +1,72 @@
 /*
  * @Author: Yao Xinyue
  * @Date: 2024-01-22 11:17:08
- * @LastEditors: xuning [email protected]
- * @LastEditTime: 2024-02-06 20:18:02
- * @FilePath: /builder/spx-gui/src/axios/index.ts
+ * @LastEditors: Zhang Zhi Yang
+ * @LastEditTime: 2024-03-06 14:53:27
+ * @FilePath: \spx-gui\src\axios\index.ts
  * @Description:
  */
-import { createDiscreteApi } from 'naive-ui'
-import axios, { type AxiosResponse } from 'axios'
-import { useUserStore } from '@/store'
 
+import axios, { type AxiosResponse, type AxiosInstance } from 'axios'
 const baseURL = import.meta.env.VITE_API_BASE_URL
 
-const service = axios.create({
-  baseURL: baseURL,
-  timeout: 15000
-})
-
-const { message } = createDiscreteApi(['message'])
-
 export interface ResponseData<T> {
   code: number
   data: T
   msg: string
 }
 
-service.interceptors.request.use(
-  async (config) => {
-    const userStore = useUserStore()
-
-    const token = await userStore.getFreshAccessToken()
-    if (token) {
-      config.headers['Authorization'] = `Bearer ${token}`
-    }
-    return config
-  },
-  (error) => {
-    message.error(error.message)
-    return Promise.reject(error)
+class Service {
+  accessTokenFn: (() => Promise<string | null>) | null = null
+  notifyErrorFn: ((error: string) => void) | null = null
+  serviceInstance: AxiosInstance
+  constructor() {
+    this.serviceInstance = this.initAxios()
   }
-)
-
-//  response interceptor
-service.interceptors.response.use(
-  (response: AxiosResponse<ResponseData<unknown>>) => {
-    if (response.data.code >= 200 && response.data.code < 300) {
-      return response
-    } else {
-      message.error(response.data.msg)
-      return Promise.reject(new Error(response.data.msg || 'Error'))
-    }
-  },
-  (error) => {
-    message.error(error.message)
-    return Promise.reject(error)
+  private initAxios() {
+    const service = axios.create({
+      baseURL: baseURL,
+      timeout: 15000
+    })
+    service.interceptors.request.use(
+      async (config) => {
+        if (this.accessTokenFn) {
+          const token = await this.accessTokenFn()
+          if (token) {
+            config.headers['Authorization'] = `Bearer ${token}`
+          }
+        }
+        return config
+      },
+      (error) => {
+        this.notifyErrorFn && this.notifyErrorFn(error.message)
+        return Promise.reject(error)
+      }
+    )
+    //  response interceptor
+    service.interceptors.response.use(
+      (response: AxiosResponse<ResponseData<unknown>>) => {
+        if (response.data.code >= 200 && response.data.code < 300) {
+          return response
+        } else {
+          this.notifyErrorFn && this.notifyErrorFn(response.data.msg)
+          return Promise.reject(new Error(response.data.msg || 'Error'))
+        }
+      },
+      (error) => {
+        this.notifyErrorFn && this.notifyErrorFn(error.message)
+        return Promise.reject(error)
+      }
+    )
+    return service
   }
-)
-export { service, baseURL }
+  setAccessTokenFn(accessTokenFn: () => Promise<string | null>) {
+    this.accessTokenFn = accessTokenFn
+  }
+  setNotifyErrorFn(notifyErrorFn: (msg: string) => void) {
+    this.notifyErrorFn = notifyErrorFn
+  }
+}
+const serviceConstructor = new Service()
+const service = serviceConstructor.serviceInstance
+export { service, serviceConstructor, baseURL }

spx-gui/src/main.ts

@@ -2,20 +2,29 @@
  * @Author: Xu Ning
  * @Date: 2024-01-12 11:15:15
  * @LastEditors: Zhang Zhi Yang
- * @LastEditTime: 2024-01-25 14:21:02
- * @FilePath: /builder/spx-gui/src/main.ts
+ * @LastEditTime: 2024-03-06 14:38:25
+ * @FilePath: \spx-gui\src\main.ts
  * @Description:
  */
 import { createApp } from 'vue'
 import App from './App.vue'
-
 import { initAssets, initCodeEditor } from './plugins'
 import { initRouter } from '@/router/index'
 import { initI18n } from '@/language'
-
 import { addFileUrl } from './util/file'
 import VueKonva from 'vue-konva'
-import { initStore } from './store'
+import { initStore, useUserStore } from './store'
+import { serviceConstructor } from '@/axios'
+import { createDiscreteApi } from 'naive-ui'
+
+const { message } = createDiscreteApi(['message'])
+const initServive = async () => {
+  const userStore = useUserStore()
+  serviceConstructor.setAccessTokenFn(userStore.getFreshAccessToken)
+  serviceConstructor.setNotifyErrorFn((msg: string) => {
+    message.error(msg)
+  })
+}
 
 async function initApp() {
   // const loading = createApp(Loading);
@@ -28,7 +37,7 @@ async function initApp() {
   const app = createApp(App)
 
   initStore(app)
-
+  initServive()
   await initRouter(app)
   await initCodeEditor()