Memahami Asynchronous JavaScript
JavaScript adalah bahasa yang “single-threaded”, artinya ia hanya memiliki satu jalur untuk memproses perintah. Bayangkan seorang kasir yang melayani antrean panjang; jika satu pelanggan butuh waktu 5 menit untuk membayar, seluruh antrean di belakangnya macet.
Dalam web, “kemacetan” ini berarti browser menjadi hang atau beku. Solusinya adalah Asynchronous Programming.
Bagaimana Cara Kerjanya? (Analogi Restoran)
Bayangkan JavaScript sebagai pelayan restoran.
-
Synchronous: Pelayan menerima pesanan, memberikannya ke dapur, lalu menunggu diam di depan dapur sampai makanan jadi sebelum melayani meja lain. (Sangat tidak efisien).
-
Asynchronous: Pelayan menerima pesanan, memberikannya ke dapur, lalu segera kembali melayani meja lain. Saat dapur berteriak “Pesanan siap!”, pelayan kembali untuk mengantar makanan.
Evolusi Penanganan Asynchronous:
1. The Callback Era (Masa Lalu)
Dulu, kita mengirim fungsi ke dalam fungsi lain untuk dijalankan nanti.
getData(function(a) {
getMoreData(a, function(b) {
getEvenMoreData(b, function(c) {
console.log(c);
});
});
});
Masalah: Kode menjadi menjorok ke dalam seperti anak tangga (Callback Hell), sulit dibaca, dan susah menangani error.
2. Promises (Titik Balik)
Promise adalah objek yang mewakili nilai yang mungkin belum tersedia sekarang, tapi akan ada nanti. Ia memiliki tiga status: Pending (sedang proses), Fulfilled (berhasil), atau Rejected (gagal).
3. Async/Await (Standar Modern)
Fitur ini membuat kode asinkron terlihat seperti kode biasa (sinkron) yang dibaca dari atas ke bawah. Ini jauh lebih bersih secara visual.
Contoh Skenario Nyata: Mengambil Data Profil & Postingan
// Fungsi ini 'pause' di baris 'await' tanpa memblokir browser
async function loadUserProfile(userId) {
try {
// 1. Mulai mengambil data user
const userResponse = await fetch(`/api/users/${userId}`);
const user = await userResponse.json();
// 2. Gunakan ID user untuk mengambil postingan mereka
const postsResponse = await fetch(`/api/posts?author=${user.id}`);
const posts = await postsResponse.json();
console.log(`Halo ${user.name}, Anda memiliki ${posts.length} postingan.`);
} catch (error) {
// Satu blok catch untuk menangani error di tahap manapun
console.error("Terjadi kesalahan koneksi:", error);
}
}