useFetch: Composable Data Asinkron
Ref data, loading, dan error, fetch saat mount, fungsi refetch, serta pembersihan AbortController.
useFetch: Composable Data Asinkron adalah pelajaran Vue Academy gratis di CoddyKit. Ini adalah pelajaran 3 dari 4. Kamu bisa membaca pelajaran lengkapnya di bawah secara gratis — lalu praktikkan langsung di browser dengan editor kode bawaan dan tutor AI 24/7. Ini adalah bagian dari jalur belajar Vue Academy, dan progresmu tersinkronisasi di web dan aplikasi CoddyKit. Kursus Vue Academy mencakup 4 pelajaran total.
Tujuan useFetch
Pengambilan data asinkron berulang di banyak tempat: penanda pemuatan, penanganan kesalahan, dan permintaannya sendiri. useFetch menggabungkan semuanya menjadi satu komposabel yang dapat digunakan kembali dan mengembalikan data, loading, serta error.
Tiga Ref Reaktif
Mulailah dengan tiga ref yang menggambarkan keadaan permintaan asinkron apa pun.
import { ref } from "vue";
function useFetch(url) {
const data = ref(null);
const loading = ref(false);
const error = ref(null);
}Rutinitas Pengambilan Data
Tulis fungsi asinkron yang mengubah loading, menjalankan permintaan, dan menyimpan hasilnya. Selanjutnya kita akan menyempurnakan penanganan kesalahan.
async function execute() {
loading.value = true;
const res = await fetch(url);
data.value = await res.json();
loading.value = false;
}try / catch / finally
Bungkus permintaan tersebut agar kesalahan masuk ke error dan loading selalu diatur ulang, baik berhasil maupun gagal, di dalam 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;
}
}Mengambil Data di onMounted
Mulai permintaan saat komponen dipasang agar data dimuat secara otomatis.
import { onMounted } from "vue";
onMounted(execute);Fungsi Memuat Ulang
Tampilkan execute sebagai refetch agar pengguna dapat memuat ulang sesuai kebutuhan—setelah perubahan data atau saat tombol coba lagi ditekan.
return { data, loading, error, refetch: execute };AbortController untuk Pembersihan
Jika komponen dilepas saat permintaan masih berlangsung, batalkan pengambilan data agar keadaan tidak diatur pada komponen yang sudah tidak aktif. Buat AbortController dan teruskan sinyalnya.
const controller = new AbortController();
const res = await fetch(url, { signal: controller.signal });Membatalkan Saat Dilepas
Batalkan permintaan yang sedang berlangsung di onUnmounted. Abaikan kesalahan pembatalan yang dihasilkan dalam blok catch.
import { onUnmounted } from "vue";
onUnmounted(() => controller.abort());useFetch Lengkap
Setelah dirangkai, komposabel ini menangani pemuatan, kesalahan, pemuatan ulang, dan pembersihan dalam satu unit yang rapi.
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 merender berdasarkan tiga ref—pemutar saat memuat, pesan kesalahan saat gagal, dan data dalam kondisi lainnya.
const { data, loading, error } = useFetch("/api/posts");Pola Templat
Buat percabangan berdasarkan keadaan di 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>Pemeriksaan Singkat
Apa peran AbortController dalam useFetch?
Ringkasan
Anda telah membangun useFetch(url) yang mengekspos ref data, loading, dan error, mengambil data di onMounted dengan pola try/catch/finally, menyediakan fungsi refetch, serta menggunakan AbortController yang dibersihkan di onUnmounted.
Belajar HTML dengan tutor AI — gratis
Tulis dan jalankan kode asli di browser kamu, dapatkan bantuan instan dari tutor AI 24/7, dan lanjutkan di mana kamu tinggalkan di web atau aplikasi.
- Kursus
- 42
- Pelajaran
- 156
Pertanyaan yang Sering Diajukan
Apakah pelajaran “useFetch: Composable Data Asinkron” gratis?
Ya — teks lengkap “useFetch: Composable Data Asinkron” gratis dibaca di sini di web. Untuk praktiknya secara interaktif (editor kode bawaan dan tutor AI 24/7) dan buka sisa kursus Vue Academy, upgrade ke CoddyKit PRO. Kursus Vue Academy mencakup 4 pelajaran total.
Apa yang akan aku pelajari di “useFetch: Composable Data Asinkron”?
Ref data, loading, dan error, fetch saat mount, fungsi refetch, serta pembersihan AbortController. Kamu berlatih Vue Academy dengan kode praktik yang langsung kamu jalankan di browser, dan tutor AI 24/7 menjawab pertanyaanmu saat kamu mengerjakan pelajaran ini.
Apakah aku perlu pengalaman untuk memulai Vue Academy?
Tidak diperlukan pengalaman sebelumnya. Vue Academy di CoddyKit dirancang untuk pemula hingga pelajar tingkat lanjut, jadi kamu bisa memulai di sini atau dari awal dan belajar sesuai kecepatan kamu sendiri. Ini adalah pelajaran 3 dari 4.
Berapa lama pelajaran “useFetch: Composable Data Asinkron” memakan waktu?
Sebagian besar pelajaran CoddyKit memakan waktu sekitar 5–10 menit. Setiap pelajaran ringkas dan interaktif, jadi kamu membuat kemajuan stabil dan melanjutkan dari tempat kamu tinggalkan di web dan aplikasi.
Bisakah aku menulis dan menjalankan kode dalam pelajaran Vue Academy ini?
Ya. Setiap pelajaran Vue Academy menyertakan editor kode bawaan, jadi kamu menulis dan menjalankan kode nyata langsung di browser dan mendapatkan umpan balik AI instan — tidak diperlukan penyiapan lokal.
Semua pelajaran dalam kursus ini
- Ciri Composable yang Baik
- useCounter: Composable Sederhana
- useFetch: Composable Data Asinkron
- VueUse: Pustaka Composable