Promise.all vs Promise.allSettled vs Promise.race: Panduan Async JavaScript

Mengorkestrasi Banyak API Sekaligus

Di artikel sebelumnya kita telah membahas keajaiban mengeksekusi *Fetch API* secara bersamaan untuk mempercepat *loading* web (Paralelisme). Namun di dunia nyata, Backend Server kadang bertingkah aneh (Ada yang gagal, ada yang *Error 500*).

JavaScript modern telah menyiapkan 3 senjata utama bertipe Promise untuk mengatur lalu lintas API ini.

1. Promise.all() - Filosofi: "Satu Mati, Semua Batal"

Metode ini mengambil *Array* berisi *request* API, dan mengeksekusinya berbarengan.

• Cara Kerja (Fail-Fast): Ia akan sukses MENGEMBALIKAN DATA hanya jika KESEKIAN API ITU SEMUANYA BERHASIL.
• Jebakan: Jika ada 3 API, dan API ke-3 *Error* gagal dimuat, Promise.all akan langsung PANIK, membatalkan semua proses, dan melompat ke blok catch(err) (meskipun API ke-1 dan 2 sebenarnya sukses ambil data).
• Cocok Untuk: Transaksi berantai yang harus sepaket. (Misal: Menyimpan Foto Barang DAN Menyimpan Deskripsi Barang). Jika foto gagal masuk ke server, batalkan saja sekalian deskripsinya!

2. Promise.allSettled() - Filosofi: "Apapun Terjadi, Jalan Terus"

Ini adalah solusi moderat paling aman di era *Frontend* modern.

• Cara Kerja (Forgiving): Ia akan menunggu semua *request* selesai, mau itu Sukses (Fulfilled) atau Gagal (Rejected). Ia tidak memicu *Error Catch*.
• Hasilnya: Ia mengembalikan *Array* berisi status masing-masing. Kamu bisa memfilternya: Tampilkan saja API yang sukses di layar, dan biarkan kotak UI milik API yang gagal menjadi *Loading State* biasa.
• Cocok Untuk: Memuat Dashboard Homepage. Jika Widget "Harga Saham" sukses, tampilkan. Jika Widget "Berita Terkini" gagal, biarkan saja *Widget Berita* mati tanpa harus menghancurkan seluruh halaman *Dashboard*.

3. Promise.race() - Filosofi: "Siapa Cepat, Dia Menang!"

Metode ini unik. Ia akan mengadu balap semua *request* API yang kamu masukkan.

• Cara Kerja: Request MANA SAJA yang garis finis duluan (entah dia Sukses membawa data, atau dia duluan yang Gagal ngasih Error), dialah yang akan dipakai hasilnya. Sisanya diabaikan secara paksa!
• Cocok Untuk: Fitur Timeout Batal Otomatis. Kamu mengadu *Fetch API* melawan *Fungsi Timer 5 Detik Error*. Jika API-nya lemot dan tidak membalas dalam 5 detik, Fungsi Timer akan menang balapan dan langsung memaksa layar menampilkan pesan "Koneksi Terlalu Lemot, Coba Lagi!".