Handling Multiple Promise di JavaScript: Promise.all(), Promise.race(), dan Promise.allSettled()

Ketika bekerja dengan banyak permintaan asinkron seperti mengambil data dari beberapa API, JavaScript menyediakan metode powerful untuk menangani semuanya secara efisien: Promise.all(), Promise.race(), dan Promise.allSettled(). Mari kita bahas satu per satu dengan contoh nyata!

Apa Itu Promise?

Promise adalah objek yang mewakili proses yang sedang berjalan secara asinkron (misalnya pengambilan data API).
Promise bisa berada di tiga kondisi:

1. Pending — masih menunggu hasil.

2. Fulfilled — berhasil.

3. Rejected — gagal.

Contoh sederhana:

const promise = new Promise((resolve, reject) => {
  setTimeout(() => resolve("Data berhasil diambil!"), 2000);
});

promise.then(result => console.log(result));

1. Promise.all() — Menunggu Semua Selesai

Metode ini mengeksekusi beberapa promise sekaligus dan menunggu semua berhasil sebelum melanjutkan. Jika satu saja gagal, maka hasilnya langsung rejected.

Contoh:

const getUser = fetch("https://jsonplaceholder.typicode.com/users/1");
const getPosts = fetch("https://jsonplaceholder.typicode.com/posts?userId=1");

Promise.all([getUser, getPosts])
  .then(responses => Promise.all(responses.map(r => r.json())))
  .then(data => {
    const [user, posts] = data;
    console.log("User:", user);
    console.log("Posts:", posts);
  })
  .catch(error => console.error("Terjadi kesalahan:", error));

✅ Kelebihan: Cepat, semua dijalankan paralel.
⚠️ Kekurangan: Jika salah satu gagal → semua dianggap gagal.

2. Promise.race() — Siapa Cepat, Dia Dapat

Promise.race() akan mengembalikan hasil dari promise yang pertama selesai (baik sukses maupun gagal).

Contoh:

const apiA = new Promise(resolve => setTimeout(() => resolve("Dari API A"), 1000));
const apiB = new Promise(resolve => setTimeout(() => resolve("Dari API B"), 500));

Promise.race([apiA, apiB])
  .then(result => console.log("Yang tercepat:", result))
  .catch(error => console.error(error));

Cocok untuk:

• Menentukan API tercepat.

• Timeout handling (misalnya jika request terlalu lama).

3. Promise.allSettled() — Semua Harus Selesai, Apapun Hasilnya

Tidak seperti Promise.all(), metode ini tidak berhenti ketika ada yang gagal. Ia menunggu semua promise selesai dan menampilkan status masing-masing.

Contoh:

const promise1 = Promise.resolve("Sukses!");
const promise2 = Promise.reject("Gagal memuat data");
const promise3 = Promise.resolve("Berhasil lagi!");

Promise.allSettled([promise1, promise2, promise3])
  .then(results => {
    results.forEach((result, index) => {
      console.log(`Promise ${index + 1}:`, result);
    });
  });

Output:

Promise 1: { status: "fulfilled", value: "Sukses!" }
Promise 2: { status: "rejected", reason: "Gagal memuat data" }
Promise 3: { status: "fulfilled", value: "Berhasil lagi!" }

Berguna untuk menampilkan hasil keseluruhan tanpa menghentikan proses lain.

Studi Kasus: Loading Data dari Beberapa API dengan Spinner

<div id="status">Loading data...</div>
<pre id="output"></pre>

<script>
const statusDiv = document.getElementById("status");
const output = document.getElementById("output");

const users = fetch("https://jsonplaceholder.typicode.com/users");
const posts = fetch("https://jsonplaceholder.typicode.com/posts");

Promise.allSettled([users, posts])
  .then(responses => Promise.all(responses.map(r => 
    r.status === "fulfilled" ? r.value.json() : []
  )))
  .then(data => {
    statusDiv.textContent = "Data berhasil dimuat!";
    output.textContent = JSON.stringify(data, null, 2);
  })
  .catch(() => statusDiv.textContent = "Terjadi kesalahan saat memuat data");
</script>

Saat data dimuat, teks “Loading data…” akan tampil. Setelah semua selesai, hasil akan muncul di layar.

Kesimpulan

Metode	Perilaku	Gagal Satu	Cocok Untuk
Promise.all()	Tunggu semua berhasil	❌ Gagal semua	Semua API harus sukses
Promise.race()	Ambil yang tercepat	✅ Tetap jalan	Timeout atau prioritas kecepatan
Promise.allSettled()	Tunggu semua selesai	✅ Tetap jalan	Laporan hasil keseluruhan