Memahami Asynchronous di JavaScript: Callbacks, Promises, dan Async/Await

JavaScript itu single-threaded, tapi kenapa bisa multitasking?

Bayangkan kamu sedang memasak mi instan. Kalau kamu memasak secara Synchronous (berurutan), kamu merebus air, diam menunggu 3 menit sampai mendidih, baru menyiapkan bumbu di piring. Waktu terbuang sia-sia.

Kalau kamu memasak secara Asynchronous, sambil menunggu air mendidih, kamu bisa menyiapkan bumbu. Ketika air mendidih (proses selesai), kamu baru lanjut memasukkan mi. Itulah inti dari Asynchronous di JavaScript: jangan memblokir proses lain sambil menunggu sesuatu yang lama (seperti request API).

Evolusi Asynchronous di JavaScript

1. Callbacks (Cara Lama yang Bikin Pusing)

Dulu, kita melempar fungsi ke dalam fungsi untuk dieksekusi nanti. Kalau prosesnya banyak, ini menghasilkan "Callback Hell" yang bentuknya menjorok ke kanan seperti piramida.

// Callback Hell
getUser(id, function(user) {
  getProfile(user.username, function(profile) {
    getPosts(profile.id, function(posts) {
      console.log(posts);
    });
  });
});

2. Promises (Lebih Baik, Tapi Masih Berantai)

Promise adalah janji bahwa sebuah proses akan mengembalikan nilai di masa depan, entah itu berhasil (resolve) atau gagal (reject).

getUser(id)
  .then(user => getProfile(user.username))
  .then(profile => getPosts(profile.id))
  .then(posts => console.log(posts))
  .catch(error => console.error(error));

3. Async/Await (Cara Modern dan Paling Rapi)

Diperkenalkan di ES2017, async/await memungkinkan kita menulis kode asynchronous seolah-olah itu kode synchronous yang dibaca dari atas ke bawah. Ini adalah best practice saat ini.

async function displayUserPosts(id) {
  try {
    const user = await getUser(id);
    const profile = await getProfile(user.username);
    const posts = await getPosts(profile.id);
    console.log(posts);
  } catch (error) {
    console.error(error);
  }
}

Kesimpulan

Setiap kali kodemu harus "berkomunikasi dengan dunia luar" (mengambil data dari internet, membaca file di komputer, atau query database), kamu wajib menggunakan Asynchronous. Biasakan dirimu menggunakan async/await dipadukan dengan try/catch untuk menangani errornya.