HTTP hata yönetimi

response.ok ve status ile HTTP hatalarını yakalamayı öğrenirsin.

fetch HTTP hatalarını yakalamaz

fetch beklenmedik biçimde davranır: ağ hatası olmadıkça promise reddetmez. Sunucu 404 ya da 500 döndürse de promise yerine gelir ve sana bir Response nesnesi verir.

const response = await fetch(url);
if (!response.ok) {
  console.log('İstek başarısız: ' + response.status);
}

Bu yüzden HTTP hatalarını kendin denetlemen gerekir. response.ok başarılı durumlarda true, başarısız durumlarda false verir. response.status ise tam durum kodunu taşır.

response.ok ve response.status

HTTP hatalarını yönetirken iki özelliği birlikte kullanırsın. response.ok hızlı bir başarı kontrolü verir; response.status ise tam durum kodunu taşır.

if (!response.ok) {
  throw new Error('HTTP ' + response.status);
}

Burada istek başarısızsa yeni bir Error fırlatılır ve async fonksiyonun catch bloğuna ya da çağıranın catch'ine düşer. Böylece hatayı tek yerde toplar ve kullanıcıya anlamlı bir ileti gösterirsin. throw ile promise reddedilir.

Uygulama Hatalı isteği yakala ve hata fırlat

url değişkeni bir adresi tutuyor. await fetch(url) ile yanıtı response değişkenine al. Eğer !response.ok ise throw new Error('HTTP ' + response.status) ile hata fırlat. Sonra 'OK' metnini console.log ile yazdır.

Örnek çözümü göster

const response = await fetch(url);
if (!response.ok) {
  throw new Error('HTTP ' + response.status);
}
console.log('OK');

Kendini test et

Başarısız isteği yakala

const response = await fetch(url);
if (____) {
  throw new Error('HTTP ' + response.status);
}

Cevabı göster

const response = await fetch(url);
if (!response.ok) {
  throw new Error('HTTP ' + response.status);
}

Sunucu 404 döndürdüğünde fetch ne yapar?
```
const response = await fetch(url);
console.log(response.ok);
```
- Promise reddedilir
- Promise yerine gelir, response.ok false olur
- fetch hata fırlatır
- response undefined olur
Cevabı göster

Promise yerine gelir, response.ok false olur — Doğru! fetch 404 için promise'i reddetmez; response.ok false olur.
Durum kodlarını anlamlarıyla eşleştir

200

Başarılı istek
404

Kaynak bulunamadı
500

Sunucu hatası

Sıradaki ders: Özet - Fetch API

Deneyiminizi Geliştiriyoruz

Çerez Tercihleri

Kesinlikle Gerekli Çerezler

Analitik Çerezler