Jago JavaScript #15: Async & Await (Nunggu Proses Jadi Lebih Santai!)

Async dan Await adalah cara baru untuk menangani Promise. Fitur ini sebenarnya hanya "bungkus" (syntactic sugar) di atas Promise agar kode kita tidak penuh dengan callback atau .then() yang bertumpuk-tumpuk (sering disebut Callback Hell).

🧩 Apa yang Akan Dipelajari

• Mengubah fungsi biasa menjadi fungsi Async.
• Menggunakan kata kunci Await untuk menghentikan waktu sejenak.
• Menangani error dengan Try & Catch (Gaya baru).
• Simulasi ambil data yang terasa seperti kode sinkronus.

⚙️ Persiapan

• Buka Console browser (F12).
• Pastikan kamu sudah paham konsep Promise (#14) karena Await hanya bisa bekerja pada fungsi yang menghasilkan Promise.

🚀 Langkah-Langkah

1. Deklarasi Fungsi async

Cukup tambahkan kata async di depan fungsi. Ini memberi tahu JavaScript bahwa di dalam fungsi ini, mungkin ada proses yang butuh waktu nunggu.

async function ambilKopi() {
    return "Kopi Espresso";
}

// Fungsi async otomatis mengembalikan Promise!
ambilKopi().then(hasil => console.log(hasil));

2. Keajaiban await

await hanya bisa dipakai di dalam fungsi async. Fungsinya? Menyuruh JavaScript: "Tolong berhenti di baris ini, jangan lanjut ke bawah sampai janji (Promise) ini selesai!"

const prosesMasak = () => {
    return new Promise((resolve) => {
        setTimeout(() => resolve("Nasi Goreng Spesial"), 3000);
    });
};

async function sajikanMakanan() {
    console.log("Pesanan diterima, mulai masak...");
    
    // JavaScript bakal 'diam' di sini selama 3 detik
    const makanan = await prosesMasak(); 
    
    console.log(`Selesai! Ini ${makanan} kamu.`);
}

sajikanMakanan();

3. Menangani Error (Try & Catch)

Kalau di Promise kita pakai .catch(), di Async/Await kita pakai blok try...catch. Ini jauh lebih mirip cara kita nanganin error di bahasa pemrograman lain.

async function ambilDataUser() {
    try {
        const data = await prosesAmbilData(); // Anggap ini fungsi yang bisa gagal
        console.log(data);
    } catch (error) {
        console.error("Waduh, koneksi internet putus!", error);
    }
}

4. Kenapa Harus Async/Await?

Bayangkan kalau kamu punya 3 proses yang harus urutan (Ambil User -> Ambil Alamat -> Ambil Cuaca).

• Pake .then(): Bakal menjorok ke dalam terus (Piramida).
• Pake await: Cuma nulis 3 baris ke bawah. Rapi banget!

💡 Tips Tambahan

• Jangan Lupa async: Sering banget pemula tulis await tapi lupa kasih async di fungsinya. Hasilnya? Error SyntaxError: await is only valid in async functions.
• Urutan Eksekusi: Ingat, await cuma nahan kode di dalam fungsi async itu saja. Kode lain di luar fungsi tetap jalan terus (gak bikin browser macet).
• Parallel vs Sequential: Kalau ada 2 proses yang gak saling nunggu, jangan di-await satu-satu secara berurutan. Kamu bisa pakai Promise.all() biar barengan!

❗ Troubleshooting

Masalah: Kenapa aplikasi saya nge-freeze pas nunggu await? Solusi: await tidak membuat browser nge-freeze karena ia bersifat non-blocking. Kalau browser kamu freeze, mungkin ada perulangan (looping) yang tidak berhenti di bagian lain kodemu, bukan karena await.

🎯 Kesimpulan

Async/Await adalah cara paling elegan untuk mengelola tugas berat di JavaScript. Kamu sudah belajar cara bikin fungsi async, cara "sabar" nunggu pakai await, dan cara elegan nanganin error pakai try-catch. Sekarang, kamu sudah siap tempur di dunia nyata!