Emre

Emre

WFN Üye
Konular
1,644
Mesajlar
1,740
Çözüm
0
Ticaret Puanı
0
Üyelik
9 Ay 3 Gün
Konum
Samsun
Web Sitesi
Var
Alanı
WordPress Uzm.
1/1
Konu sahibi
İstek sonucunu kullanıcıya göstermek için fetch() çağrısını try...catch içine alın, HTTP durumunu response.ok ile kontrol edin ve başarısız durumda mesaj alanının metnini güncelleyin. Önemli nokta: Sunucunun 404 veya 500 döndürmesi, fetch() tarafından kendiliğinden hata olarak yakalanmaz; bu durumları sizin kontrol etmeniz gerekir. Ağ bağlantısı, CORS veya benzeri bir istemci hatasında ise akış catch bölümüne düşer.

Çalışan temel örnek​


Önce sayfada hata mesajının gösterileceği bir alan oluşturun. Bu alan başlangıçta boş olabilir; istek başarısız olduğunda JavaScript içeriğini değiştirecektir.

HTML: 
<button id="loadButton">Verileri getir</button>
<p id="message" role="alert"></p>
<pre id="result"></pre>

<script>
const loadButton = document.querySelector('#loadButton');
const message = document.querySelector('#message');
const result = document.querySelector('#result');

loadButton.addEventListener('click', async () => {
  message.textContent = 'Veriler yükleniyor...';
  result.textContent = '';

  try {
    const response = await fetch('/api/products');

    // fetch(), 404 veya 500 gibi HTTP durumlarında kendiliğinden catch'e düşmez.
    if (!response.ok) {
      throw new Error(`Sunucu ${response.status} durum kodu döndürdü.`);
    }

    const data = await response.json();

    message.textContent = '';
    result.textContent = JSON.stringify(data, null, 2);
  } catch (error) {
    message.textContent = 'Veriler alınamadı. Lütfen tekrar deneyin.';
    console.error('API isteği başarısız:', error);
  }
});
</script>

Bu örnekte düğmeye basıldığında /api/products adresine istek gönderilir. Sunucu 2xx aralığında başarılı bir yanıt verirse JSON verisi result alanına yazılır. Sunucu 404, 401, 403 veya 500 gibi başarısız bir HTTP durumu döndürürse response.ok değeri false olur ve throw ile hata oluşturulur. Böylece kullanıcıya genel hata mesajı gösterilir, ayrıntı ise geliştiricinin tarayıcı konsolunda incelenebilir.

HTTP hatalarını ağ hatalarından ayırma​


Kullanıcıya gösterilecek mesajı belirlerken hatanın türünü ayırmak gerekir. HTTP hatasında sunucuya ulaşılmış, ancak sunucu isteği beklenen şekilde tamamlamamıştır. Ağ hatasında ise tarayıcı çoğu durumda kullanılabilir bir HTTP yanıtı alamaz.
DurumNe anlama gelir?İstemci ne yapmalı?
2xxİstek başarılıdır; veri işlenebilir.Yanıt gövdesini okuyun ve kullanıcıya sonucu gösterin.
400 veya 422Gönderilen bilgiler eksik ya da geçersiz olabilir.Kullanıcı girdilerini düzeltmesini isteyin; varsa sunucunun hata açıklamasını okuyun.
401 veya 403Kimlik doğrulama ya da yetki sorunu vardır.Oturum açma veya yetki durumunu kontrol edin. Kullanıcıya erişim sorunu olduğunu açıklayın.
404Adres veya istenen kaynak bulunamamıştır.API adresinin, parametrelerin ve kaynağın gerçekten mevcut olduğunu kontrol edin.
500 ve üzeriSunucu tarafında hata oluşmuş olabilir.İsteği tekrar deneyin; düzelmezse durum kodu ve istek ayrıntılarıyla sunucu günlüklerini inceleyin.
Yanıt yok, CORS veya bağlantı hatasıTarayıcı kullanılabilir bir HTTP yanıtı alamamıştır.Adres, ağ bağlantısı, HTTPS ve sunucunun CORS yapılandırmasını kontrol edin.
Bu ayrım, her durumda aynı mesajı göstermek yerine kullanıcıya uygulanabilir bilgi vermenizi sağlar. Örneğin 401 durumunda “Sunucu hatası” demek yanıltıcıdır; sorun çoğunlukla oturum veya yetki bilgisidir. Buna karşılık sunucunun döndürdüğü ayrıntılı hata mesajını doğrudan ekrana basmak da doğru değildir; bu mesajda teknik bilgi, dosya yolu veya güvenlik açığı oluşturabilecek ayrıntılar bulunabilir.

Sunucunun hata gövdesini güvenli biçimde okumak​


Bazı API'ler başarısız yanıtla birlikte kullanıcıya uygun bir açıklama gönderir. Ancak her hata yanıtının JSON olduğu varsayılmamalıdır. Sunucu HTML, düz metin veya boş bir gövde döndürebileceği için response.json() çağrısını da ayrıca korumak gerekir.

JavaScript: 
async function getProducts() {
  try {
    const response = await fetch('/api/products');

    if (!response.ok) {
      let detail = '';

      try {
        const errorData = await response.json();
        detail = errorData.message || '';
      } catch {
        // Hata gövdesi JSON değilse ayrıntı kullanmadan devam edilir.
      }

      throw new Error(
        detail || `İstek ${response.status} durumuyla sonuçlandı.`
      );
    }

    return await response.json();
  } catch (error) {
    console.error(error);
    throw error;
  }
}

