Async JavaScript

console.log("1: sync start")

setTimeout(() => console.log("5: timeout 0ms"), 0)
setTimeout(() => console.log("6: timeout 10ms"), 10)

Promise.resolve().then(() => console.log("3: microtask"))
queueMicrotask(() => console.log("4: another microtask"))

console.log("2: sync end")

// A blocking loop delays EVERYTHING queued behind it
const start = Date.now()
while (Date.now() - start < 30) {}      // 30 ms of pure CPU — the timers wait
console.log("2b: after blocking")

// A fake async API in callback style (Node convention: error first)
function getUser(id, cb) {
  setTimeout(() => id > 0 ? cb(null, { id, name: "user" + id }) : cb(new Error("bad id")), 10)
}
function getOrders(userId, cb) {
  setTimeout(() => cb(null, [{ id: 1, total: 50 }, { id: 2, total: 20 }]), 10)
}

// Sequential steps nest — this is "callback hell"
getUser(1, (err, user) => {
  if (err) return console.log("failed:", err.message)
  getOrders(user.id, (err, orders) => {
    if (err) return console.log("failed:", err.message)
    const total = orders.reduce((s, o) => s + o.total, 0)
    console.log(`${user.name} spent ${total}`)
  })
})

getUser(-1, (err, user) => {
  if (err) return console.log("failed:", err.message)
  console.log("never here")
})

console.log("requests sent")   // prints FIRST — nothing above waited

// Creating a promise: wrap a callback API once, then never think about callbacks again
const sleep = ms => new Promise(resolve => setTimeout(resolve, ms))
const getUser = id => new Promise((resolve, reject) => {
  setTimeout(() => id > 0 ? resolve({ id, name: "user" + id }) : reject(new Error("bad id")), id > 0 ? 30 : 10)
})
const getOrders = () => Promise.resolve([{ total: 50 }, { total: 20 }])

// Chaining: each then receives the previous result; one catch covers the whole chain
getUser(1)
  .then(user => { console.log("got", user.name); return getOrders(user.id) })
  .then(orders => orders.reduce((s, o) => s + o.total, 0))
  .then(total => console.log("spent", total))
  .catch(err => console.log("failed:", err.message))
  .finally(() => console.log("done (1)"))

getUser(-1)
  .then(user => console.log("never"))
  .catch(err => console.log("failed:", err.message))
  .finally(() => console.log("done (-1)"))

// A promise settles once; later handlers still get the value
const p = Promise.resolve(42)
p.then(v => console.log("first handler", v))
p.then(v => console.log("second handler", v))

// then returns a NEW promise — the value flows through, and a thrown error becomes a rejection
Promise.resolve(1)
  .then(v => v + 1)
  .then(v => { if (v === 2) throw new Error("boom"); return v })
  .then(v => console.log("skipped"))
  .catch(e => console.log("caught", e.message))

console.log("sync code first")

const sleep = ms => new Promise(r => setTimeout(r, ms))
const getUser = async id => {
  await sleep(id > 0 ? 30 : 10)
  if (id <= 0) throw new Error("bad id")
  return { id, name: "user" + id }
}
const getOrders = async () => [{ total: 50 }, { total: 20 }]

async function report(id) {
  try {
    const user = await getUser(id)          // pauses here, the event loop keeps going
    const orders = await getOrders(user.id)
    const total = orders.reduce((s, o) => s + o.total, 0)
    return `${user.name} spent ${total}`
  } catch (err) {
    return `failed: ${err.message}`
  } finally {
    console.log("cleanup for", id)
  }
}

// Top level: an async function returns a promise
report(1).then(console.log)
report(-1).then(console.log)
console.log("sync first")

// Sequential vs parallel — the single most important async decision
async function sequential() {
  const t = Date.now()
  await sleep(40); await sleep(40)
  return Date.now() - t >= 70 ? "sequential: ~80ms" : "sequential: too fast?"
}
async function parallel() {
  const t = Date.now()
  await Promise.all([sleep(40), sleep(40)])
  return Date.now() - t < 70 ? "parallel: ~40ms" : "parallel: too slow?"
}
sequential().then(console.log)
parallel().then(console.log)

// Simulating an API so the patterns run here
const api = {
  get: async path => {
    await new Promise(r => setTimeout(r, 5))
    if (path === "/missing") return { ok: false, status: 404, json: async () => ({}) }
    return { ok: true, status: 200, json: async () => ({ path, data: path.length }) }
  },
}
async function getJson(path) {
  const res = await api.get(path)
  if (!res.ok) throw new Error(`HTTP ${res.status} for ${path}`)
  return res.json()
}

;(async () => {
  console.log(await getJson("/users"))
  try { await getJson("/missing") } catch (e) { console.log(e.message) }

  const all = await Promise.all(["/a", "/bb", "/ccc"].map(getJson))
  console.log(all.map(r => r.data))

  const settled = await Promise.allSettled(["/ok", "/missing"].map(getJson))
  console.log(settled.map(s => s.status))

  const first = await Promise.race([getJson("/slow-ish"), getJson("/x")])
  console.log("race winner has data", first.data)

  const anyOk = await Promise.any([getJson("/missing"), getJson("/y")])
  console.log("any:", anyOk.path)
})()

const sleep = ms => new Promise(r => setTimeout(r, ms))

// setTimeout / clearTimeout
const t = setTimeout(() => console.log("never — cancelled"), 5)
clearTimeout(t)

// setInterval: repeat until cleared. ALWAYS keep the handle.
let ticks = 0
const iv = setInterval(() => {
  ticks++
  console.log("tick", ticks)
  if (ticks === 3) clearInterval(iv)
}, 10)

// debounce: run only after the calls stop for `ms` (search boxes, resize)
function debounce(fn, ms) {
  let handle
  return (...args) => {
    clearTimeout(handle)
    handle = setTimeout(() => fn(...args), ms)
  }
}
const search = debounce(q => console.log("searching for", q), 80)
search("a"); search("ab"); search("abc")     // only the last one fires

// A minimal event emitter — the pattern under DOM events and Node streams
class Emitter {
  #handlers = new Map()
  on(event, fn) { (this.#handlers.get(event) ?? this.#handlers.set(event, []).get(event)).push(fn); return this }
  emit(event, ...args) { for (const fn of this.#handlers.get(event) ?? []) fn(...args) }
}
const bus = new Emitter()
bus.on("saved", id => console.log("saved", id)).on("saved", () => console.log("also notified"))
bus.emit("saved", 42)

// Wait for a "next tick" before continuing an async function
;(async () => {
  await sleep(150)
  console.log("after everything")
})()