Pengambilan Data: useFetch dan useAsyncData
useFetch(), useAsyncData(), pengambilan data di server vs klien, refresh(), serta state pending.
Pengambilan Data: useFetch dan useAsyncData adalah pelajaran Vue Academy gratis di CoddyKit. Ini adalah pelajaran 2 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.
Mengambil Data di Nuxt
Nuxt menyediakan fungsi komposabel untuk mengambil data yang mendukung SSR. Fungsi ini berjalan di server selama render dan meneruskan hasilnya ke klien, sehingga menghindari permintaan duplikat dan tampilan singkat tanpa konten.
Dasar-Dasar useFetch
useFetch membungkus pengambilan dari URL. Fungsi ini mengembalikan nilai data, pending, dan error yang reaktif dan dapat langsung Anda gunakan di dalam templat.
<script setup>
const { data, pending, error } = await useFetch('/api/posts')
</script>Menampilkan Status Pemuatan dan Galat
Gunakan pending untuk status pemuatan dan error untuk kegagalan. data menyimpan JSON yang telah diurai.
<template>
<p v-if="pending">Loading...</p>
<p v-else-if="error">Failed to load</p>
<ul v-else>
<li v-for="p in data" :key="p.id">{{ p.title }}</li>
</ul>
</template>useAsyncData untuk Logika Khusus
Saat Anda memerlukan lebih dari sekadar URL biasa—seperti menggabungkan beberapa panggilan atau mengubah hasil—gunakan useAsyncData. Fungsi ini menerima kunci unik dan fungsi pengambil data.
const { data } = await useAsyncData('posts', () => {
return $fetch('/api/posts')
})Mengapa Kunci Penting
Kunci mencegah duplikasi dan menyimpan permintaan dalam cache. Dua komponen yang menggunakan kunci sama akan berbagi satu hasil dan satu panggilan jaringan, sehingga pengambilan data yang berulang dapat dihindari.
useFetch Adalah Pintasan
Di balik layar, useFetch(url) pada dasarnya adalah useAsyncData dengan kunci yang dibuat otomatis dan fungsi pengambil data $fetch(url). Gunakan useFetch untuk URL sederhana dan useAsyncData untuk fungsi pengambil data khusus.
Hanya di Klien dengan server:false
Atur server: false untuk melewati pengambilan data selama SSR dan menjalankannya hanya di klien—berguna untuk data khusus pengguna yang tidak boleh menghambat perenderan di server.
const { data } = await useFetch('/api/me', {
server: false
})Pengambilan Data Tertunda Tanpa Pemblokiran
Secara default, await menahan navigasi hingga data tiba. Opsi lazy (atau useLazyFetch) memungkinkan halaman langsung ditampilkan dan diisi dengan data setelah prosesnya selesai.
const { data, pending } = useFetch('/api/posts', {
lazy: true
})Mengambil Ulang dengan refresh
Komposabel tersebut mengembalikan fungsi refresh untuk menjalankan ulang pengambilan data sesuai kebutuhan—setelah mutasi atau saat tombol diklik.
const { data, refresh } = await useFetch('/api/posts')
function reload() { refresh() }Parameter Kueri Reaktif
Berikan query atau opsi reaktif; saat ref yang dipantau berubah, pengambilan data akan berjalan ulang secara otomatis. Kaitkan watch untuk mengambil ulang data saat dependensi berubah.
const page = ref(1)
const { data } = await useFetch('/api/posts', {
query: { page },
watch: [page]
})Mengubah Bentuk Respons
Opsi transform mengubah bentuk respons sebelum respons tersebut masuk ke data—berguna untuk memilih hanya bidang yang Anda perlukan dan mengurangi muatan data yang dikirim ke klien.
const { data } = await useFetch('/api/user', {
transform: (u) => ({ name: u.name, id: u.id })
})Uji Singkat
Uji pengetahuan Anda tentang pengambilan data Nuxt.
Ringkasan
Anda telah mempelajari pengambilan data Nuxt:
- useFetch mengembalikan data reaktif, pending, dan error.
- useAsyncData menerima kunci serta fungsi pengambil data untuk logika khusus.
- server:false hanya berjalan di klien; lazy membuat pengambilan data tidak memblokir.
- refresh() mengambil ulang data; watch menjalankan ulang proses saat dependensi berubah.
Pertanyaan yang Sering Diajukan
Apakah pelajaran “Pengambilan Data: useFetch dan useAsyncData” gratis?
Ya — teks lengkap “Pengambilan Data: useFetch dan useAsyncData” 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 “Pengambilan Data: useFetch dan useAsyncData”?
useFetch(), useAsyncData(), pengambilan data di server vs klien, refresh(), serta state pending. 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 2 dari 4.
Berapa lama pelajaran “Pengambilan Data: useFetch dan useAsyncData” 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
- Struktur Proyek Nuxt 3 dan Perutean Berbasis File
- Pengambilan Data: useFetch dan useAsyncData
- Rute Server dan Endpoint API Nuxt
- Mode SSR vs SSG vs SPA