BAB 15 — Async / Await: Menulis Kode Asynchronous dengan Lebih Bersih dan Efisien

BAB 15 — Async / Await: Menulis Kode Asynchronous dengan Lebih Bersih dan Efisien

Async/await adalah syntactic sugar di atas Promise yang membuat kode asynchronous terlihat seperti synchronous. Dengan async/await, kode lebih mudah dibaca, lebih mudah di-maintain, dan meminimalkan callback hell.

Namun, tidak semua kasus harus menggunakan async/await. Memahami kapan dan bagaimana menggunakannya adalah kunci pengembangan JavaScript modern.

Kapan Kita Harus Menggunakan Async / Await

  1. Operasi Asynchronous Panjang atau Bertingkat
    • Contoh: fetch data dari beberapa API, proses data, lalu update UI.
    • Async/await membuat kode lebih linear dibanding nested Promise .then().
  2. Error Handling yang Lebih Mudah
    • Dengan try/catch, kita bisa menangani semua error dalam satu blok.
    • Lebih rapi dibanding .catch() Promise yang panjang.
  3. Parallel Execution Lebih Terstruktur
    • Dengan kombinasi Promise + async/await, kita bisa menjalankan beberapa task bersamaan.
    • Membuat kode lebih mudah dibaca daripada chaining .then() yang kompleks.
  4. Kapan Tidak Perlu Async/Await
    • Jika hanya satu Promise sederhana yang tidak memerlukan try/catch, .then() mungkin lebih ringkas.
    • Untuk operasi yang harus dijalankan bersamaan banyak task, gunakan kombinasi Promise.all() untuk efisiensi.

💡 Insight: Async/await tidak membuat JavaScript menjadi multithreaded. Semua tetap single-threaded, tetapi event loop akan mengeksekusi operasi asynchronous tanpa memblokir UI.

Await di dalam Fungsi Async

await menunggu Promise selesai sebelum melanjutkan eksekusi kode.

Contoh dasar:

async function fetchPost() {
    const response = await fetch("https://jsonplaceholder.typicode.com/posts/1");
    const data = await response.json();
    console.log("Judul Post:", data.title);
}

fetchPost();
  • async → fungsi mengembalikan Promise.
  • await → menunggu Promise resolve.

Praktik terbaik:

  • Gunakan await hanya pada Promise.
  • Hindari await di global scope (Node.js baru mendukung top-level await, browser tidak di semua versi).

Try/Catch di Fungsi Async

Error handling menggunakan try/catch membuat kode lebih bersih.

async function getPost() {
    try {
        const response = await fetch("https://jsonplaceholder.typicode.com/posts/invalid");
        const data = await response.json();
        console.log(data);
    } catch (error) {
        console.error("Terjadi error:", error.message);
    } finally {
        console.log("Eksekusi selesai, cleanup UI atau loader");
    }
}

getPost();
  • Semua error dari Promise ditangkap di catch.
  • finally → selalu dijalankan, cocok untuk menutup loader atau membersihkan resource.

💡 Insight: Tanpa try/catch, Promise rejected akan menjadi unhandled, memicu warning atau crash aplikasi di production.

Menjalankan Beberapa Async Sekaligus

Jika beberapa operasi independent bisa dijalankan bersamaan, jangan await satu per satu secara sequential.

async function fetchParallel() {
    const postPromise = fetch("https://jsonplaceholder.typicode.com/posts/1").then(res => res.json());
    const userPromise = fetch("https://jsonplaceholder.typicode.com/users/1").then(res => res.json());

    const post = await postPromise;
    const user = await userPromise;

    console.log("Post:", post.title);
    console.log("User:", user.name);
}

fetchParallel();
  • Promise dibuat terlebih dahulu, kemudian await untuk menunggu hasilnya.
  • Operasi dijalankan bersamaan, lebih efisien dibanding sequential await satu per satu.

Promise.all() dan Promise.race()

Promise.all()

Menunggu semua Promise selesai. Jika salah satu gagal → reject langsung.

async function fetchAll() {
    try {
        const [post, user] = await Promise.all([
            fetch("https://jsonplaceholder.typicode.com/posts/1").then(res => res.json()),
            fetch("https://jsonplaceholder.typicode.com/users/1").then(res => res.json())
        ]);
        console.log("Post:", post.title);
        console.log("User:", user.name);
    } catch (error) {
        console.error("Terjadi error:", error);
    }
}

Promise.race()

Menunggu Promise pertama selesai, bisa fulfilled atau rejected. Cocok untuk timeout/fallback.

async function fetchRace() {
    const fastest = await Promise.race([
        fetch("https://jsonplaceholder.typicode.com/posts/1"),
        fetch("https://jsonplaceholder.typicode.com/users/1")
    ]);
    console.log("Promise tercepat selesai:", await fastest.json());
}

💡 Insight:

  • Promise.all → semua task penting, harus selesai.
  • Promise.race → hanya butuh task tercepat, misal fallback atau timeout.

Praktik Terbaik Async / Await

  1. Gunakan async/await saat kode bertingkat atau kompleks.
  2. Try/catch untuk setiap fungsi async penting untuk menangani error dengan baik.
  3. Jalankan Promise paralel dengan Promise.all() daripada sequential await jika task independent.
  4. Jangan menggabungkan terlalu banyak await secara berurutan tanpa alasan, karena akan membuat eksekusi sequential dan lambat.
  5. Top-level await bisa digunakan di modul modern, tapi hindari di browser lama.
  6. Gunakan finally untuk cleanup UI, menutup loader, atau reset state.

Kesimpulan

  • Async/await membuat kode asynchronous terlihat linear dan mudah dipahami.
  • Memahami kapan harus pakai sangat penting: operasi panjang, bertingkat, atau membutuhkan error handling yang rapi.
  • Kombinasi async/await + Promise.all() → efisiensi eksekusi paralel.
  • Try/catch + finally → penanganan error dan cleanup lebih aman.
  • Promise.race → berguna untuk timeout atau fallback.

Async/await adalah standar di JavaScript modern, digunakan di semua framework dan library populer untuk menulis kode asynchronous bersih dan maintainable.

Related Posts