Jago JavaScript #14: Promise (Belajar Cara Menagih Janji!)

JavaScript itu aslinya jalan satu-satu (Synchronous). Tapi, ada tugas yang butuh waktu lama (seperti ambil data dari internet). Kalau kita nungguin, website bakal hang. Promise hadir supaya JavaScript bisa ngerjain hal lain sambil nunggu tugas yang lama itu selesai.

🧩 Apa yang Akan Dipelajari

• Memahami 3 status Promise: Pending, Fulfilled, dan Rejected.
• Membuat Promise sendiri dengan resolve dan reject.
• Mengambil hasil janji pakai .then() dan .catch().
• Kenalan singkat sama gaya baru: async dan await.

⚙️ Persiapan

• Masih di Console browser (F12).
• Fokus ekstra, karena ini melibatkan alur waktu yang tidak berurutan.

🚀 Langkah-Langkah

1. Tiga Status Si "Janji"

Sebuah Promise pasti ada di salah satu kondisi ini:

1. Pending: Sedang proses (Kopi lagi dibuat).
2. Fulfilled (Resolved): Berhasil! (Kopi jadi, silakan ambil).
3. Rejected: Gagal! (Mesin rusak, kopi gak jadi).

2. Cara Bikin Promise Sendiri

Kita pakai new Promise yang isinya fungsi dengan dua "tombol": resolve (berhasil) dan reject (gagal).

const janjiNraktir = new Promise((resolve, reject) => {
    let adaUang = true;

    // Kita simulasiin proses nunggu 2 detik
    setTimeout(() => {
        if (adaUang) {
            resolve("Traktiran meluncur! 🍔");
        } else {
            reject("Maaf ya, dompet ketinggalan... 😭");
        }
    }, 2000);
});

3. Cara Nagih Janji (.then & .catch)

Untuk dapet hasilnya, kita gak bisa langsung panggil variabelnya. Kita harus pakai "jaring" khusus.

janjiNraktir
    .then((hasil) => {
        console.log(hasil); // Jalan kalau resolve
    })
    .catch((error) => {
        console.log(error); // Jalan kalau reject
    })
    .finally(() => {
        console.log("Proses selesai, mau makan atau nggak.");
    });

4. Gaya Modern: async & await

Kalau menurutmu .then() kepanjangan, JavaScript punya cara yang lebih mirip bahasa manusia. Syaratnya, kodenya harus di dalam fungsi yang diawali kata async.

async function cekTraktiran() {
    try {
        console.log("Lagi nunggu jawaban...");
        const hasil = await janjiNraktir; // Nunggu sampai janji selesai
        console.log(hasil);
    } catch (err) {
        console.log(err);
    }
}

cekTraktiran();

💡 Tips Tambahan

• Gunakan Async/Await: Di dunia kerja sekarang, async/await jauh lebih sering dipakai karena lebih gampang dibaca dibanding tumpukan .then().
• API Calls: Promise paling sering dipake buat ambil data lewat fetch(). Hasil dari fetch() itu adalah sebuah Promise.
• Error Handling: Selalu pakai .catch() atau try...catch supaya kalau janji gagal, aplikasi kamu gak langsung crash.

❗ Troubleshooting

Masalah: Kenapa console.log di bawah Promise jalan duluan sebelum hasil Promise-nya keluar? Solusi: Itulah sifat Asynchronous. JavaScript gak mau nungguin Promise yang lama, jadi dia jalanin kode di bawahnya dulu. Kalau mau nunggu, kamu harus pakai await.

🎯 Kesimpulan

Promise adalah cara JavaScript mengelola tugas yang butuh waktu. Kamu sudah belajar cara bikin janji, nanganin kalau berhasil, dan siap-siap kalau gagal. Ini adalah "kunci" buat kamu bisa ambil data dari server nanti!