Promise Lanjutan

Melanjutkan materi kemarin tentang Promise, Fetch, dan Async/Await, karena saya rasa konsep dasar tentang Promise sudah cukup dibahas sebelumnya.

Chaining dalam Promise

Sering kali, kita perlu menjalankan beberapa proses secara berurutan. Dalam Promise, kita bisa menggunakan chaining (.then() berantai).

let URI_BASE = "https://jsonplaceholder.typicode.com";
fetch(`${URI_BASE}/posts/1`) // 1
  .then((response) => response.json())
  .then((result) => {
    console.log("Data:", result.title); // 2
    return fetch(`${URI_BASE}/users/${result.userId}`); // 3
  })
  .then((response) => response.json())
  .then((user) => {
    console.log(`Artikel ditulis oleh: ${user.name}`); // 4
  })
  .catch((error) => console.log(`Terjadi kesalahan: ${error.message}`)); // 5

Penjelasan

1. Mengambil data post pertama dari API.

2. Menampilkan judul post di console.

3. Mengambil data user berdasarkan userId.

4. Menampilkan nama penulis post tersebut.

5. Menangani error jika terjadi masalah dalam proses pengambilan data.

Promise All

Promise.all() digunakan untuk mengeksekusi beberapa Promise secara paralel dan hanya akan berhasil jika semua promise berhasil (fulfilled). Jika salah satu Promise gagal (rejected), maka seluruh operasi akan gagal.

const p1 = new Promise((resolve) => setTimeout(() => resolve("P1 selesai"), 1000));
const p2 = new Promise((resolve) => setTimeout(() => resolve("P2 selesai"), 2000));
const p3 = new Promise((resolve, reject) => setTimeout(() => reject("P3 gagal"), 1500));

Promise.all([p1, p2, p3])
  .then(results => console.log(results))
  .catch(error => console.log("Error:", error));  // Output: P3 gagal

Kesimpulan: Gagal jika ada satu Promise yang gagal.

Promise Race

Promise.race() mengembalikan hasil dari promise pertama yang selesai, baik itu resolve atau reject.

const p1 = new Promise((resolve) => setTimeout(() => resolve("P1 selesai"), 1000));
const p2 = new Promise((resolve) => setTimeout(() => resolve("P2 selesai"), 2000));
const p3 = new Promise((_, reject) => setTimeout(() => reject("P3 gagal"), 500));

Promise.race([p1, p2, p3])
  .then(result => console.log("Race result:", result))
  .catch(error => console.log("Race error:", error));  
// Output: P3 gagal, lebih cepat selesai dengan reject

Kesimpulan: Mengambil promise pertama yang selesai, baik itu sukses atau gagal.

Promise Any

Promise.any() mengembalikan promise pertama yang berhasil (fulfilled). Jika semua promise gagal (rejected), baru akan mengembalikan error.

const p1 = new Promise((_, reject) => setTimeout(() => reject("P1 gagal"), 1000));
const p2 = new Promise((resolve) => setTimeout(() => resolve("P2 selesai"), 2000));
const p3 = new Promise((_, reject) => setTimeout(() => reject("P3 gagal"), 500));

Promise.any([p1, p2, p3])
  .then(result => console.log("Any result:", result))  // Output: P2 selesai
  .catch(error => console.log("Any error:", error));

Jika semua gagal:

Promise.any([p1, p3])
  .then(result => console.log("Any result:", result))
  .catch(error => console.log("Any error:", error.errors));  
// Menggunakan error.errors untuk melihat semua error
// Any error: [ 'P1 gagal', 'P3 gagal' ]

Kesimpulan: Mengembalikan promise pertama yang berhasil. Jika semua gagal, baru mengembalikan error.

---

Kesimpulan