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.

Sıradaki ders: Meydan okuma - Form ve depolama

Deneyiminizi Geliştiriyoruz

Çerez Tercihleri

Kesinlikle Gerekli Çerezler

Analitik Çerezler