async/await: Async yang Terlihat Sinkron

Promise tanpa rantai then

async/await adalah sintaks di atas Promise yang membuat kode async terlihat seperti kode sinkron biasa. Lebih mudah dibaca, terutama untuk alur bertahap.

// dengan then
ambilUser()
  .then(user => ambilPostingan(user.id))
  .then(postingan => console.log(postingan));

// dengan async/await: terlihat seperti kode biasa
async function tampilkan() {
  let user = await ambilUser();
  let postingan = await ambilPostingan(user.id);
  console.log(postingan);
}
tampilkan();

Kata kunci await "menunggu" Promise selesai, lalu melanjutkan baris berikutnya dengan hasilnya.

Aturan main

1. await hanya boleh di dalam fungsi async (atau top-level module modern).
2. Fungsi async selalu mengembalikan Promise, apapun yang di-return.

async function tambah(a, b) {
  return a + b; // otomatis dibungkus Promise
}
tambah(2, 3).then(hasil => console.log(hasil)); // 5

Error handling dengan try-catch

Keunggulan besar async/await: error handling memakai try-catch biasa, bukan .catch():

async function muatData() {
  try {
    let user = await ambilUser();
    let postingan = await ambilPostingan(user.id);
    console.log(postingan);
  } catch (error) {
    console.log("Gagal memuat: " + error.message);
  } finally {
    console.log("Loading selesai");
  }
}

Satu try-catch menangani semua await di dalamnya, jauh lebih rapi daripada catch berlapis.

Paralel vs sekuensial

await berurutan berarti sekuensial (tunggu satu per satu). Untuk yang independen, jalankan paralel:

// sekuensial: total waktu = jumlah semua
let a = await ambilA();
let b = await ambilB();

// paralel: total waktu = yang paling lama
let [pa, pb] = await Promise.all([ambilA(), ambilB()]);

Jangan sekuensialkan operasi yang tidak saling bergantung, itu membuang waktu.

Catatan teknis: await di loop for...of berjalan sekuensial. Untuk memproses array secara paralel, pakai Promise.all dengan map: await Promise.all(items.map(item => proses(item))). Tapi hati-hati membanjiri server dengan ratusan request sekaligus, batasi concurrency untuk data besar.

Studi kasus: dashboard mini

Rangkai fetch, async/await, dan DOM dalam satu alur nyata:

async function muatDashboard() {
  let status = document.querySelector("#status");
  status.textContent = "Memuat...";
  try {
    let [user, post] = await Promise.all([
      fetch("https://jsonplaceholder.typicode.com/users/1").then(r => r.json()),
      fetch("https://jsonplaceholder.typicode.com/posts/1").then(r => r.json())
    ]);
    document.querySelector("#nama").textContent = user.name;
    document.querySelector("#judul-post").textContent = post.title;
    status.textContent = "";
  } catch (e) {
    status.textContent = "Gagal memuat: " + e.message;
  }
}
muatDashboard();

Pola muat-tampilkan-tangani error ini adalah kerangka setiap halaman yang mengambil data dari API. Kuasai sampai bisa menulisnya tanpa mencontek, karena kamu akan menulis variasi pola ini ratusan kali.

Kesimpulan

async/await adalah cara modern menulis async JavaScript. Default ke pola ini untuk kode baru, pahami Promise di bawahnya untuk debugging. Kombinasi keduanya menangani hampir semua kebutuhan async.