Dalam dunia pengembangan web modern, kecepatan dan responsivitas aplikasi adalah segalanya. Pengguna tidak suka menunggu. Di sinilah kemampuan JavaScript untuk bekerja secara asynchronous (asinkron) menjadi sangat penting. Namun, mengelola kode asinkron bisa menjadi rumit.

Kenapa Harus Asinkron?

Bayangkan JavaScript bekerja secara sinkron (serentak). Jika kamu meminta data dari server (sebuah proses yang mungkin butuh beberapa detik), seluruh halaman web kamu akan “membeku”. Pengguna tidak bisa mengklik tombol, tidak bisa scroll, tidak bisa melakukan apa pun sampai data itu tiba. Ini adalah pengalaman pengguna yang buruk.

Mode asinkron menyelesaikan masalah ini. JavaScript dapat mengirim permintaan data, lalu lanjut mengerjakan tugas lain (seperti merender antarmuka atau merespons input pengguna) sambil menunggu jawaban. Ketika data akhirnya tiba, sebuah fungsi akan dieksekusi untuk mengolahnya.

Operasi asinkron yang umum meliputi:

  • Permintaan API ke server (fetch)
  • Operasi file sistem (di lingkungan Node.js)
  • Event listener (misalnya, menunggu pengguna mengklik tombol)
  • Fungsi setTimeout atau setInterval

Masalah Klasik: Apa Itu “Callback Hell”? 👿

Dulu, callback function adalah cara utama menangani tugas asinkron. Jika kamu perlu melakukan beberapa tugas berurutan, hasilnya adalah kode yang bersarang dan sulit dibaca, yang dikenal sebagai “Callback Hell” atau “Pyramid of Doom”.

Figure 1. Contoh callback hell

 

Lihat polanya? Kode ini menjorok ke kanan, sehingga kode menjadi:

  • Sulit dibaca: Alur logikanya terkubur dalam sarang fungsi.
  • Sulit di-debug: Menemukan sumber kesalahan menjadi mimpi buruk.
  • Penanganan error berulang: Kamu harus menangani error di setiap level.

 

Solusi Pertama: Promises

Promise diperkenalkan untuk merapikan kekacauan ini. Sebuah Promise adalah objek yang mewakili hasil operasi di masa depan. Dengan .then() untuk rantai sukses dan satu .catch() untuk semua kegagalan, kode menjadi lebih linear.

Figure 2. Perbaikan dengan Promise

 

Solusi Modern & Elegan: async/await

async/await adalah sintaks modern yang dibangun di atas Promise. Tujuannya adalah membuat kode asinkron terlihat dan berfungsi seperti kode sinkron, sehingga sangat intuitif.

  • async: Menandai sebuah fungsi agar bisa menggunakan await.
  • await: Menjeda eksekusi hingga Promise selesai.

Figure 3. Perbaikan dengan Async-Await

 

Untuk pengembangan JavaScript modern, jadikan async/await sebagai pilihan utama kamu untuk menulis kode asinkron yang bersih dan mudah dipelihara.

 

Referensi: