CodeBlanks Logo Icon CodeBlanks

Özet - Asenkron desenler

JavaScript kursu · İleri seviye · Ders 77/100

Promise.allSettled ve for await...of ile birden fazla API çağrısını güvenle yönetirsin.

Özet - Asenkron desenler

Beş önemli asenkron desen öğrendin. Promise.allSettled tüm sonuçları kaybetmeden toplar; Promise.any ilk başarılıyı seçer; Promise.race ilk yerleşeni alır (zaman aşımı için ideal). Async iterable'lar sayfalı veriyi akış gibi gezer; havuz deseni ise eş zamanlılığı sınırlandırır.

Hangi deseni seçeceğin senaryoya bağlı: 'hepsi ya hiç' için all, 'elinden gelenin en iyisi' için allSettled, 'ilk başarılı' için any, 'ilk yerleşen' için race, 'akış' için async iterable, 'hız sınırı' için havuz.

Uygulama Güvenli çoklu çağrı

fetchAll(urls) adında bir async fonksiyon yaz. Promise.allSettled ile urls.map(u => fetch(u)) çağrılarını bekle. Sonuçlardan status === 'fulfilled' olanları ok değişkenine, status === 'rejected' olanları bad değişkenine .filter ile ayıkla. console.log ile önce 'ok' ve ok.length, sonra 'bad' ve bad.length yazdır. Test için fetchAll(['/users', '/posts', '/comments']) çağrısı yap.

Örnek çözümü göster
async function fetchAll(urls) {
  const results = await Promise.allSettled(urls.map(u => fetch(u)));
  const ok = results.filter(r => r.status === 'fulfilled');
  const bad = results.filter(r => r.status === 'rejected');
  console.log('ok', ok.length);
  console.log('bad', bad.length);
}
fetchAll(['/users', '/posts', '/comments']);

Desen seçme rehberi

Karar verirken şu soruları sor: 'Tümü başarılı olmalı mı?' → Promise.all. 'Sonuçların bir kısmı kaybolsa da olur mu?' → Promise.allSettled. 'Yalnızca ilk başarılı yetiyor mu?' → Promise.any. 'İlk yerleşen (başarılı ya da başarısız) neyse o mu?' → Promise.race. 'Veri zamanla geliyor mu?' → async iterable. 'Aynı anda çok fazla iş var mı?' → havuz deseni.

Bu sorular, doğru deseni hızlı seçmeni sağlar; kod hem safer hem de daha okunaklı olur.

Uygulama Sınırlandırılmış toplu çağrı

fetchBatched(urls, limit) adında bir async fonksiyon yaz. all adında boş bir dizi oluştur. for döngüsü ile urls'i limit büyüklüğünde gruplara böl (slice ile). Her grubu Promise.allSettled ile çağır (batch.map(u => fetch(u))); sonuçları all.push(...out) ile ekle. En son all'u döndür. Test için fetchBatched(['/a', '/b', '/c', '/d', '/e'], 2) çağrısı yap, dönen dizinin uzunluğunu console.log ile yazdır.

Örnek çözümü göster
async function fetchBatched(urls, limit) {
  const all = [];
  for (let i = 0; i < urls.length; i = i + limit) {
    const batch = urls.slice(i, i + limit);
    const out = await Promise.allSettled(batch.map(u => fetch(u)));
    all.push(...out);
  }
  return all;
}
fetchBatched(['/a', '/b', '/c', '/d', '/e'], 2).then(r => console.log(r.length));

Kendini test et

  1. Beş API çağrısından biri mutlaka reddedilecek. Tüm sonuçları görmek istiyorsun. Hangi desen en güvenlisidir?

    • Promise.all — hızlıdır
    • Promise.race — ilk sonucu alır
    • Promise.allSettled — reddedileni de yakalar
    • Promise.any — sadece başarılıyı ister
    Cevabı göster

    Promise.allSettled — reddedileni de yakalar — Doğru! allSettled bir reddedilmeden dolayı diğer sonuçları kaybetmez.

  2. Desenleri kullanımlarıyla eşleştir

    allSettled
    kısmi başarılı toplu
    any
    yedekli uçlar
    race
    zaman aşımı
    pool
    hız sınırı
    for await...of
    akış

İleri seviye bölümündeki tüm dersler