async function loadProducts() {
  const message = document.querySelector('#message');

  try {
    const products = await getProducts();
    message.textContent = `${products.length} ürün yüklendi.`;
  } catch (error) {
    message.textContent = 'Ürünler yüklenemedi. Daha sonra tekrar deneyin.';
  }
}

Burada API'nin { "message": "Geçersiz ürün kodu" } gibi bir yanıt döndürdüğü varsayımsal olarak kabul edilmiştir. Bu bilgi geliştiriciye ve gerektiğinde kullanıcıya ayrı ayrı ele alınabilir. error.message değerini kullanıcıya olduğu gibi göstermek yerine, kullanıcıya anlaşılır ve sınırlı bir mesaj vermek; teknik ayrıntıyı ise console.error() veya sunucu günlüklerinde tutmak daha güvenlidir.

Form gönderiminde hata mesajı göstermek​


API isteği bir formdan başlatılıyorsa mesajı yalnızca catch içinde değil, sunucunun doğrulama yanıtına göre de güncelleyin. Örneğin e-posta alanı geçersizse sunucu 422 döndürebilir. Bu durum bağlantı kopması değildir; kullanıcı girdisinin düzeltilmesi gerekir.

HTML: 
<form id="loginForm">
  <input id="email" type="email" required placeholder="E-posta">
  <input id="password" type="password" required placeholder="Şifre">
  <button type="submit">Giriş yap</button>
  <p id="formMessage" role="alert"></p>
</form>

<script>
const form = document.querySelector('#loginForm');
const formMessage = document.querySelector('#formMessage');

form.addEventListener('submit', async (event) => {
  event.preventDefault();
  formMessage.textContent = 'Gönderiliyor...';

  const payload = {
    email: document.querySelector('#email').value,
    password: document.querySelector('#password').value
  };

  try {
    const response = await fetch('/api/login', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json'
      },
      body: JSON.stringify(payload)
    });

    let data = {};

    try {
      data = await response.json();
    } catch {
      // Yanıt JSON değilse boş nesne kullanılır.
    }

    if (!response.ok) {
      if (response.status === 401) {
        formMessage.textContent = 'E-posta veya şifre hatalı.';
      } else if (response.status === 422) {
        formMessage.textContent = data.message || 'Girdiğiniz bilgileri kontrol edin.';
      } else {
        formMessage.textContent = 'Giriş işlemi tamamlanamadı.';
      }

      return;
    }

    formMessage.textContent = 'Giriş başarılı.';
  } catch (error) {
    console.error('Bağlantı hatası:', error);
    formMessage.textContent = 'Sunucuya bağlanılamadı. İnternet bağlantınızı kontrol edin.';
  }
});
</script>

Bu akışta return kullanılması önemlidir. 401 veya 422 sonrasında başarılı giriş mesajına ulaşılması engellenir. Başarısız yanıt alınması, formun JavaScript tarafından doğru gönderilmediğini kanıtlamaz; yalnızca sunucunun bu isteği kabul etmediğini gösterir. Sorunu anlamak için tarayıcının Geliştirici Araçları içindeki Network bölümünde istek adresini, HTTP yöntemini, gönderilen gövdeyi, durum kodunu ve yanıt gövdesini birlikte kontrol edin.

Hata mesajının doğru yerde gösterilmesi​


Mesaj alanını isteğin başında temizlemek veya “yükleniyor” durumuna geçirmek, önceki hatanın ekranda kalmasını önler. Başarılı sonuç geldiğinde mesaj alanını temizleyin; hata oluştuğunda ise kullanıcıya ne yapabileceğini söyleyen kısa bir metin gösterin.

Kullanıcı mesajı ile geliştirici mesajını ayırın. Kullanıcı için “Ürünler yüklenemedi. Lütfen tekrar deneyin.” yeterli olabilir. Geliştirici içinse durum kodu, istek adresi, yanıt gövdesi ve oluşan JavaScript hatası gerekir. Şifre, erişim belirteci veya kişisel verileri konsola ve sunucu günlüklerine yazdırmayın.

İstek tekrar denenebilen bir işlemse düğmeyi geçici olarak devre dışı bırakmak ve işlem bittiğinde finally ile yeniden etkinleştirmek de yararlıdır:

JavaScript: 
async function loadData() {
  loadButton.disabled = true;
  message.textContent = 'Yükleniyor...';

  try {
    const response = await fetch('/api/products');

    if (!response.ok) {
      throw new Error(`HTTP ${response.status}`);
    }

    const data = await response.json();
    result.textContent = JSON.stringify(data, null, 2);
    message.textContent = '';
  } catch (error) {
    console.error(error);
    message.textContent = 'Veriler yüklenemedi. Tekrar denemek için düğmeye basın.';
  } finally {
    loadButton.disabled = false;
  }
}

Bu yapı sayesinde başarılı yanıt, HTTP hatası ve bağlantı hatası birbirine karışmaz. Temel kural şudur: fetch() sonrasında önce response.ok kontrolünü yapın; başarısızsa uygun kullanıcı mesajını gösterin, bağlantı veya çalışma zamanı hatalarını ise catch bölümünde yönetin.
 

Sende şimdi bize katılmak ister misin?

Kayıt ol

Bize katılım kolay ve ücretsizdir!

Üye ol
Foruma git ?

Bu konuyu görüntüleyen kullanıcılar

Bu konuyu şu anda görüntüleyen üye bulunmuyor.
Robotlar:
  • Anthropic
Toplam: 1 (Üye: 0, misafir: 0, robot: 1)