Spear — Learn to Code

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>';
  }
}

← Previous

Scope & Closures

JSON