← Back to Roadmap

Async/Await

Medium

In plain terms

async/await is a cleaner way to work with Promises. Mark a function with async, and you can use await inside it to pause until a Promise settles. The code reads top-to-bottom, like normal code, instead of using .then() chains.

An async function always returns a Promise. When you await something, JavaScript pauses that function (without blocking the rest of the app) until the Promise resolves. Use try/catch to handle errors—await throws when the Promise rejects, and catch will receive that error. async/await is "syntactic sugar" over Promises: it does the same thing, but the code is easier to read and maintain.

What you need to know

  • •async function
  • •await pauses
  • •try/catch for errors

Try it yourself

Copy the code below and run it in your browser console or a code editor:

async function fetchUser(id) {
  try {
    const res = await fetch(`/api/users/${id}`);
    const data = await res.json();
    return data;
  } catch (err) {
    console.error(err);
  }
}

const user = await fetchUser(1);  // in async context

Why this matters

async/await is how most real-world JS is written for API calls and async flow. Interviewers ask you to write or refactor async code and handle errors with try/catch.

How it connects

async/await works with Promises (await unwraps a Promise). It connects to fetch (await fetch()), error handling (try/catch), and the fact that async functions always return a Promise.

Interview focus

Be ready to explain these; they come up often in JS interviews.

  • ▸async function always returns a Promise; await pauses until it settles.
  • ▸Use try/catch for errors; await throws on rejection. Do not forget await (silent bug).
  • ▸Sequential vs parallel: await in loop = sequential; Promise.all for parallel.

Learn more

Dive deeper with these trusted resources:

MDNjavascript.infoTutorialsPointW3Schools