Panduan Lengkap Promise JavaScript untuk Pemula - Samotuho Ndruru

 

Kalau kamu sering bingung kenapa ada fungsi yang hasilnya belum langsung keluar, atau pernah dengar istilah asynchronous di JavaScript, maka artikel ini cocok banget buat kamu.

Di sini kita akan bahas Promise dengan bahasa santai, contoh kode yang bisa langsung kamu praktikkan, dan ilustrasi yang bikin konsepnya gampang dicerna.

Apa Itu Promise?

Promise adalah fitur di JavaScript yang digunakan untuk menangani operasi asynchronous, seperti:

• Mengambil data dari API
• Menunggu hasil dari proses yang butuh waktu (delay, animasi, baca file, dll)

Sesuai namanya, promise adalah janji: bisa ditepati (fulfilled), gagal (rejected), atau masih menunggu (pending).

Kenapa Perlu Promise?

Sebelum ada Promise, kita mengandalkan callback. Tapi callback bisa bikin kode berantakan (disebut callback hell):

getData(function(result) {
  processData(result, function(processed) {
    saveData(processed, function(finalResult) {
      console.log("Selesai!");
    });
  });
});

Dengan Promise, kita bisa menulisnya seperti ini:

getData()
  .then(processData)
  .then(saveData)
  .then(finalResult => console.log("Selesai!"))
  .catch(err => console.log("Error:", err));

Lebih rapi dan gampang dibaca, kan?

Cara Membuat Promise

const janji = new Promise((resolve, reject) => {
  const sukses = true;

  if (sukses) {
    resolve("Berhasil!");
  } else {
    reject("Gagal!");
  }
});

• resolve() → jika operasi berhasil
• reject() → jika operasi gagal

Contoh Praktis: Simulasi Ambil Data

function ambilData() {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      const sukses = true;

      if (sukses) {
        resolve("Data berhasil diambil!");
      } else {
        reject("Gagal ambil data.");
      }
    }, 2000);
  });
}

ambilData()
  .then(res => console.log(res))
  .catch(err => console.log(err));

Penjelasan:

• setTimeout → mensimulasikan proses yang butuh waktu
• then() → menangani hasil sukses
• catch() → menangani error

Chaining .then()

Kita bisa mengeksekusi beberapa proses secara berurutan:

ambilData()
  .then(data => {
    console.log("Langkah 1:", data);
    return "Langkah 2: Proses lanjut";
  })
  .then(step2 => console.log(step2));

Bonus: async/await Versi Simpel dari Promise

async function jalankan() {
  try {
    const hasil = await ambilData();
    console.log("Async/Await:", hasil);
  } catch (err) {
    console.log("Terjadi error:", err);
  }
}

jalankan();

Lebih mudah dibaca karena bentuknya mirip kode sinkron (biasa).

Ringkasan

• resolve() → Promise berhasil
• reject() → Promise gagal
• .then() → Jalan kalau berhasil
• .catch() → Jalan kalau gagal
• .finally() → Jalan selalu, entah berhasil/gagal

Sekarang kamu sudah paham dasar Promise di JavaScript! 

Kalau kamu suka artikel ini dan ingin belajar lebih banyak soal JavaScript modern, jangan lupa:

👉 Bookmark artikel ini biar nggak lupa.

👉 Bagikan ke teman yang lagi belajar ngoding.

👉 Follow blog ini buat dapetin konten tutorial coding yang ringan dan bermanfaat!

Kalau ada pertanyaan, tulis aja di kolom komentar ya 

Happy coding! 👨‍💻✨

Related Posts