117 lines
2.8 KiB
TypeScript
117 lines
2.8 KiB
TypeScript
/**
|
||
* 请求封装 - 基于 useFetch 二次封装
|
||
* 提供统一的请求配置、错误处理、Loading 状态等
|
||
*/
|
||
|
||
import type { UseFetchOptions } from "nuxt/app";
|
||
|
||
/**
|
||
* 请求配置选项 - 继承 Nuxt UseFetchOptions 并添加自定义选项
|
||
*/
|
||
export type RequestOptions<DataT = any> = UseFetchOptions<DataT, DataT> & {
|
||
/** 是否显示加载状态 */
|
||
showLoading?: boolean
|
||
/** 成功提示信息 */
|
||
successMsg?: string
|
||
/** 错误提示信息 */
|
||
errorMsg?: string
|
||
/** 是否手动触发 */
|
||
manual?: boolean
|
||
}
|
||
|
||
/**
|
||
* 封装后的请求方法
|
||
* @param url - 请求地址
|
||
* @param options - 请求配置
|
||
*/
|
||
export function useRequest<DataT = any, ErrorT = any>(url: string, options: RequestOptions<DataT> = {}) {
|
||
const config = useRuntimeConfig();
|
||
|
||
const {
|
||
// showLoading = false,
|
||
successMsg = "",
|
||
errorMsg = "",
|
||
manual = false,
|
||
...restOptions
|
||
} = options;
|
||
|
||
// 计算完整 URL
|
||
const fullUrl = computed(() => config.public.apiBaseUrl + url);
|
||
|
||
// 显示成功提示
|
||
const showSuccessTip = (msg: string) => {
|
||
if (msg) {
|
||
console.log(`[Success] ${msg}`);
|
||
}
|
||
};
|
||
|
||
// 显示错误提示
|
||
const showErrorTip = (msg: string, err?: any) => {
|
||
if (msg || errorMsg) {
|
||
const tip = msg || errorMsg || (err as Error)?.message || "请求失败";
|
||
console.error(`[Error] ${tip}`, err);
|
||
}
|
||
};
|
||
|
||
// 使用 useFetch 发起请求
|
||
const { data, error, execute, ...rest } = useFetch<DataT, ErrorT>(fullUrl, {
|
||
...restOptions,
|
||
// 请求完成后的回调
|
||
onResponse({ response }: any) {
|
||
if (showSuccessTip && response.ok) {
|
||
showSuccessTip(successMsg);
|
||
}
|
||
},
|
||
// 请求出错后的回调
|
||
onResponseError({ error }: any) {
|
||
showErrorTip(errorMsg, error);
|
||
},
|
||
} as any);
|
||
|
||
// 手动执行函数
|
||
const run = async () => {
|
||
await execute();
|
||
return { data: data.value, error: error.value };
|
||
};
|
||
|
||
// 立即执行（如果 manual 为 false）
|
||
if (!manual) {
|
||
void execute();
|
||
}
|
||
|
||
return {
|
||
data,
|
||
error,
|
||
execute: run,
|
||
...rest,
|
||
};
|
||
}
|
||
|
||
/**
|
||
* GET 请求
|
||
*/
|
||
export function useGet<DataT = any, ErrorT = any>(url: string, options: RequestOptions<DataT> = {}) {
|
||
return useRequest<DataT, ErrorT>(url, { ...options, method: "get" });
|
||
}
|
||
|
||
/**
|
||
* POST 请求
|
||
*/
|
||
export function usePost<DataT = any, ErrorT = any>(url: string, options: RequestOptions<DataT> = {}) {
|
||
return useRequest<DataT, ErrorT>(url, { ...options, method: "post" });
|
||
}
|
||
|
||
/**
|
||
* PUT 请求
|
||
*/
|
||
export function usePut<DataT = any, ErrorT = any>(url: string, options: RequestOptions<DataT> = {}) {
|
||
return useRequest<DataT, ErrorT>(url, { ...options, method: "put" });
|
||
}
|
||
|
||
/**
|
||
* DELETE 请求
|
||
*/
|
||
export function useDelete<DataT = any, ErrorT = any>(url: string, options: RequestOptions<DataT> = {}) {
|
||
return useRequest<DataT, ErrorT>(url, { ...options, method: "delete" });
|
||
}
|