useFetch: دالة Composable للبيانات غير المتزامنة

هدف useFetch

المراجع التفاعلية الثلاثة

import { ref } from "vue";
function useFetch(url) {
  const data = ref(null);
  const loading = ref(false);
  const error = ref(null);
}

روتين الجلب

async function execute() {
  loading.value = true;
  const res = await fetch(url);
  data.value = await res.json();
  loading.value = false;
}

try / catch / finally

async function execute() {
  loading.value = true;
  error.value = null;
  try {
    const res = await fetch(url);
    if (!res.ok) throw new Error("HTTP " + res.status);
    data.value = await res.json();
  } catch (e) {
    error.value = e;
  } finally {
    loading.value = false;
  }
}

الجلب في onMounted

import { onMounted } from "vue";
onMounted(execute);

دالة refetch

return { data, loading, error, refetch: execute };

AbortController للتنظيف

const controller = new AbortController();
const res = await fetch(url, { signal: controller.signal });

الإلغاء عند إزالة المكوّن

import { onUnmounted } from "vue";
onUnmounted(() => controller.abort());

useFetch كاملةً

function useFetch(url) {
  const data = ref(null);
  const loading = ref(false);
  const error = ref(null);
  const controller = new AbortController();
  async function execute() {
    loading.value = true; error.value = null;
    try {
      const res = await fetch(url, { signal: controller.signal });
      data.value = await res.json();
    } catch (e) {
      if (e.name !== "AbortError") error.value = e;
    } finally {
      loading.value = false;
    }
  }
  onMounted(execute);
  onUnmounted(() => controller.abort());
  return { data, loading, error, refetch: execute };
}

استخدامها في مكوّن

const { data, loading, error } = useFetch("/api/posts");

نمط القالب

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

اختبار سريع

مراجعة