2024-05-20 08:52:02 +08:00
|
|
|
|
import { UnwrapRef } from 'vue'
|
|
|
|
|
|
2024-04-17 15:32:15 +08:00
|
|
|
|
type IUseRequestOptions<T> = {
|
2024-06-08 15:59:49 +08:00
|
|
|
|
/** 是否立即执行 */
|
2024-04-17 15:32:15 +08:00
|
|
|
|
immediate?: boolean
|
|
|
|
|
/** 初始化数据 */
|
|
|
|
|
initialData?: T
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/**
|
|
|
|
|
* useRequest是一个定制化的请求钩子,用于处理异步请求和响应。
|
|
|
|
|
* @param func 一个执行异步请求的函数,返回一个包含响应数据的Promise。
|
|
|
|
|
* @param options 包含请求选项的对象 {immediate, initialData}。
|
2024-06-08 15:59:49 +08:00
|
|
|
|
* @param options.immediate 是否立即执行请求,默认为false。
|
2024-04-17 15:32:15 +08:00
|
|
|
|
* @param options.initialData 初始化数据,默认为undefined。
|
|
|
|
|
* @returns 返回一个对象{loading, error, data, run},包含请求的加载状态、错误信息、响应数据和手动触发请求的函数。
|
|
|
|
|
*/
|
|
|
|
|
export default function useRequest<T>(
|
|
|
|
|
func: () => Promise<IResData<T>>,
|
2024-06-08 15:59:49 +08:00
|
|
|
|
options: IUseRequestOptions<T> = { immediate: false },
|
2024-04-17 15:32:15 +08:00
|
|
|
|
) {
|
|
|
|
|
const loading = ref(false)
|
|
|
|
|
const error = ref(false)
|
2024-05-20 08:52:02 +08:00
|
|
|
|
const data = ref<T>(options.initialData)
|
2024-04-17 15:32:15 +08:00
|
|
|
|
const run = async () => {
|
|
|
|
|
loading.value = true
|
2024-06-08 15:56:47 +08:00
|
|
|
|
return func()
|
2024-04-17 15:32:15 +08:00
|
|
|
|
.then((res) => {
|
2024-05-20 08:52:02 +08:00
|
|
|
|
data.value = res.data as UnwrapRef<T>
|
2024-04-17 15:32:15 +08:00
|
|
|
|
error.value = false
|
2024-06-08 15:56:47 +08:00
|
|
|
|
return data.value
|
2024-04-17 15:32:15 +08:00
|
|
|
|
})
|
|
|
|
|
.catch((err) => {
|
|
|
|
|
error.value = err
|
2024-06-08 15:56:47 +08:00
|
|
|
|
throw err
|
2024-04-17 15:32:15 +08:00
|
|
|
|
})
|
|
|
|
|
.finally(() => {
|
|
|
|
|
loading.value = false
|
|
|
|
|
})
|
|
|
|
|
}
|
|
|
|
|
|
2024-06-08 15:59:49 +08:00
|
|
|
|
options.immediate && run()
|
2024-04-17 15:32:15 +08:00
|
|
|
|
return { loading, error, data, run }
|
|
|
|
|
}
|