Async: Promise and await

What synchronous and asynchronous mean

Synchronous = each line waits for the previous one to finish. Asynchronous = you start a slow operation (a network request, a timer, reading a file) and carry on with something else; the result comes later.

Why it matters: JS in the browser runs on a single thread — the same one that paints the page and responds to clicks. If it waited synchronously 2 seconds for a request, the page would freeze for 2 seconds.

The event loop — how it works

1. The call stack — the code running right now.
2. Slow operations are handed to the browser (network, timers), which does them in parallel.
3. When one finishes, its callback goes into a queue.
4. The event loop takes from the queue only when the stack is empty.

There are two queues, with different priorities:

console.log(1)
setTimeout(() => console.log(4))          // macrotask
Promise.resolve().then(() => console.log(3)) // microtask
console.log(2)
// 1, 2, 3, 4

What a Promise is

A Promise is an object that represents a value that's coming — like an order ticket: you don't have the food yet, but you have something you can wait on.

A Promise has 3 states:

Once it has settled (fulfilled or rejected), the state never changes again.

const wait = ms => new Promise(resolve => setTimeout(resolve, ms))

fetch('/api/user')
  .then(res => res.json())      // runs on success
  .then(user => render(user))
  .catch(err => showError(err)) // runs on an error, anywhere in the chain

async / await — the same thing, written like synchronous code

async function loadUser(id) {
  try {
    const res = await fetch(`/api/users/${id}`)   // "pauses" the function until the response arrives
    return await res.json()
  } catch (error) {
    return null
  }
}

• async before the function → it always returns a Promise.
• await → waits for a Promise without blocking the page (only the current function "waits").
• Errors are caught with a normal try/catch.

Sequential vs parallel — the most common optimization

// ✗ sequential — the second starts after the first: 2 × the time
const user = await getUser()
const posts = await getPosts()

// ✓ parallel — both start at once
const [user, posts] = await Promise.all([getUser(), getPosts()])

Go sequential only when the second request depends on the result of the first.

Promise combinators — kinds and when

Classic mistakes

• forEach with async does not wait → for...of (sequential) or Promise.all(arr.map(...)) (parallel).
• Forgetting await → you have a Promise instead of a value (user.name is undefined).
• A Promise with no catch / try → unhandledrejection.
• await in a loop when the requests are independent → slow.

Summary

• JS has a single thread; slow operations are asynchronous so the page doesn't freeze.
• A Promise = a future value: pending → fulfilled / rejected.
• async/await + try/catch; Promise.all for parallel work.

Official sources

• MDN — Using promises
• MDN — async function
• MDN — The event loop
• javascript.info — Event loop