组合式 API 与自定义 Hook

一、为什么要抽 Hook

复用逻辑、关注点分离、易于测试。

二、示例

ts 复制代码

export function useFetch<T>(url: string) {
  const data = ref<T>()
  const error = ref<string>()
  const loading = ref(false)

  const execute = async () => {
    loading.value = true
    try {
      const res = await fetch(url)
      data.value = await res.json()
    } catch (e: any) {
      error.value = e.message
    } finally {
      loading.value = false
    }
  }

  onMounted(execute)
  return { data, error, loading, execute }
}