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ı