Vue Academy · Ders

useFetch: Asenkron Veri Composable'ı

data, loading ve error ref'leri, bağlanma sırasında veri çekme, yeniden veri çekme işlevi ve AbortController temizliği.

useFetch: Asenkron Veri Composable'ı, CoddyKit'te ücretsiz bir Vue Academy dersidir. Bu, 4 dersinin 3. 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.

useFetch Amacı

Eşzamansız veri getirme her yerde tekrarlanır: yükleme bayrakları, hata yönetimi ve isteğin kendisi. useFetch bunları data, loading ve error döndüren, yeniden kullanılabilir tek bir birleştirilebilir işlevde toplar.

Üç Reaktif Referans

Herhangi bir eşzamansız istek durumunu açıklayan üç referansla başlayın.

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

Veri Getirme Rutini

loading değerini değiştiren, isteği gerçekleştiren ve sonucu saklayan eşzamansız bir işlev yazın. Hata yönetimini bir sonraki adımda geliştireceğiz.

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

try / catch / finally

İsteği, hataların error içine aktarılması ve başarılı ya da başarısız olmasına bakılmaksızın loading değerinin finally içinde her zaman sıfırlanması için sarın.

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 İçinde Veri Getirme

Verilerin otomatik olarak yüklenmesi için isteği bileşen bağlandığında başlatın.

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

Yeniden Getirme İşlevi

Tüketicilerin isteği gerektiğinde, örneğin bir değişiklikten veya yeniden deneme düğmesine basıldıktan sonra yükleyebilmesi için execute değerini refetch adıyla dışa açın.

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

Temizleme İçin AbortController

Bileşen istek devam ederken kaldırılırsa, kaldırılmış bir bileşenin durumunu değiştirmemek için veri getirme işlemini durdurun. Bir AbortController oluşturun ve sinyalini geçirin.

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

Kaldırılırken İptal Etme

Devam eden isteği onUnmounted içinde iptal edin. Oluşan iptal hatasını yakalama bölümünde yok sayın.

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

Eksiksiz useFetch

Birleştirildiğinde birleştirilebilir işlev; yüklemeyi, hataları, yeniden veri getirmeyi ve temizlemeyi tek bir düzenli birimde yönetir.

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

Bir Bileşende Kullanma

Tüketiciler üç referansa göre görünüm oluşturur: yükleme sırasında bir yükleniyor göstergesi, başarısızlık durumunda bir hata iletisi, diğer durumlarda ise veriler.

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

Şablon Düzeni

Eksiksiz bir kullanıcı deneyimi için şablonda duruma göre dallanın.

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

Kısa Kontrol

useFetch içinde AbortController hangi görevi üstlenir?

Özet

data, loading ve error referanslarını dışa açan useFetch(url) birleştirilebilir işlevini oluşturdunuz. Bu işlev, try/catch/finally düzeniyle onMounted içinde veri getirir, bir refetch işlevi sunar ve onUnmounted içinde temizlenen bir AbortController kullanır.

Sıkça Sorulan Sorular

“useFetch: Asenkron Veri Composable'ı” dersi ücretsiz mi?

Evet — “useFetch: Asenkron Veri Composable'ı” 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.

“useFetch: Asenkron Veri Composable'ı” dersinde ne öğreneceğim?

data, loading ve error ref'leri, bağlanma sırasında veri çekme, yeniden veri çekme işlevi ve AbortController temizliği. 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 3. dersidir.

“useFetch: Asenkron Veri Composable'ı” 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

← Vue Academy Sayfasına Dön