React Native
Error handling
fetch error handling öğrenirsin.
Hata yakalama nedir?
Ağ istekleri başarısız olabilir: sunucu ulaşılamaz, URL yanlış, ağ kopmuş olabilir. Bu yüzden fetch çağrılarını try/catch bloğuna alırsın. try bloğunda istek yapılır; hata olursa catch bloğu çalışır.
Örnek: try { const res = await fetch(url); } catch (error) { console.log(error); }. Burada fetch hata verirse yürütme catch'e atlar ve error parametresi hatayı taşır. catch içinde hatayı loglayabilir, kullanıcıya mesaj gösterebilirsin. Ama dikkat: fetch yalnızca ağ hatasında reddedilir. 404 ya da 500 gibi HTTP hata durumlarında fetch reddedilmez; yanıt gelir. Bu yüzden response.ok ve response.status kontrolü de gerekir. response.ok true ise 200-299 arası durum kodu vardır, istek başarılıdır.
Uygulama try/catch ile fetch yaz
Bir async function safeLoad yaz. try bloğunda await fetch("https://api.example.com/users") çağrısını const response'a ata. catch (error) bloğunda console.log(error) çağrısı yap.
Örnek çözümü göster
async function safeLoad() {
try {
const response = await fetch("https://api.example.com/users");
} catch (error) {
console.log(error);
}
}
Kullanıcıya hata gösterme
Hata yakalandığında kullanıcıya bilgi vermek önemlidir. React'te hatayı state'e koyarsın ve ekranda gösterirsin. Örnek: const [error, setError] = useState(null); catch bloğunda setError("Veri yüklenemedi").
Bu desen, kullanıcıya ne olduğunu açıklar. Hata mesajı kısa ve net olmalı; teknik detayları kullanıcıya gösterme. Aynı zamanda yüklenme durumu için de state tutmak yaygındır: const [loading, setLoading] = useState(false). İstek başlarken setLoading(true), bitince setLoading(false). Bu sayede ekranda bir yüklenme göstergesi çizebilirsin. Üç state birlikte çalışır: veri, yüklenme, hata. Bu üçü, veri yükleme akışının temelini oluşturur ve kullanıcıya her durumda doğru geri bildirimi verir.
Kendini test et
-
fetch hangi durumda reddedilir (reject)?
try { await fetch(url); } catch (error) { /* ... */ }
- Hiçbir zaman
- Her HTTP hatada (ör. 404)
- Yanıt JSON değilse
- Yalnızca ağ hatasında
Cevabı göster
Yalnızca ağ hatasında — fetch yalnızca ağ hatasında reddedilir; HTTP hataları için response.ok gerekir.
-
HTTP hatası kontrolü yaz
if (!____) throw new Error("HTTP hatası");
Cevabı göster
if (!response.ok) throw new Error("HTTP hatası");
-
Kavramı rolüne eşle
- try
- İstek bloğu
- catch
- Hata yakalar
- response.ok
- HTTP başarısı
- loading
- Yüklenme durumu
Sıradaki ders: Özet - API ve fetch
