async/await JavaScript: Kode Async yang Terbaca dari Atas ke Bawah

async/await Hanyalah Promise yang Menyamar

async/await bukan model konkurensi baru. Ini adalah sintaks pemanis di atas promise yang memungkinkanmu menulis kode yang terlihat berurutan walaupun sebenarnya asynchronous. Mesinnya sama, bentuknya jauh lebih bersahabat.

Berikut tugas yang sama ditulis dengan dua cara:

function fetchUserPromise(id) {
  return fetch(`https://jsonplaceholder.typicode.com/users/${id}`)
    .then((res) => res.json())
    .then((user) => user.name);
}

async function fetchUserAsync(id) {
  const res = await fetch(`https://jsonplaceholder.typicode.com/users/${id}`);
  const user = await res.json();
  return user.name;
}

fetchUserPromise(1).then(console.log);
fetchUserAsync(2).then(console.log);

Kedua fungsi mengembalikan promise. Keduanya melakukan hal yang persis sama. Versi async terbaca dari atas ke bawah tanpa rangkaian .then, dan itulah daya tarik utamanya.

async Menandai Fungsi yang Mengembalikan Promise

Taruh async di depan function, arrow function, atau method, maka dua hal terjadi:

1. Fungsi itu selalu mengembalikan promise. Apa pun yang kamu return menjadi nilai hasilnya.
2. Kamu boleh memakai await di dalamnya.

async function greet(name) {
  return `Hello, ${name}`;
}

const result = greet("Ada");
console.log(result);              // Promise { 'Hello, Ada' }
result.then((msg) => console.log(msg));

Perhatikan bahwa result bukan string, melainkan promise yang menghasilkan string tersebut. Walaupun greet tidak berisi await dan tidak melakukan pekerjaan async apa pun, kata kunci async tetap membungkus nilai kembaliannya dalam promise. Kalau fungsinya melempar error, promise-nya ditolak.

await Menjeda Sampai Promise Selesai

Di dalam fungsi async, await somePromise menjeda fungsi itu sampai promise-nya berhasil, lalu memberimu nilai hasilnya. Kalau promise-nya ditolak, await melempar error.

function wait(ms) {
  return new Promise((resolve) => setTimeout(resolve, ms));
}

async function countdown() {
  console.log("3");
  await wait(500);
  console.log("2");
  await wait(500);
  console.log("1");
  await wait(500);
  console.log("Go!");
}

countdown();
console.log("started countdown");

Perhatikan urutan output-nya. "started countdown" tercetak sebelum "2", karena await hanya menjeda fungsi async, bukan seluruh program. Event loop terus berjalan; countdown baru dilanjutkan nanti setiap kali promise wait selesai.

Kamu bisa await apa pun yang mirip promise. await 42 juga sah: nilai yang bukan promise dibungkus dalam Promise.resolve(42) dan langsung selesai.

Menangani Error dengan try/catch

Dengan promise biasa, kamu merangkai .catch(). Dengan async/await, promise yang ditolak menjadi exception yang dilempar dan bisa kamu tangkap dengan cara biasa:

async function loadUser(id) {
  try {
    const res = await fetch(`https://jsonplaceholder.typicode.com/users/${id}`);
    if (!res.ok) {
      throw new Error(`HTTP ${res.status}`);
    }
    const user = await res.json();
    return user.name;
  } catch (err) {
    console.error("loadUser failed:", err.message);
    return null;
  }
}

loadUser(1).then((name) => console.log("got:", name));
loadUser(99999).then((name) => console.log("got:", name));

Satu try/catch mencakup setiap await di dalamnya. Kegagalan jaringan, error saat parsing JSON, dan pernyataan throw milikmu sendiri semuanya berakhir di catch yang sama. Itu peningkatan nyata dibandingkan rangkaian .then/.catch yang bersarang.

Satu hal yang perlu diwaspadai: fetch hanya ditolak saat ada error jaringan, bukan saat HTTP 4xx/5xx. Kamu harus mengecek res.ok sendiri lalu melempar error, pola yang akan terus kamu lihat di kode sungguhan.

Jangan await di Dalam Loop Kalau Tidak Perlu

Ini jebakan async/await yang paling umum. await berurutan di dalam loop berarti setiap iterasi menunggu iterasi sebelumnya:

function wait(ms, label) {
  return new Promise((resolve) => setTimeout(() => resolve(label), ms));
}

async function sequential() {
  const start = Date.now();
  const a = await wait(300, "A");
  const b = await wait(300, "B");
  const c = await wait(300, "C");
  console.log([a, b, c], `${Date.now() - start}ms`);
}

async function parallel() {
  const start = Date.now();
  const [a, b, c] = await Promise.all([
    wait(300, "A"),
    wait(300, "B"),
    wait(300, "C"),
  ]);
  console.log([a, b, c], `${Date.now() - start}ms`);
}

sequential();
parallel();

