vue3 自定义hook

// 自定义 Hook 示例: useFetch

// 1. 创建一个自定义 Hook 文件，例如 useFetch.js

import { ref, onMounted } from 'vue';

export function useFetch(url) {
  const data = ref(null);
  const error = ref(null);
  const loading = ref(true);

  // 在组件挂载时发起请求
  onMounted(async () => {
    try {
      const response = await fetch(url);
      if (!response.ok) {
        throw new Error('Network response was not ok');
      }
      data.value = await response.json();
    } catch (err) {
      error.value = err;
    } finally {
      loading.value = false;
    }
  });

  return { data, error, loading };
}

// 2. 在组件中使用这个 Hook

<template>
  <div v-if="loading">Loading...</div>
  <div v-else-if="error">{{ error.message }}</div>
  <div v-else>
    <ul>
      <li v-for="item in data" :key="item.id">{{ item.name }}</li>
    </ul>
  </div>
</template>

<script>
import { useFetch } from './useFetch';

export default {
  setup() {
    const { data, error, loading } = useFetch('https://api.example.com/data');

    return { data, error, loading };
  }
};
</script>

解释说明：

1. 创建自定义 Hook：

   • useFetch 是一个自定义 Hook，它接受一个 URL 参数，并返回三个响应式变量：data、error 和 loading。
   • 使用 ref 来创建这些响应式变量。
   • 使用 onMounted 钩子在组件挂载时发起网络请求。

2. 发起网络请求：

   • 使用 fetch API 发起 GET 请求。
   • 如果请求成功，将响应数据赋值给 data。
   • 如果请求失败，捕获错误并赋值给 error。
   • 不管成功或失败，最终都会将 loading 设为 false。

3. 在组件中使用自定义 Hook：

   • 在 setup 函数中调用 useFetch 并返回解构后的变量，以便在模板中使用。