How Does async/await Work?

An async function always returns a promise. When you call one, its body runs synchronously up to the first await, and then the function returns and the rest of the body is scheduled to continue later. The await keyword pauses that continuation and waits for the awaited value to settle.

Under the hood, await is roughly the same as attaching then and catch handlers to the awaited value. The compiler transforms an async function into one that returns a promise and wires up the continuations for you, which is why an async function can never throw synchronously to its caller. Any error becomes a rejection instead.

The important consequence is that the code before the first await is not asynchronous in any meaningful sense. If you do expensive work there, it blocks just like ordinary synchronous code. If you want a function to yield to the runtime before it starts, put an await at the top, or use the setTimeout trick of resolving a promise with no value.

Compared with a promise chain, the benefit is that the code keeps its shape. Sequential steps read top to bottom, the error handling is a single try and catch block rather than a second callback, and loops with await work naturally. The cost is that every function that awaits has to be async, so it returns a promise, and you have to be careful about the promise-returning function that forgets to await and therefore returns the wrong value.

The await still yields to the microtask queue, and then the value comes back unchanged. Awaiting a plain number, a string or an object is legal; the value is simply treated as an already fulfilled promise and handed back after a microtask.

async function demo() {
  console.log("before");

  // Awaiting a plain value still yields to the microtask queue.
  const value = await 42;
  console.log("after", value);

  // Awaiting a rejected promise throws inside the async function.
  try {
    await Promise.reject(new Error("failed"));
  } catch (err) {
    console.log("caught:", err.message);
  }

  // A throw inside an async function becomes a rejection.
  try {
    await (async () => { throw new Error("thrown"); })();
  } catch (err) {
    console.log("caught:", err.message);
  }
}

demo();

That the await still yields matters more than it looks. Because every await suspends the function and resumes it in a microtask, a loop that awaits inside its body runs each iteration in a separate microtask. That gives other queued work a chance to run between iterations, which is different from a synchronous loop that blocks everything until it finishes.

Two more behaviours to know. Awaiting a rejected promise throws inside the async function, so it has to be inside a try block or the function's promise rejects. And a throw inside an async function has the same effect: it rejects the promise the function returns, which is why you can catch errors from an awaited call with an ordinary try and catch.

There is one detail about the return value that catches people out. Because an async function always returns a promise, returning a plain value from it wraps that value in a promise. So awaiting the result of an async function that returns a number gives you the number, but calling it without awaiting gives you a promise, not the number.