Async/await in JavaScript

This chapter follows Promises in JavaScript.

async function declares a function that implicitly returns a Promise. await pauses that function until a Promise settles, then resumes with the fulfilled value or throws the rejection reason.

1
async function loadUser(id) {
2
  const res = await fetch(`/api/users/${id}`);
3
  if (!res.ok) throw new Error(String(res.status));
4
  return res.json();
5
}

Calling loadUser(1) returns a Promise—you can await loadUser(1) inside another async function or use .then.

Sequential versus parallel work

Await inside a loop runs steps one after another:

1
async function loadAllSequential(ids) {
2
  const users = [];
3
  for (const id of ids) {
4
    users.push(await loadUser(id));
5
  }
6
  return users;
7
}

Independent requests should run together:

1
async function loadAllParallel(ids) {
2
  return Promise.all(ids.map((id) => loadUser(id)));
3
}

Sequential awaits when you depend on the previous result; Promise.all when you do not.

try/catch and finally

try/catch/finally wraps await the same way as sync code. Rejected promises from await throw into catch.

1
async function run() {
2
  try {
3
    const user = await loadUser(1);
4
    console.log(user.name);
5
  } catch (err) {
6
    console.error("Failed", err);
7
  } finally {
8
    console.log("done");
9
  }
10
}

For patterns that attribute errors to specific steps—and TypeScript typing of results—see Error handling with async/await in TypeScript. Runtime throw and Error types are covered in Error handling in JavaScript.

Async arrow functions and methods

1
const save = async (data) => {
2
  await fetch("/api/save", { method: "POST", body: JSON.stringify(data) });
3
};
4

5
class Store {
6
  async load() {
7
    return loadUser(this.id);
8
  }
9
}

Top-level await

ES modules may await at module top level. The module graph waits for that promise before importers run—useful for config, bad for hidden side effects on import.

When not to use async/await

Low-level promise combinators (race, any, custom then chains) sometimes stay clearer without await. for await..of is for async iterables, not for arbitrary promise lists—see Async iterators and for await..of.

Continue with Cancellation with AbortController.