Balapan Server: Advanced Promise
Di materi sebelumnya kita sudah belajar cara menarik data dari server menggunakan
await fetch(). Tapi bayangkan kasus ini: Kamu sedang membuat halaman Netflix. Kamu harus
menarik 3 data sekaligus: (1) Data Film, (2) Data Profil User, dan (3) Data Iklan.
Jika kamu menggunakan await satu per satu dari atas ke bawah, prosesnya akan sangat lambat
(Berbaris antre). Bagaimana jika kita ingin menembakkan 3 roket permintaan server secara
bersamaan (Paralel) agar website loading 3x lebih cepat? Selamat datang di fitur tingkat
lanjut: Promise.all dan kawan-kawannya!
🚀 1. Empat Pasukan Eksekusi Paralel
JavaScript membekali Class `Promise` dengan 4 Method Statis canggih untuk memproses Array of Promises (sekelompok janji/API) secara bersamaan.
Promise.all()
"Satu Mati, Semua Batal!"
Guna: Menunggu SEMUA API selesai dengan sukses.
Syarat: Jika ada Satu Saja API yang Gagal/Error, maka seluruh proses
langsung dibatalkan total masuk ke blok catch! (Cocok untuk transaksi finansial yang wajib
utuh).
Promise.allSettled()
"Apapun Yang Terjadi, Catat!"
Guna: Menunggu semua API selesai, tidak peduli Sukses atau Gagal.
Syarat: Ia TIDAK AKAN meledak masuk ke catch. Ia akan merangkum Laporan
lengkap: "API 1 sukses, API 2 error, API 3 sukses". Sangat sejuk dan damai.
Promise.race()
"Siapa Paling Cepat, Dia Menang!"
Guna: Mengambil status (Sukses/Error) dari API pertama yang paling cepat balik duluan
dari Server. Sisa API yang lelet akan diabaikan!
(Sering dipakai untuk membuat fitur Pembatalan Otomatis/Timeout).
Promise.any()
"Cari Minimal 1 Yang Sukses!"
Guna: Mengabaikan yang Error, ia hanya menunggu API pertama yang SUKSES. Baru akan
masuk catch jika KETIGA API Semuanya Hancur Lebur (AggregateError). (Cocok untuk narik
gambar dari 3 CDN/Server pendukung berbeda).
🏎️ 2. Paralel vs Sekuensial Berkala
Mari kita bandingkan secara kodingan antara pengambilan data gaya lama (Sekuensial / Mengantre) melawan gaya baru (Paralel / Bersamaan).
❌ Sekuensial (Mode Lambat)
async function tarikDataLambat() {
// Mulai Stopwatch...
console.time("WaktuLama");
// MENUNGGU 2 Detik...
const user = await fetch('/api/user');
// Trs MENUNGGU lagi 3 Detik...
const post = await fetch('/api/post');
console.timeEnd("WaktuLama");
// Hasil Akhir: ~5 DETIK (2+3) 🐢
}
✅ Promise.all (Mode Kilat)
async function tarikDataCepat() {
// Mulai Stopwatch...
console.time("WaktuCepat");
// Tembakkan Keduanya Bersamaan! 🚀
// (Kita pakai distrukturisasi Array)
const [resUser, resPost] = await Promise.all([
fetch('/api/user'), // Butuh 2d
fetch('/api/post') // Butuh 3d
]);
console.timeEnd("WaktuCepat");
// Hasil Akhir: ~3 DETIK! 🏎️
// (Karena yg 2 detiknya menumpang jalan bareng)
}
📊 3. Studi Kasus Mahakarya: Dashboard Paralel
Mari kita asumsikan kamu membangun UI Dashboard Toko Online. Kamu butuh data Omset (Cepat),
data Produk (Sedang), dan data Grafik Analitik (Sangat Lambat). Jika ditunggu
sekuensial bisa memakan 6 detik layarmu blank!
Di bawah ini, inspect kode HTML, Murni CSS, dan bagaimana JS merakit ketiganya dalam sebuah kontainer
`Promise.allSettled()` (Agar kalau Grafiknya Error/Putus, Omset-nya Tetap Tampil!).
🎯 Demo Live:
Sinkronisasi 3 API Bersamaan
Dashboard Eksekutif
Total Omset
Belum Diambil
Sisa Gudang
Belum Diambil
Analitik Prediksi
Belum Diambil
Dashboard Eksekutif
Total Omset
Belum Diambil
Sisa Gudang
Belum Diambil
Analitik Prediksi
Belum Diambil
*Tekan tombol Sinkronisasi. Kotak Omset akan terisi duluan (Detik 1). Kotak Gudang
disusul kemudian (Detik 2). Dan di Detik 3 akan menghasilkan error di kolom Analitik. Kerennya: UI tidak
Crash, kolom 1 dan 2 tetap tampil gagah mempertahankan datanya karena kita dibackup oleh
Promise.allSettled.