BAB 14 — Promise: Menangani Asynchronous JavaScript dengan Elegan

BAB 14 — Promise: Menangani Asynchronous JavaScript dengan Elegan

Promise adalah objek yang mewakili nilai yang mungkin tersedia sekarang, nanti, atau tidak sama sekali. Promise membantu mengatasi callback hell, membuat kode asynchronous lebih mudah dibaca, dikelola, dan di-debug.

State: Pending, Fulfilled, Rejected

Setiap Promise memiliki tiga state utama:

  1. Pending
    • Status awal. Promise sedang menunggu eksekusi selesai.
  2. Fulfilled
    • Promise berhasil diselesaikan. Menghasilkan nilai hasil (resolve).
  3. Rejected
    • Promise gagal. Menghasilkan alasan error (reject).

Contoh sederhana:

const myPromise = new Promise((resolve, reject) => {
    const success = true;
    setTimeout(() => {
        if(success) {
            resolve("Berhasil!");
        } else {
            reject("Gagal!");
        }
    }, 1000);
});

console.log(myPromise); // Pending

💡 Insight baru: Memahami state penting untuk menghindari race condition atau eksekusi kode sebelum Promise selesai.

then(), catch(), finally()

then()

  • Menangani hasil sukses (fulfilled) dari Promise.
myPromise.then(result => {
    console.log(result); // "Berhasil!"
});

catch()

  • Menangani error (rejected) dari Promise.
myPromise.catch(error => {
    console.error(error); // "Gagal!"
});

finally()

  • Menjalankan kode apapun hasilnya, biasanya untuk cleanup.
myPromise.finally(() => {
    console.log("Selesai mengeksekusi promise");
});

💡 Insight baru: finally() tidak menerima parameter dan selalu dijalankan, cocok untuk menutup loader UI atau membersihkan resource.

Chaining Promise

Promise memungkinkan kita menyusun eksekusi bertahap dengan chaining, sehingga kode lebih linear dan mudah dibaca.

Contoh:

fetch("https://jsonplaceholder.typicode.com/posts/1")
    .then(response => response.json())
    .then(data => {
        console.log("Judul Post:", data.title);
        return data.userId;
    })
    .then(userId => fetch(`https://jsonplaceholder.typicode.com/users/${userId}`))
    .then(res => res.json())
    .then(user => console.log("Nama User:", user.name))
    .catch(err => console.error("Terjadi error:", err));
  • Setiap .then() menerima nilai dari resolve sebelumnya.
  • .catch() menangani error di semua chain.

💡 Insight baru: Chaining mengurangi nested callback, tetapi tetap hati-hati terhadap long chain yang panjang. Bisa dipertimbangkan penggunaan async/await agar lebih rapi.

Error Handling

Error bisa terjadi kapan saja dalam Promise:

  1. Reject langsung:
const p = new Promise((resolve, reject) => reject("Error terjadi"));
p.catch(err => console.error(err));
  1. Error dalam then():
Promise.resolve()
    .then(() => {
        throw new Error("Error di then");
    })
    .catch(err => console.error(err.message));
  • .catch() menangkap semua error dari entire chain sebelumnya.
  • Penting untuk mencegah aplikasi crash dan memberi feedback ke user.

💡 Insight baru: Dalam proyek besar, error handling Promise harus konsisten dengan logging, retry mechanism, dan fallback UI.

Kesimpulan

  1. Promise adalah solusi modern untuk menangani asynchronous JavaScript.
  2. Memahami state (pending, fulfilled, rejected) membantu memprediksi perilaku kode.
  3. .then(), .catch(), .finally() memberikan kontrol penuh terhadap eksekusi.
  4. Chaining Promise membuat kode lebih linear dibanding nested callbacks.
  5. Error handling yang tepat mencegah bug dan menjaga UX.

💡 Fakta menarik: Promise adalah dasar untuk async/await, yang memperkenalkan syntax lebih bersih untuk pengembangan asynchronous modern.

Related Posts