Veri Çekme: useFetch ve useAsyncData
useFetch(), useAsyncData(), sunucu taraflı ve istemci taraflı veri çekme, refresh() ve beklemede durumu.
Veri Çekme: useFetch ve useAsyncData, CoddyKit'te ücretsiz bir Vue Academy dersidir. Bu, 4 dersinin 2. dersidir. Aşağıdan dersin tamamını ücretsiz okuyabilir, sonra tarayıcıda yerleşik kod editörü ve 7/24 yapay zeka koçu ile uygulamalı olarak pratik yapabilirsin. Bu, Vue Academy öğrenme yolunun bir parçasıdır ve ilerlemeniz web ve CoddyKit uygulaması arasında senkronize olur. Vue Academy kursu toplamda 4 dersten oluşur.
Nuxt'ta Veri Getirme
Nuxt, SSR farkındalığına sahip veri getirme composable'ları sağlar. Bunlar görüntüleme sırasında sunucuda çalışır ve sonuçları istemciye aktarır; böylece yinelenen bir istek ve boş içeriğin kısa süreli görünmesi önlenir.
useFetch Temelleri
useFetch, bir URL getirme işlemini sarar. Şablonda doğrudan kullanabileceğiniz reaktif data, pending ve error değerlerini döndürür.
<script setup>
const { data, pending, error } = await useFetch('/api/posts')
</script>Yükleme ve Hataları Gösterme
Yükleme durumu için pending, başarısızlıklar için error kullanın. Ayrıştırılmış JSON, data içinde tutulur.
<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>Özel Mantık için useAsyncData
Basit bir URL'den fazlasına ihtiyaç duyduğunuzda — çağrıları birleştirmek veya sonuçları dönüştürmek gibi — useAsyncData kullanın. Bu işlev, bir benzersiz anahtar ve veri çekici bir işlev alır.
const { data } = await useAsyncData('posts', () => {
return $fetch('/api/posts')
})Anahtar Neden Önemlidir
Anahtar, isteğin yinelenmesini önler ve isteği önbelleğe alır. Aynı anahtarı kullanan iki bileşen tek bir sonucu ve tek bir ağ çağrısını paylaşır; böylece gereksiz veri çekimleri önlenir.
useFetch Bir Kısayoldur
Arka planda useFetch(url), otomatik oluşturulan bir anahtar ve $fetch(url) veri çekicisiyle kullanılan useAsyncData işlevine temelde eşdeğerdir. Basit URL'ler için useFetch, özel veri çekiciler için useAsyncData kullanın.
server:false ile Yalnızca İstemci Tarafında
SSR sırasında veri çekmeyi atlamak ve bunu yalnızca istemcide çalıştırmak için server: false ayarlayın — bu, sunucu oluşturmasını engellememesi gereken kullanıcıya özel veriler için kullanışlıdır.
const { data } = await useFetch('/api/me', {
server: false
})Tembel, Engellemeyen Veri Çekimleri
Varsayılan olarak await, veriler gelene kadar gezinmeyi engeller. lazy seçeneği (veya useLazyFetch), sayfanın hemen oluşturulmasını ve veriler hazır olduğunda doldurulmasını sağlar.
const { data, pending } = useFetch('/api/posts', {
lazy: true
})refresh ile Yeniden Veri Çekme
Bileşim işlevleri, isteğe bağlı olarak veri çekmeyi yeniden çalıştırmak için bir refresh işlevi döndürür — örneğin bir değişiklik işleminden veya düğme tıklamasından sonra.
const { data, refresh } = await useFetch('/api/posts')
function reload() { refresh() }Tepkisel Sorgu Parametreleri
Bir query veya tepkisel seçenekler iletin; izlenen bir ref değiştiğinde veri çekme işlemi otomatik olarak yeniden çalışır. Bağımlılık değişikliklerinde yeniden veri çekmek için watch bağlayın.
const page = ref(1)
const { data } = await useFetch('/api/posts', {
query: { page },
watch: [page]
})Yanıtı Dönüştürme
transform seçeneği, yanıt data'ya ulaşmadan önce yanıtın biçimini değiştirir — yalnızca ihtiyacınız olan alanları seçmek ve istemciye gönderilen veri yükünü küçültmek için kullanışlıdır.
const { data } = await useFetch('/api/user', {
transform: (u) => ({ name: u.name, id: u.id })
})Hızlı Kontrol
Nuxt veri çekme konusundaki bilginizi sınayın.
Özet
Nuxt veri çekmeyi öğrendiniz:
- useFetch, tepkisel verilerle birlikte pending ve error döndürür.
- useAsyncData, özel mantık için bir anahtar ve veri çekici alır.
- server:false yalnızca istemcide çalışır; lazy, veri çekme işlemini engellemez.
- refresh() veriyi yeniden çeker; watch, bağımlılık değiştiğinde yeniden çalışır.
Sıkça Sorulan Sorular
“Veri Çekme: useFetch ve useAsyncData” dersi ücretsiz mi?
Evet — “Veri Çekme: useFetch ve useAsyncData” dersin tüm metni burada web'de ücretsiz olarak okunabilir. Etkileşimli olarak pratik yapmak (yerleşik kod editörü ve 7/24 yapay zeka koçu) ve Vue Academy kursunun geri kalanını açmak için CoddyKit PRO'ya yükselt. Vue Academy kursu toplamda 4 dersten oluşur.
“Veri Çekme: useFetch ve useAsyncData” dersinde ne öğreneceğim?
useFetch(), useAsyncData(), sunucu taraflı ve istemci taraflı veri çekme, refresh() ve beklemede durumu. Vue Academy ile uygulamalı kodu tarayıcıda doğrudan çalıştırarak pratik yaparsın ve 7/24 yapay zeka koçu dersi çalışırken sorularını yanıtlar.
Vue Academy öğrenmeye başlamak için deneyim gerekli mi?
Önceden deneyim gerekmez. CoddyKit'te Vue Academy, başlangıçtan ileri seviyeye kadar yapılandırıldığı için buradan başlayabilir veya başından başlayıp kendi hızında ilerleme yapabilirsin. Bu, 4 dersinin 2. dersidir.
“Veri Çekme: useFetch ve useAsyncData” dersi ne kadar sürer?
Çoğu CoddyKit dersi yaklaşık 5–10 dakika sürer. Her biri kısa ve etkileşimli olduğu için sabit ilerleme yaparsın ve web ile uygulama arasında tam olarak bıraktığın yerden devam edebilirsin.
Bu Vue Academy dersinde kod yazıp çalıştırabilir miyim?
Evet. Her Vue Academy dersi yerleşik bir kod editörü içerir, bu sayede tarayıcıda gerçek kod yazıp çalıştırabilir ve anlık yapay zeka geri bildirimi alırsın — yerel kurulum gerekli değildir.
Bu kursun tüm dersleri
- Nuxt 3 Proje Yapısı ve Dosya Tabanlı Yönlendirme
- Veri Çekme: useFetch ve useAsyncData
- Nuxt Sunucu Route'ları ve API Uç Noktaları
- SSR ve SSG ile SPA Modu