Vue Academy · Pelajaran

useFetch: Komposabel Data Tak Segerak

ref data, pemuatan dan ralat, ambil data semasa dipasang, fungsi ambil semula, pembersihan AbortController.

Pelajaran 3 daripada 413 langkah

useFetch: Komposabel Data Tak Segerak ialah pelajaran Vue Academy percuma di CoddyKit. Ini ialah pelajaran 3 daripada 4. Sebanyak 3 pelajaran dalam laluan pembelajaran ini boleh dibaca sepenuhnya secara percuma — selepas itu, CoddyKit PRO membuka akses kepada semua pelajaran, serta latihan praktikal dengan penyunting kod terbina dalam dan tutor kecerdasan buatan yang tersedia 24/7. Pelajaran ini merupakan sebahagian daripada laluan pembelajaran Vue Academy, dan kemajuan anda disegerakkan merentas web serta aplikasi CoddyKit. Kursus Vue Academy merangkumi sejumlah 4 pelajaran.

Matlamat useFetch

Pemerolehan data tak segerak berulang di merata tempat: penanda pemuatan, pengendalian ralat dan permintaan itu sendiri. useFetch menggabungkan semuanya menjadi satu komposit boleh guna semula yang memulangkan data, loading dan error.

Tiga Rujukan Reaktif

Mulakan dengan tiga rujukan reaktif yang menerangkan keadaan mana-mana permintaan tak segerak.

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

Rutin Permintaan Data

Tulis fungsi tak segerak yang mengubah loading, melaksanakan permintaan dan menyimpan hasilnya. Kita akan memperkemas pengendalian ralat seterusnya.

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

cuba / tangkap / akhirnya

Bungkus permintaan supaya ralat masuk ke dalam error dan loading sentiasa ditetapkan semula, sama ada berjaya atau gagal, dalam blok 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;
  }
}

Membuat Permintaan dalam onMounted

Mulakan permintaan apabila komponen dipasang supaya data dimuatkan secara automatik.

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

Fungsi Mendapatkan Semula

Dedahkan execute sebagai refetch supaya pengguna boleh memuatkan semula data apabila diperlukan — selepas perubahan data atau melalui butang cuba lagi.

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

AbortController untuk Pembersihan

Jika komponen dinyahpasang ketika permintaan sedang berjalan, abort permintaan tersebut untuk mengelakkan keadaan pada komponen yang telah tiada daripada ditetapkan. Cipta AbortController dan hantarkan isyaratnya.

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

Membatalkan Semasa Nyahpasang

Batalkan permintaan yang sedang berjalan dalam onUnmounted. Abaikan ralat pembatalan yang terhasil dalam tangkapan.

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

useFetch Lengkap

Setelah disusun, komposit ini mengendalikan pemuatan, ralat, pemuatan semula dan pembersihan dalam satu unit yang kemas.

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 };
}

Menggunakannya dalam Komponen

Pengguna memaparkan kandungan berdasarkan tiga rujukan reaktif — pemutar semasa pemuatan, mesej ralat apabila gagal dan data pada keadaan lain.

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

Corak Templat

Buat percabangan berdasarkan keadaan dalam templat untuk pengalaman pengguna yang lengkap.

<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>

Semakan Ringkas

Apakah peranan AbortController dalam useFetch?

Jawab dalam pelajaran interaktif

Ringkasan

Anda telah membina useFetch(url) yang mendedahkan rujukan data, loading dan error, membuat permintaan dalam onMounted menggunakan corak cuba/tangkap/akhirnya, fungsi refetch, serta AbortController yang dibersihkan dalam onUnmounted.

Percuma untuk bermula

Pelajari HTML dengan tutor kecerdasan buatan — percuma

Tulis dan jalankan kod sebenar dalam pelayar anda, dapatkan bantuan segera daripada tutor kecerdasan buatan yang tersedia 24/7, dan sambung semula dari tempat anda berhenti di web atau dalam aplikasi.

Kursus: 42
Pelajaran: 156

Mula belajar secara percuma Lihat kursus penuh

Soalan Lazim

Adakah pelajaran “useFetch: Komposabel Data Tak Segerak” percuma?

Ya — sebanyak 3 pelajaran dalam laluan pembelajaran Vue Academy, termasuk “useFetch: Komposabel Data Tak Segerak”, boleh dibaca sepenuhnya secara percuma di web ini. Selepas itu, CoddyKit PRO membuka akses kepada semua pelajaran, serta latihan interaktif dengan penyunting kod terbina dalam dan tutor kecerdasan buatan yang tersedia 24/7. Kursus Vue Academy merangkumi sejumlah 4 pelajaran.

Apakah yang akan saya pelajari dalam “useFetch: Komposabel Data Tak Segerak”?

ref data, pemuatan dan ralat, ambil data semasa dipasang, fungsi ambil semula, pembersihan AbortController. Anda berlatih Vue Academy menggunakan kod praktikal yang dijalankan terus dalam pelayar, manakala tutor kecerdasan buatan 24/7 menjawab soalan anda semasa anda mengikuti pelajaran.

Adakah saya memerlukan pengalaman untuk memulakan Vue Academy?

Tiada pengalaman terdahulu diperlukan. Pembelajaran Vue Academy di CoddyKit disusun untuk pelajar daripada peringkat pemula hingga lanjutan, jadi anda boleh bermula di sini atau dari awal dan belajar mengikut kadar anda sendiri. Ini ialah pelajaran 3 daripada 4.

Berapa lamakah pelajaran “useFetch: Komposabel Data Tak Segerak” diambil?

Kebanyakan pelajaran CoddyKit mengambil masa kira-kira 5–10 minit. Setiap pelajaran ringkas dan interaktif, jadi anda boleh membuat kemajuan secara berterusan dan menyambung tepat dari tempat anda berhenti di web atau aplikasi.

Bolehkah saya menulis dan menjalankan kod dalam pelajaran Vue Academy ini?

Ya. Setiap pelajaran Vue Academy menyertakan penyunting kod terbina dalam, jadi anda boleh menulis dan menjalankan kod sebenar terus dalam pelayar serta menerima maklum balas kecerdasan buatan serta-merta — tanpa memerlukan persediaan setempat.

Semua pelajaran dalam kursus ini

← Kembali ke Vue Academy