Promises and the event loop

JavaScript does one thing at a time

JavaScript in a web page runs on a single thread. A thread is one line of work: the browser runs your code one statement at a time, never two at once. Most code is fast, so this is fine.

Some jobs are slow: downloading data from a server, waiting for a timer, waiting for the user to click. If JavaScript stood still until these finished, the page would freeze: no scrolling, no typing. So these jobs are asynchronous (async): you start them, your code carries on, and you get the result later.

The event loop in simple words

• Call stack: the code running right now. Only one piece at a time.
• Browser helpers (Web APIs): the browser does the waiting for timers and network requests, outside your code.
• Task queue: finished jobs such as a timer callback or a click handler wait here in a line.
• Microtask queue: promise callbacks (then, catch, finally, code after await) wait here. They are special: they all run as soon as the stack is empty, before the next task.
• Event loop: a simple loop. When the call stack is empty, run all microtasks, then take the next task from the queue, and repeat.

console.log('A');
setTimeout(() => console.log('B'), 0); // a task
Promise.resolve().then(() => console.log('C')); // a microtask
console.log('D');
// Output: A, D, C, B

Callbacks and callback hell

You met callbacks in beginner JavaScript: a function you pass to another function, to be called later. Before promises, every async job took a callback. When one step needs the result of the step before, the callbacks nest deeper and deeper.

getUser(userId, (user) => {
  getOrders(user.id, (orders) => {
    getOrderItems(orders[0].id, (items) => {
      showItems(items);
      // and errors? each level needs its own error check...
    });
  });
});

Promises: a value that comes later

A promise starts pending and settles only once: it becomes fulfilled or rejected, and then it never changes again. finally runs in both cases.

function wait(ms) {
  return new Promise((resolve) => {
    setTimeout(() => resolve(ms), ms);
  });
}

wait(1000).then((ms) => console.log(`Waited ${ms} ms`));

showSpinner();
getUserPromise(42)
  .then((user) => getOrdersPromise(user.id)) // return the next promise
  .then((orders) => showOrders(orders))
  .catch((error) => showError(error.message)) // any step that fails lands here
  .finally(() => hideSpinner());             // runs on success and on failure

Waiting for many promises

const [user, cart] = await Promise.all([
  getUserPromise(42),
  getCartPromise(42),
]);
console.log(user.name, cart.items.length);