async/await Patterns

The async keyword

Adding async before a function declaration does two things:

1. It allows you to use await inside that function
2. It makes the function always return a Promise

async function greet() {
  return 'Hello';
}

greet().then((message) => console.log(message)); // 'Hello'

Even though greet just returns a plain string, async wraps it in a resolved Promise automatically. This means async functions always fit into Promise chains — you can call .then() on them.

The await keyword

await pauses execution within the async function until a Promise resolves, then gives you the resolved value directly — no .then() needed.

async function loadUser() {
  const response = await fetch('https://jsonplaceholder.typicode.com/users/1');
  const user = await response.json();
  console.log(user.name);
}

Compare this to the .then() version:

function loadUser() {
  fetch('https://jsonplaceholder.typicode.com/users/1')
    .then((response) => response.json())
    .then((user) => console.log(user.name));
}

Same result. The async/await version reads like a simple sequence of steps — which is exactly what it is.

Important: await only pauses the function it's inside. The rest of your program keeps running. It doesn't freeze the browser.

Error handling with try/catch

With .then() chains, you use .catch() for errors. With async/await, you use a standard try/catch block:

async function loadUser(id) {
  try {
    const response = await fetch(`https://jsonplaceholder.typicode.com/users/${id}`);

    if (!response.ok) {
      throw new Error(`HTTP error: ${response.status}`);
    }

    const user = await response.json();
    console.log(user.name);

  } catch (error) {
    console.error('Failed to load user:', error.message);
  }
}

The catch block handles everything that could go wrong inside the try — network failures, the response.ok check, parsing errors, anything. One handler for all of it.

Rewriting a Promise chain

Here's a direct before/after comparison — the same logic in both styles.

Promise chain:

function loadPostTitles(userId) {
  return fetch(`https://jsonplaceholder.typicode.com/posts?userId=${userId}`)
    .then((response) => {
      if (!response.ok) throw new Error(`HTTP error: ${response.status}`);
      return response.json();
    })
    .then((posts) => posts.map((post) => post.title))
    .catch((error) => {
      console.error(error.message);
      return [];
    });
}

async/await equivalent:

async function loadPostTitles(userId) {
  try {
    const response = await fetch(`https://jsonplaceholder.typicode.com/posts?userId=${userId}`);

    if (!response.ok) throw new Error(`HTTP error: ${response.status}`);

    const posts = await response.json();
    return posts.map((post) => post.title);

  } catch (error) {
    console.error(error.message);
    return [];
  }
}

Both functions return a Promise that resolves to an array of titles (or an empty array on error). The async/await version is easier to follow, especially once the logic grows.

Running requests in parallel

One common mistake with async/await is making requests sequential when they could run at the same time.

Slow — sequential (each waits for the previous):

async function loadDashboard() {
  const user  = await getUser(1);    // wait...
  const posts = await getPosts(1);   // then wait...
  const todos = await getTodos(1);   // then wait...
  // Total time: sum of all three requests
}

If getUser, getPosts, and getTodos don't depend on each other, there's no reason to queue them. Promise.all() runs them in parallel and waits for all to finish:

Fast — parallel:

async function loadDashboard() {
  const [user, posts, todos] = await Promise.all([
    getUser(1),
    getPosts(1),
    getTodos(1),
  ]);
  // Total time: the slowest single request
}

Promise.all() takes an array of Promises and returns a single Promise that resolves when all of them have resolved — giving you an array of results in the same order. If any one rejects, the whole thing rejects.

Here's a real example with fetch:

async function loadUserWithPosts(userId) {
  try {
    const [userRes, postsRes] = await Promise.all([
      fetch(`https://jsonplaceholder.typicode.com/users/${userId}`),
      fetch(`https://jsonplaceholder.typicode.com/posts?userId=${userId}`),
    ]);

    if (!userRes.ok || !postsRes.ok) {
      throw new Error('One or more requests failed');
    }

    const [user, posts] = await Promise.all([
      userRes.json(),
      postsRes.json(),
    ]);

    return { user, posts };

  } catch (error) {
    console.error(error.message);
    return null;
  }
}

Common mistakes

Forgetting await

Without await, you get the Promise object — not the resolved value:

async function broken() {
  const response = fetch('https://jsonplaceholder.typicode.com/users/1'); // missing await
  console.log(response); // Promise { <pending> } — not the response
}

If your data looks like Promise { <pending> }, a missing await is almost always the cause.

Using await outside an async function

await is only valid inside an async function. Using it at the top level of a regular script will throw a syntax error (though modern environments support top-level await in ES modules).

// This will throw in most contexts
const user = await getUser(1); // SyntaxError

Wrap it in an async function, or use an immediately invoked async function expression (IIFE):

(async () => {
  const user = await getUser(1);
  console.log(user.name);
})();

Making sequential requests when parallel is possible

If two requests don't depend on each other's results, use Promise.all(). Sequential await calls for independent data is one of the most common performance issues in async JavaScript.