Memahami Asynchronous JavaScript: Callback, Promise, dan Async/Await

Bayangkan Anda sedang mengambil data dari server, namun halaman website tiba-tiba berhenti dan tidak merespons. Menyebalkan, bukan? Inilah masalah yang sering terjadi ketika JavaScript dijalankan secara synchronous—semua dieksekusi satu per satu dan bisa membuat aplikasi terasa “macet”.

Banyak pemula bingung ketika mulai belajar konsep Asynchronous JavaScript. Istilah seperti callback, promise, dan async/await sering terdengar rumit dan membingungkan. Salah sedikit, program justru error atau tidak berjalan sesuai keinginan.

Namun, tenang—artikel ini akan membantu Anda memahami semua konsep itu secara perlahan dan praktis. Anda akan belajar:

• Apa itu asynchronous dan mengapa penting dalam JavaScript.
• Cara kerja Callback, Promise, dan Async/Await.
• Contoh kode nyata yang bisa langsung Anda pahami.
• Tips untuk menghindari kesalahan umum seperti callback hell.

Apa Itu Asynchronous JavaScript?

JavaScript secara default berjalan secara single-threaded dan synchronous, artinya satu tugas selesai dulu sebelum tugas berikutnya dimulai. Tapi dalam dunia nyata, tugas seperti fetch API, request server, dan setTimeout tidak bisa menunggu.

Di sinilah asynchronous hadir—memungkinkan JavaScript menjalankan tugas lain sambil menunggu proses yang lebih lama selesai.

Langkah-Langkah Memahami Asynchronous JavaScript: Callback, Promise, dan Async/Await

1. Callback – Fondasi Asynchronous yang Pertama

Callback adalah fungsi yang dikirim sebagai argumen ke fungsi lain, dan akan dipanggil setelah suatu proses selesai.

function getData(callback) {
    setTimeout(() => {
        console.log("Data diterima");
        callback();
    }, 2000);
}

getData(() => {
    console.log("Proses selesai");
});

function getData(callback) {
    setTimeout(() => {
        console.log("Data diterima");
        callback();
    }, 2000);
}

getData(() => {
    console.log("Proses selesai");
});

Masalah utama: callback bisa menumpuk dan sulit dibaca → dikenal sebagai callback hell.

2. Promise – Solusi dari Callback Hell

Promise adalah objek yang mewakili keadaan proses asynchronous:

• Pending → Menunggu
• Resolved → Berhasil
• Rejected → Gagal

let getData = new Promise((resolve, reject) => {
    let success = true;
    setTimeout(() => {
        success ? resolve("Data berhasil diambil") : reject("Gagal mengambil data");
    }, 2000);
});

getData
    .then(result => console.log(result))
    .catch(error => console.log(error));

let getData = new Promise((resolve, reject) => {
    let success = true;
    setTimeout(() => {
        success ? resolve("Data berhasil diambil") : reject("Gagal mengambil data");
    }, 2000);
});

getData
    .then(result => console.log(result))
    .catch(error => console.log(error));

✅ Lebih mudah dibaca
❗ Perlu memahami .then() dan .catch()

3. Async/Await – Cara Modern yang Lebih Sederhana

Async/Await adalah cara terbaru dan paling mudah untuk menggunakan Promise dengan gaya kode yang lebih mirip synchronous.

async function fetchData() {
    try {
        let result = await getData;
        console.log(result);
    } catch (error) {
        console.log(error);
    }
}

fetchData();

✅ Tampilan kode bersih
✅ Mudah dipahami
⚠️ Tetap harus menggunakan try...catch untuk error handling

4. Kapan Menggunakan Callback, Promise, atau Async/Await?

Anda sudah memahami perjalanan Asynchronous JavaScript: dari Callback → Promise → Async/Await. Dengan bekal ini, Anda siap menulis kode yang modern, cepat, dan profesional—seperti para developer tingkat lanjut.

Ingin melangkah lebih jauh?
Baca juga: “Tutorial Fetch API: Cara Mengambil Data dari Server dengan JavaScript Modern”