refactor: 优化请求封装和用户状态管理

composables/useDollarFetchRequest.ts

@@ -1,77 +1,56 @@
-import { isArray } from "~/utils/utils";
+import { isArray } from '~/utils/utils'
+import useUserStore from '~/stores/user'
 // import refreshToken from "~/utils/RefreshToken";
 
-type FetchType = typeof $fetch;
+type FetchType = typeof $fetch
-export type FetchOptions = Parameters<FetchType>[1];
+export type FetchOptions = Parameters<FetchType>[1]
 
-const useClientRequest = async <T = unknown>(
+const useClientRequest = async <T = unknown>(url: string, opts?: FetchOptions) => {
-  url: string,
+  const token = useCookie<string | undefined>('token')
-  opts?: FetchOptions
+  const runtimeConfig = useRuntimeConfig()
-) => {
+  const userStore = useUserStore()
-  const token = useCookie<string | undefined>("token");
-  const runtimeConfig = useRuntimeConfig();
 
   const defaultOptions: FetchOptions = {
     baseURL: runtimeConfig.public.apiBase,
     onRequest({ options }) {
-      options.headers = options.headers || 'application/json';
+      options.headers = options.headers || 'application/json'
-      if (token.value) {
+      if (token.value || userStore.token) {
-        options.headers.set("Authorization", `Bearer ${token.value}`);
+        options.headers.set('Authorization', `Bearer ${token.value || userStore.token}`)
       }
     },
     onResponse({ response }) {
       if (+response.status === 200 && +response._data.code !== 0) {
-        ElMessage.error(response._data.msg);
+        ElMessage.error(response._data.msg)
       }
     },
     onResponseError({ response }) {
-      ElMessage.error(
+      ElMessage.error(isArray(response._data.data.msg) ? response._data.data.msg[0] : response._data.data.msg)
-        isArray(response._data.data.msg)
-          ? response._data.data.msg[0]
-          : response._data.data.msg
-      );
     },
-  };
-
-   // 明确转换返回类型
-  const response = await $fetch(url, { ...defaultOptions, ...opts });
-  return response as unknown as T;
-};
-
-  // GET请求
-  export const get = <T = unknown>(
-    endpoint: string, 
-    config?: Omit<FetchOptions, 'method'>
-  ): Promise<T> => {
-    return useClientRequest<T>(endpoint, { ...config, method: 'GET' })
-
   }
 
-    // POST请求
+  // 明确转换返回类型
-  export const post = <T = unknown>(
+  const response = await $fetch(url, { ...defaultOptions, ...opts })
-    endpoint: string, 
+  return response as unknown as T
-    body?: any, 
+}
-    config?: Omit<FetchOptions, 'method' | 'body'>
-  ): Promise<T> => {
-    return useClientRequest<T>(endpoint, { ...config, method: 'POST', body })
-  }
 
+// GET请求
+export const get = <T = unknown>(endpoint: string, config?: Omit<FetchOptions, 'method'>): Promise<T> => {
+  return useClientRequest<T>(endpoint, { ...config, method: 'GET' })
+}
 
-  // DELETE请求
+// POST请求
-  export const del = <T = unknown>(
+export const post = <T = unknown>(endpoint: string, body?: any, config?: Omit<FetchOptions, 'method' | 'body'>): Promise<T> => {
-    endpoint: string, 
+  return useClientRequest<T>(endpoint, { ...config, method: 'POST', body })
-    config?: Omit<FetchOptions, 'method'>
+}
-  ): Promise<T> => {
-    return useClientRequest<T>(endpoint, { ...config, method: 'DELETE' })
-  }
 
-    // PUT请求
+// DELETE请求
-  export const put = <T = unknown>(
+export const del = <T = unknown>(endpoint: string, config?: Omit<FetchOptions, 'method'>): Promise<T> => {
-    endpoint: string, 
+  return useClientRequest<T>(endpoint, { ...config, method: 'DELETE' })
-    body?: any, 
+}
-    config?: Omit<FetchOptions, 'method' | 'body'>
-  ): Promise<T> => {
-    console.log({ ...config, method: 'PUT', body });
 
-    return useClientRequest<T>(endpoint, { ...config, method: 'PUT', body })
+// PUT请求
-  }
+export const put = <T = unknown>(endpoint: string, body?: any, config?: Omit<FetchOptions, 'method' | 'body'>): Promise<T> => {
+  console.log({ ...config, method: 'PUT', body })
+
+  return useClientRequest<T>(endpoint, { ...config, method: 'PUT', body })
+}