Meydan okuma - Asenkron akış
async/await ve fetch ile hata yönetimi olan bir veri çekme akışı yazarsın.
Asenkron veri akışı
Bu meydan okumada fetch ile veri çeken bir asenkron akış yazacaksın. Fonksiyon async anahtar kelimesiyle başlar; await ile cevabı ve gövdeyi beklersin.
Ağ istekleri her zaman başarılı olmaz. Bu yüzden akış try bloğuna alınır; hata oluşursa catch yakalar. Ayrıca response.ok ile 404 gibi HTTP hatalarını da yakalaman gerekir.
Bu üç parça — async, await ve try/catch — sağlam bir veri çekme akışı oluşturur.
HTTP hatalarını yakala
Başarılı bir HTTP yanıtı response.ok değerini true yapar. 404 veya 500 gibi durumlarda bu değer false olur ve fetch yine de promise'ı başarıyla çözer — yani catch devreye girmez.
Bu yüzden if (!response.ok) kontrolü ile HTTP hatasını kendin fırlatırsın: throw new Error('Sunucu hatası'). Bu throw sayesinde akış catch bloğuna atlar.
Böylece hem ağ hataları hem HTTP hataları tek yerde yakalanır.
Uygulama loadUser fonksiyonunu yaz
loadUser(url) asenkron fonksiyonunu yaz. try bloğunda await fetch(url) çağır; response.ok false ise throw new Error fırlat; await response.text() ile gövdeyi oku ve döndür. catch bloğunda console.error(err) yaz ve null döndür.
Örnek çözümü göster
async function loadUser(url) aç. try bloğunda await fetch(url) çağır, if (!response.ok) throw new Error('Sunucu hatası') yap, const data = await response.text() ile oku ve return data. catch (err) bloğunda console.error(err) yaz ve return null.
Örnek çözüm:
async function loadUser(url) {
try {
const response = await fetch(url);
if (!response.ok) {
throw new Error('Sunucu hatası');
}
const data = await response.text();
return data;
} catch (err) {
console.error(err);
return null;
}
}Kendini test et
-
await ile cevabı bekle
async function load() { const response = ____; const data = await response.text(); return data; }Cevabı göster
async function load() { const response = await fetch(url); const data = await response.text(); return data; } -
response.ok false olduğunda ne olur?
- fetch promise reddedir, catch çalışır
- fetch hiç çalışmaz
- fetch promise çözer, catch çalışmaz
- await hata fırlatır
Cevabı göster
fetch promise çözer, catch çalışmaz — Doğru. fetch HTTP hatasında da promise'ı çözer; catch değil, response.ok kontrolü gerekir.