Error handling
- React Native kursu
- Orta seviye
- Ders 40/116
- 5 dk
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.
Başlangıç kodu
// async function safeLoad yaz
// try bloğunda await fetch ile response al
// hata bloğunda hatayı konsola yazÖrnek çözüm
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.
Soru ve cevaplar
Dersin sorularını cevaplarıyla birlikte inceleyebilirsin. Kendini denemek istersen dersi interaktif olarak çöz.
1 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 Doğru cevap
Açıklama: fetch yalnızca ağ hatasında reddedilir; HTTP hataları için response.ok gerekir.
2 HTTP hatası kontrolü yaz
if (!____) throw new Error("HTTP hatası");if (!response.ok) throw new Error("HTTP hatası");Açıklama: response.ok false ise HTTP hatası vardır.
3 Kavramı rolüne eşle
| Kavram | Anlamı |
|---|---|
try |
İstek bloğu |
catch |
Hata yakalar |
response.ok |
HTTP başarısı |
loading |
Yüklenme durumu |