Docs/JavaScript/Promises & Async

Promises & Async/Await

Promise

Objek yang merepresentasikan operasi async. State: pending → fulfilled/rejected.

  • .then() — jika berhasil
  • .catch() — jika gagal
  • .finally() — selalu jalan

Async/Await

Syntax modern yang lebih mudah dibaca.

  • async function — mengembalikan Promise
  • await — menunggu Promise selesai
script.js
Try It →
async function fetchData() {
  const el = document.getElementById('result');
  el.innerHTML = '<em>Loading...</em>';
  try {
    const res = await fetch('https://randomuser.me/api/');
    const data = await res.json();
    const u = data.results[0];
    el.innerHTML = '<div style="display:flex;align-items:center;gap:12px">'+
      '<img src="'+u.picture.thumbnail+'" style="border-radius:50%;width:48px">'+
      '<div><strong>'+u.name.first+' '+u.name.last+'</strong><br>'+
      '<small style="color:#64748b">'+u.email+'</small></div></div>';
  } catch(e) {
    el.innerHTML = '<span style="color:red">Error: '+e.message+'</span>';
  }
}