Cara Memanggil Banyak API Sekaligus dengan Promise.all

Kesalahan Fatal: 'Waterfall' Fetching

Bayangkan kamu sedang membangun halaman *Dashboard* Toko Online. Halaman ini membutuhkan 3 data dari server: Data Profil User, Daftar Pesanan, dan Notifikasi. Pemula yang baru belajar async / await biasanya akan menulis kode seperti ini:

// CARA LAMBAT (WATERFALL)
async function getDashboardData() {
  // Tunggu profil selesai (butuh 2 detik)
  const profil = await fetch('/api/profil');
  
  // Setelah profil beres, baru jalankan pesanan (butuh 2 detik)
  const pesanan = await fetch('/api/pesanan');
  
  // Setelah pesanan beres, baru jalankan notifikasi (butuh 2 detik)
  const notif = await fetch('/api/notif');
}

Total waktu tunggu pengunjungmu adalah 6 Detik! Ini disebut efek Air Terjun (Waterfall). *Request* pesanan harus antre menganggur menunggu *request* profil selesai, padahal keduanya tidak saling berhubungan!

Solusi Kebut Ngebut: Promise.all (Jalan Paralel)

Daripada menunggu satu per satu, mengapa kita tidak menembak (request) ketiga API tersebut secara Bersamaan (Paralel)? Di JavaScript, kita menggunakan fungsi sakti bernama Promise.all().

// CARA SUPER CEPAT (PARALEL)
async function getDashboardData() {
  // Jalankan ketiga fetch BERSAMAAN tanpa await individu
  const [profilRes, pesananRes, notifRes] = await Promise.all([
    fetch('/api/profil'),
    fetch('/api/pesanan'),
    fetch('/api/notif')
  ]);
}

Jika ketiga API tersebut di-request berbarengan, dan masing-masing butuh waktu 2 detik, maka total waktu tunggu pengunjungmu hanyalah 2 Detik (Tergantung request mana yang paling lambat)! Kamu baru saja memangkas waktu *loading* website sebesar 60%.

Satu Kelemahan Promise.all

Promise.all memiliki sifat Gagal Satu, Gagal Semua (Fail-Fast). Jika API 'Profil' dan 'Pesanan' berhasil, TAPI API 'Notifikasi' sedang down (Error 500), maka Promise.all akan langsung melompat ke blok Catch dan menghancurkan seluruh hasil *request* lainnya.

Alternatif Lebih Aman: Promise.allSettled

Jika kamu tidak ingin kegagalan satu API merusak API lainnya yang berhasil, gunakan Promise.allSettled(). Metode ini akan menunggu semua *request* selesai (entah sukses atau gagal), dan mengembalikan *Array* laporan detail masing-masing *request*.

Kesimpulan Praktis: Selalu periksa kode async/await yang kamu tulis berjejer ke bawah. Jika baris bawah TIDAK MEMBUTUHKAN data dari baris atasnya, bungkus mereka semua ke dalam Promise.all!