useFetch: คอมโพสิเบิลสำหรับข้อมูลแบบอะซิงโครนัส

เป้าหมายของ 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);

ฟังก์ชันดึงข้อมูลใหม่

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>

ตรวจสอบความเข้าใจ

สรุป