Di lesson Promise kamu udah ketemu chain .then().then().then() — kerja sih, tapi lama-lama kayak kereta gerbong panjang yang susah dibaca pas kompleks. Async/await lahir tahun 2017 buat solve itu — dia kasih cara nulis kode async yang BACA-nya kayak kode sync biasa, tapi tetep jalan async di belakang layar. Hampir semua codebase JavaScript modern (React, Vue, Node.js apps) pake async/await sebagai default sekarang.

💡 Magic di balik layar. Async/await sebenarnya cuma "syntactic sugar" di atas Promise — gak ada teknologi baru, cuma cara nulis baru yang lebih manusiawi. Di balik layar, JavaScript engine konvert async/await jadi .then() chain otomatis. Promise = mesin, async/await = setir yang nyaman.

// Dengan Promise .then()
fetch("https://api.example.com/data")
  .then(response => response.json())
  .then(data => console.log(data));

// Dengan async/await
async function ambilData() {
  const response = await fetch("https://api.example.com/data");
  const data = await response.json();
  console.log(data);
}

Aturan:

• async ditambahkan sebelum fungsi — menandakan fungsi ini mengandung operasi async
• await digunakan di dalam fungsi async — menunggu Promise selesai
• await hanya bisa digunakan di dalam fungsi async

Error handling dengan try/catch:

async function ambilData() {
  try {
    const response = await fetch("https://api.example.com/data");
    const data = await response.json();
    return data;
  } catch (error) {
    console.log("Gagal mengambil data:", error);
    return null;
  }
}

🎭 Analogi sehari-hari

async/await = antri di warung Mbak Lia. Walaupun antri, kamu bisa mainan HP. Pas giliran (await), kamu maju, ambil pesanan, baru lanjut.

Promise.all([...]) = kamu pesan ke 3 warung sekaligus, semua disiapin paralel — total waktu = warung paling lambat, bukan jumlah semua.

⚠️ Jebakan yang sering ditemui

1. Lupa await = dapat Promise object, bukan hasilnya.

async function f() {
  const data = fetch("/api");      // ❌ data = Promise<Response>
  console.log(data);               // Promise { <pending> }
  const data2 = await fetch("/api"); // ✅
}

2. forEach + await TIDAK menunggu.

async function bad() {
  [1,2,3].forEach(async n => {
    await fetch(`/${n}`);   // ❌ forEach jalan terus tanpa nunggu
  });
}

async function good() {
  for (const n of [1,2,3]) {
    await fetch(`/${n}`);   // ✅ for...of menunggu
  }
}

3. Serial vs paralel — ada bedanya untuk performa.

// Serial — lambat (3 detik kalau masing-masing 1s)
const a = await ambilA();
const b = await ambilB();
const c = await ambilC();

// Paralel — cepat (1 detik total)
const [a, b, c] = await Promise.all([ambilA(), ambilB(), ambilC()]);

4. Top-level await cuma boleh di ES module (<script type="module">).

TL;DR: async/await itu syntactic sugar di atas Promise — nulis kode async kayak sync (lebih readable), engine konvert ke .then() chain di belakang layar. async mark fungsi yang ngandung operasi async, await nungguin Promise selesai (cuma di dalam async). Error handling pakai try/catch. Untuk paralel, pakai Promise.all([...]).

🧪 Tebakan cepat — serial vs paralel. Tiap ambil() butuh 1 detik. Tebak total waktu untuk tiap blok:

// Blok A
const a = await ambilA();
const b = await ambilB();
const c = await ambilC();

// Blok B
const [a, b, c] = await Promise.all([ambilA(), ambilB(), ambilC()]);

Jawaban: Blok A = 3 detik (await berurutan, satu selesai baru next mulai). Blok B = 1 detik (semua mulai bareng, total = yang paling lambat). Pelajaran: kalau request gak saling depend, selalu pakai Promise.all buat hemat waktu 3×.