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

This commit is contained in:
wangqiao
2025-09-07 15:26:01 +08:00
parent 7c82166781
commit 9f5942546d

View File

@ -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;
export type FetchOptions = Parameters<FetchType>[1];
type FetchType = typeof $fetch
export type FetchOptions = Parameters<FetchType>[1]
const useClientRequest = async <T = unknown>(
url: string,
opts?: FetchOptions
) => {
const token = useCookie<string | undefined>("token");
const runtimeConfig = useRuntimeConfig();
const useClientRequest = async <T = unknown>(url: string, opts?: FetchOptions) => {
const token = useCookie<string | undefined>('token')
const runtimeConfig = useRuntimeConfig()
const userStore = useUserStore()
const defaultOptions: FetchOptions = {
baseURL: runtimeConfig.public.apiBase,
onRequest({ options }) {
options.headers = options.headers || 'application/json';
if (token.value) {
options.headers.set("Authorization", `Bearer ${token.value}`);
options.headers = options.headers || 'application/json'
if (token.value || userStore.token) {
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(
isArray(response._data.data.msg)
? response._data.data.msg[0]
: response._data.data.msg
);
ElMessage.error(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;
};
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> => {
// 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>(
endpoint: string,
body?: any,
config?: Omit<FetchOptions, 'method' | 'body'>
): Promise<T> => {
// POST请求
export const post = <T = unknown>(endpoint: string, body?: any, config?: Omit<FetchOptions, 'method' | 'body'>): Promise<T> => {
return useClientRequest<T>(endpoint, { ...config, method: 'POST', body })
}
}
// DELETE请求
export const del = <T = unknown>(
endpoint: string,
config?: Omit<FetchOptions, 'method'>
): Promise<T> => {
// DELETE请求
export const del = <T = unknown>(endpoint: string, config?: Omit<FetchOptions, 'method'>): Promise<T> => {
return useClientRequest<T>(endpoint, { ...config, method: 'DELETE' })
}
}
// PUT请求
export const put = <T = unknown>(
endpoint: string,
body?: any,
config?: Omit<FetchOptions, 'method' | 'body'>
): Promise<T> => {
console.log({ ...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 })
}
}