Vue Academy · Ders

Hata Yönetimi ve Genel Araya Giriciler

İstek hatalarını yönetin ve Axios araya giricilerini yapılandırın.

Hata Yönetimi ve Genel Araya Giriciler, CoddyKit'te ücretsiz bir Vue Academy dersidir. Bu, 3 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 3 dersten oluşur.

İstekler Başarısız Olabilir

Ağ bağlantıları kopabilir, sunucular hata döndürebilir ve belirteçlerin süresi dolabilir. Sağlam uygulamalar başarısızlıkları öngörür ve çökmeden veya kullanıcıyı sonsuza kadar bir yüklenme göstergesine bakar hâlde bırakmadan uygun şekilde yanıt verir.

İsteklerin Çevresinde try/catch

Hataları yakalamak için beklenen istekleri try/catch içine alın. Sunucu 4xx veya 5xx durumu ile yanıt verdiğinde Axios hata fırlatır.

async fetchPosts() {
  try {
    const res = await api.get("/posts")
    this.posts = res.data
  } catch (err) {
    console.error(err)
  }
}

Hatayı İnceleme

Bir Axios hatası yararlı ayrıntılar içerir. Sunucu yanıt verdiğinde error.response bulunur; bunun bulunmaması genellikle bir ağ veya zaman aşımı hatası anlamına gelir.

catch (err) {
  if (err.response) {
    console.log(err.response.status)
    console.log(err.response.data)
  } else {
    console.log("Network error")
  }
}

Hata Durumunu İzleme

Şablonun kullanıcıya gösterebilmesi için bir hata mesajını reaktif durumda saklayın.

data() {
  return { posts: [], loading: false, error: null }
}

Hatayı Ayarlama

Her istekten önce hatayı sıfırlayın, ardından catch bloğunda hata mesajını doldurun.

async fetchPosts() {
  this.loading = true
  this.error = null
  try {
    this.posts = (await api.get("/posts")).data
  } catch (err) {
    this.error = "Could not load posts. Please try again."
  } finally {
    this.loading = false
  }
}

Hata Mesajlarını Görüntüleme

Kullanıcıların neyin yanlış gittiğini ve bundan sonra ne yapacaklarını anlaması için hatayı şablonda gösterin.

<template>
  <p v-if="loading">Loading...</p>
  <p v-else-if="error" class="error">{{ error }}</p>
  <ul v-else>
    <li v-for="p in posts" :key="p.id">{{ p.title }}</li>
  </ul>
</template>

Araya Giriciler Nedir?

Axios araya giricileri, her istek veya yanıt üzerinde otomatik olarak kod çalıştırmanıza olanak tanır. Belirteç ekleme veya hataları tek bir merkezî yerde yönetme gibi uygulamanın farklı bölümlerini ilgilendiren işlemler için idealdir.

İstek Araya Giricileri

Bir istek araya giricisi, her istek gönderilmeden önce çalışır. Yetkilendirme üst bilgisini genel olarak eklemek için bunu kullanın.

api.interceptors.request.use(config => {
  const token = localStorage.getItem("token")
  if (token) {
    config.headers.Authorization = "Bearer " + token
  }
  return config
})

Yanıt Araya Giricileri

Bir yanıt araya giricisi, her yanıt geldikten sonra çalışır. İki geri çağırma alır: biri başarı, diğeri hatalar içindir.

api.interceptors.response.use(
  response => response,
  error => {
    if (error.response && error.response.status === 401) {
      // redirect to login
    }
    return Promise.reject(error)
  }
)

Genel Hata Yönetimi

Hata mantığını bir yanıt araya giricisinde merkezîleştirmek, tek tek bileşenlerin temiz kalmasını sağlar. 401 (oturumu kapatma) veya 500 (bildirim gösterme) gibi yaygın durumlar tek bir yerde bulunur.

api.interceptors.response.use(
  res => res,
  error => {
    const status = error.response ? error.response.status : null
    if (status === 401) logout()
    if (status >= 500) showToast("Server error, try later")
    return Promise.reject(error)
  }
)

Basit Yeniden Deneme Mantığı

Kararsız ağlarda, vazgeçmeden önce başarısız bir isteği sınırlı sayıda yeniden deneyebilirsiniz.

async function getWithRetry(url, retries = 2) {
  try {
    return await api.get(url)
  } catch (err) {
    if (retries > 0) {
      return getWithRetry(url, retries - 1)
    }
    throw err
  }
}

Kısa Kontrol

Hata yönetimi ve araya giriciler hakkındaki bilginizi sınayın.

Özet

İstekleri try/catch içine alın, kullanıcı arayüzünde anlaşılır bir error mesajı gösterin ve sunucu hatalarıyla ağ hatalarını ayırt etmek için error.response değerini inceleyin. Araya giriciler, farklı bölümleri ilgilendiren işlemleri merkezîleştirir: istek araya giricileri belirteç ekler, yanıt araya giricileri genel hataları yönetir ve küçük bir yeniden deneme yardımcısı dayanıklılık sağlar. Sırada uygulamanın performansını iyileştireceksiniz.

Sıkça Sorulan Sorular

“Hata Yönetimi ve Genel Araya Giriciler” dersi ücretsiz mi?

Evet — “Hata Yönetimi ve Genel Araya Giriciler” 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 3 dersten oluşur.

“Hata Yönetimi ve Genel Araya Giriciler” dersinde ne öğreneceğim?

İstek hatalarını yönetin ve Axios araya giricilerini yapılandırın. 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, 3 dersinin 3. dersidir.

“Hata Yönetimi ve Genel Araya Giriciler” 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