useRequest.ts 1.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051
  1. import type { Ref } from 'vue'
  2. interface IUseRequestOptions<T> {
  3. /** 是否立即执行 */
  4. immediate?: boolean
  5. /** 初始化数据 */
  6. initialData?: T
  7. }
  8. interface IUseRequestReturn<T> {
  9. loading: Ref<boolean>
  10. error: Ref<boolean | Error>
  11. data: Ref<T | undefined>
  12. run: () => Promise<T | undefined>
  13. }
  14. /**
  15. * useRequest是一个定制化的请求钩子,用于处理异步请求和响应。
  16. * @param func 一个执行异步请求的函数,返回一个包含响应数据的Promise。
  17. * @param options 包含请求选项的对象 {immediate, initialData}。
  18. * @param options.immediate 是否立即执行请求,默认为false。
  19. * @param options.initialData 初始化数据,默认为undefined。
  20. * @returns 返回一个对象{loading, error, data, run},包含请求的加载状态、错误信息、响应数据和手动触发请求的函数。
  21. */
  22. export default function useRequest<T>(
  23. func: () => Promise<IResData<T>>,
  24. options: IUseRequestOptions<T> = { immediate: false },
  25. ): IUseRequestReturn<T> {
  26. const loading = ref(false)
  27. const error = ref(false)
  28. const data = ref<T | undefined>(options.initialData) as Ref<T | undefined>
  29. const run = async () => {
  30. loading.value = true
  31. return func()
  32. .then((res) => {
  33. data.value = res.data
  34. error.value = false
  35. return data.value
  36. })
  37. .catch((err) => {
  38. error.value = err
  39. throw err
  40. })
  41. .finally(() => {
  42. loading.value = false
  43. })
  44. }
  45. options.immediate && run()
  46. return { loading, error, data, run }
  47. }