JavaScript Fetch ile 404 ve 500 Hatalarını Yakalama

Tarayıcı ağ sekmesinde 404 görüyorsun ama catch çalışmıyor. Sunucu isteğe bir HTTP yanıtı verdiğinde fetch() sana bu yanıtı verir. Başarı durumunu response.ok ile sen kontrol edersin. Fetch standardı

HTTP durumunu gövdeyi okumadan kontrol et

Aşağıdaki fonksiyon JSON döndüren bir API için. response.ok, 200–299 aralığında doğrudur. API boş gövdeli 204 yanıtı verebiliyorsa fonksiyon null döndürür.

async function loadJson(url, signal) {
  const response = await fetch(url, { signal });
  if (!response.ok) {
    const error = new Error('HTTP ' + response.status);
    error.status = response.status;
    throw error;
  }
  if (response.status === 204) return null;
  return response.json();
}

Fonksiyonu örneğin await loadJson('/api/products') ile çağır. Bir ürün listesini yeniliyorsan hata geldiğinde son başarılı listeyi ekranda tutup güncellemenin tamamlanamadığını gösterebilirsin.

Hata nerede oluştu?

• HTTP 404 veya 500. Fonksiyonun ürettiği hatada status alanı vardır. API sözleşmesine göre bulunamayan kayıt ile sunucu hatasını ayrı işle.
• Yanıt alınamadı. Ağ kesintisi veya tarayıcının erişim kuralları fetch() çağrısını reddedebilir. Tarayıcı ağ sekmesi ve konsoluyla nedeni incele.
• Yanıt gövdesi okunamadı. response.json() ayrı bir adımdır. Örneğin 200 ile dönen HTML giriş sayfası JSON ayrıştırma hatasına yol açabilir. Yanıtın içerik türüne ve yönlendirme geçmişine bak.

İstek kullanıcı tarafından iptal edilebiliyorsa AbortController üzerinden gelen sinyali fonksiyona ver. Kullanıcı yeni arama başlattığı için eski çağrı iptal edildiyse bunu sunucu hatası gibi ekrana yazdırma. Hata mesajını oluştururken durum kodunu ve uygulamanın bildiği bağlamı kullan.