🔗 Promises & Async/Await

Visualizing asynchronous pipeline execution, chaining, and error handling

What is a Promise?
A Promise is a placeholder for a future value. It's in one of three states: Pending (waiting), Fulfilled (success), or Rejected (failed). Async/await is syntactic sugar that makes Promises look synchronous.
👆 Pipeline State
Press "Run Fetch Pipeline" to simulate a real-world async data-fetching chain.
📡
fetch()
pending
—
→
📦
.json()
pending
—
→
🔄
transform()
pending
—
→
💾
saveToStore()
pending
—
→
✅
renderUI()
pending
—

❌ Callback Hell (Old Way)

hard to read
fetch('/api/users', function(err, data) {
  if (err) throw err;
  parseJSON(data, function(err, json) {
    if (err) throw err;
    transform(json, function(err, result) {
      if (err) throw err;
      save(result, function(err) {
        if (err) throw err;
        // 😱 "Pyramid of doom"
      });
    });
  });
});

✅ Async/Await (Modern Way)

clean & readable
async function loadUsers() {
  try {
    const res = await fetch('/api/users');
    const json = await res.json();
    const data = transform(json);
    await save(data);
    renderUI(data); // ✨ flat & clear
  } catch (err) {
    // ONE place for all errors
    console.error(err);
  }
}

⛓ Promise.all() — Parallel vs Sequential

❌ Sequential (slow):
const a = await fetchA(); // 1s
const b = await fetchB(); // 1s
const c = await fetchC(); // 1s
// Total: 3 seconds 😭
✅ Parallel (fast):
const [a, b, c] = await
  Promise.all([
    fetchA(), fetchB(), fetchC()
  ]);
// Total: 1 second ✅