sequential butuh sekitar 900ms. parallel butuh sekitar 300ms. Pegangan praktisnya: kalau tugas-tugasnya tidak saling bergantung pada hasil masing-masing, mulai semuanya, lalu await Promise.all. Lakukan await satu per satu hanya kalau panggilan berikutnya benar-benar butuh hasil sebelumnya.

Untuk koleksi, pola yang lazim adalah Promise.all(items.map(async (x) => ...)). for...of biasa dengan await di dalamnya berjalan satu per satu. Kadang kamu memang menginginkannya (membatasi laju, menjaga urutan), tetapi biasanya tidak.

Mencampur async/await dan Promise Biasa

Kamu tidak harus memilih salah satu. Fungsi async mengembalikan promise, dan await bekerja pada promise apa pun, jadi kamu bisa mencampurnya dengan bebas:

async function getJSON(url) {
  const res = await fetch(url);
  return res.json();
}

// Call an async function and chain like any promise:
getJSON("https://jsonplaceholder.typicode.com/users/1")
  .then((user) => console.log(user.name))
  .catch((err) => console.error(err));

// Or await it from another async function:
async function main() {
  const user = await getJSON("https://jsonplaceholder.typicode.com/users/1");
  console.log(user.name);
}

main();

Kedua gaya bisa saling menggantikan. Pakai await saat kode lebih enak dibaca dari atas ke bawah; pakai .then saat kamu butuh sesuatu yang cepat dan sekali pakai, atau saat kamu bekerja di luar konteks async.

Top-Level await (di ES Module)

Dulu, kamu harus membungkus await dalam fungsi async karena await tidak diizinkan di tingkat atas sebuah script. Sekarang sudah berubah: di dalam ES module (file .mjs atau <script type="module">), kamu bisa langsung await di tingkat atas:

// in an ES module
const res = await fetch("https://jsonplaceholder.typicode.com/users/1");
const user = await res.json();
console.log(user.name);

Top-level await menunda selesainya module sampai promise yang ditunggu selesai, dan setiap module yang meng-import module itu ikut menunggu. Berguna untuk memuat konfigurasi dan import dinamis, tetapi pakai seperlunya: top-level await yang lambat memblokir semua yang meng-import module tersebut.

Di file CommonJS atau script inline biasa, cara ini tetap gagal dengan SyntaxError. Solusi klasiknya adalah fungsi async yang langsung dipanggil:

(async () => {
  const res = await fetch("https://jsonplaceholder.typicode.com/users/1");
  const user = await res.json();
  console.log(user.name);
})();

Hal yang Sering Menjebak

Tur singkat jebakan yang biasa terjadi:

• Lupa async. Memakai await di fungsi biasa adalah syntax error. Solusinya menambahkan async, atau memanggil helper async dengan .then.
• Lupa melakukan await pada hasilnya. const data = getJSON(url); memberimu promise, bukan datanya. Kalau kamu memakainya seolah-olah itu nilainya, kamu akan melihat [object Promise] muncul di output-mu.
• Penolakan yang tidak ditangani. Fungsi async yang kamu jalankan lalu lupakan (doWork();) akan diam-diam menelan error, kecuali kamu menambahkan .catch atau melakukan await di dalam try/catch.
• forEach dengan callback async. array.forEach(async (x) => await something(x)) tidak menunggu apa pun, karena forEach mengabaikan promise yang dikembalikan. Pakai for...of dengan await, atau Promise.all(array.map(...)).

// Broken: forEach doesn't await.
async function broken() {
  [1, 2, 3].forEach(async (n) => {
    await new Promise((r) => setTimeout(r, 100));
    console.log("done", n);
  });
  console.log("finished?");
}

// Fixed: Promise.all + map.
async function fixed() {
  await Promise.all([1, 2, 3].map(async (n) => {
    await new Promise((r) => setTimeout(r, 100));
    console.log("done", n);
  }));
  console.log("finished!");
}

broken();
fixed();

Jalankan kodenya: "finished?" tercetak sebelum "done" mana pun, karena broken selesai tanpa menunggu. fixed menunggu semuanya, lalu mencetak "finished!" paling akhir.

Kapan Memakai async/await

Jadikan async/await pilihan default untuk kode apa pun yang melakukan lebih dari satu langkah asynchronous secara berurutan, atau yang butuh penanganan error ala try/catch. Tetap pakai promise mentah untuk kode satu baris yang sederhana, untuk kode library yang mengembalikan promise tanpa perlu menunggu apa pun sendiri, atau saat kamu benar-benar butuh combinator seperti Promise.race atau .finally() dalam sebuah rangkaian.

Kalau dipakai dengan baik, async/await membuat kode async terbaca seperti resep: lakukan ini, lalu ini, lalu ini. Event loop tetap bekerja seperti biasa, hanya saja kamu tidak perlu lagi berpikir dalam callback.

Berikutnya: fetch API

Sebagian besar contoh di sini memakai fetch sebagai pengganti "sesuatu yang async". Ia layak dibahas dengan serius: cara kerja request dan response, menangani JSON, mengatur header, dan mengapa fetch tidak ditolak saat ada error HTTP. Itu topik halaman berikutnya.