Async/Await in JavaScript

async/await is syntax introduced in ES2017 that lets you write asynchronous code that reads like synchronous code, while still being built entirely on top of Promises. It doesn't replace Promises — it's "syntactic sugar" over them, making Promise-based code easier to write and reason about, especially when several async steps depend on each other.

Any function marked async automatically returns a Promise, and inside it, the await keyword pauses execution of that function (without blocking the rest of the program) until the awaited Promise settles.

Why it matters

async and await let asynchronous code be written top to bottom like ordinary code, with normal try and catch for errors. It is the form in which almost all API calls are written today. One common mistake is awaiting independent operations one after another when they could run together, which doubles the waiting time.

How await Relates to Promises

await somePromise is roughly equivalent to calling .then() on that Promise and continuing the function with the resolved value — except it looks like a normal, blocking assignment. If the awaited Promise rejects, await throws that rejection as a regular JavaScript exception at that line, which is why try/catch becomes the natural way to handle async errors instead of .catch() chains.

Error Handling with try/catch

Wrapping await expressions in a try block lets you catch failures exactly where synchronous code would: try { const data = await fetchData(); } catch (err) { /* handle it */ }. Without a surrounding try/catch, a rejected await propagates up as a rejected Promise from the async function itself, which the caller must then handle.

Sequential vs Parallel Awaiting

Awaiting one operation after another inside a loop or a sequence of statements runs them one at a time, which is correct when each step depends on the previous result, but wasteful when they're independent. To run independent async calls concurrently while still using await, start all the Promises first (without awaiting immediately) and then await Promise.all() on them together.

Examples

function fetchUserAge(id) {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      id === 1 ? resolve(28) : reject(new Error('User not found'));
    }, 100);
  });
}

async function printUserInfo(id) {
  console.log('Start fetching...');
  try {
    const age = await fetchUserAge(id);
    console.log('Age is', age);
  } catch (err) {
    console.error('Failed:', err.message);
  }
  console.log('Done.');
}

printUserInfo(1);
console.log('This logs before "Age is 28" because await does not block.');

Start fetching...
This logs before "Age is 28" because await does not block.
Age is 28
Done.

const delay = (label, ms) =>
  new Promise((resolve) => setTimeout(() => resolve(label), ms));

async function sequential() {
  const a = await delay('A', 100); // waits 100ms
  const b = await delay('B', 100); // then waits another 100ms
  console.log(a, b, '- sequential took ~200ms total');
}

async function concurrent() {
  const pA = delay('A', 100); // both start immediately
  const pB = delay('B', 100);
  const [a, b] = await Promise.all([pA, pB]); // waits ~100ms total
  console.log(a, b, '- concurrent took ~100ms total');
}

sequential();
concurrent();

A B - concurrent took ~100ms total
A B - sequential took ~200ms total

Exercise

fetchUser is a stand-in for an API call: it resolves with a user for id 1 and rejects for any other id. Write the async function loadName, which returns the user's name, or the text not found when the request fails.

Expected output: Asha then not found

function fetchUser(id) {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      if (id === 1) resolve({ id: 1, name: "Asha" });
      else reject(new Error("no such user"));
    }, 10);
  });
}

async function loadName(id) {
  // TODO: await fetchUser(id) and return the name; return "not found" on failure
}

async function main() {
  console.log(await loadName(1));
  console.log(await loadName(2));
}

main();

function fetchUser(id) {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      if (id === 1) resolve({ id: 1, name: "Asha" });
      else reject(new Error("no such user"));
    }, 10);
  });
}

async function loadName(id) {
  try {
    const user = await fetchUser(id);
    return user.name;
  } catch (error) {
    return "not found";
  }
}

async function main() {
  console.log(await loadName(1));
  console.log(await loadName(2));
}

main();

Quick quiz

Interview questions