JavaScript Promises vs Async/Await — Which Should You Use?

What is Asynchronous JavaScript?

JavaScript runs in a single thread — it can only do one thing at a time. But many operations take time: fetching data from an API, reading a file, or waiting for a user action. Without async handling, the whole browser would freeze while waiting.

Asynchronous JavaScript lets you start a time-consuming operation, continue doing other things, and handle the result when it arrives — without blocking. Promises and async/await are the two modern tools for this.

What are Promises?

A Promise is an object that represents a value that will be available in the future. A promise can be in one of three states: pending (waiting), fulfilled (success), or rejected (failed).

You handle a fulfilled promise with .then() and a rejected one with .catch().

// Fetching data with Promises
fetch('https://api.example.com/users')
  .then(response => response.json())
  .then(data => {
    console.log(data);          // use the data
  })
  .catch(error => {
    console.error('Error:', error);
  })
  .finally(() => {
    console.log('Done!');       // runs always
  });

// Creating your own Promise
function delay(ms) {
  return new Promise(resolve => {
    setTimeout(resolve, ms);
  });
}

delay(1000).then(() => console.log('1 second passed'));

Promise chains work but can get hard to read when you need to do many operations in sequence — this is why async/await was introduced.

What is Async/Await?

Async/await is syntactic sugar over Promises — under the hood, it still uses Promises. But it lets you write async code that looks and reads like synchronous code, which makes it much easier to understand.

• async before a function means it will always return a Promise
• await pauses execution inside the async function until the Promise resolves

// Same fetch operation with async/await
async function getUsers() {
  try {
    const response = await fetch('https://api.example.com/users');
    const data = await response.json();
    console.log(data);          // use the data
  } catch (error) {
    console.error('Error:', error);
  } finally {
    console.log('Done!');
  }
}

getUsers();

Side-by-Side Comparison

Error Handling

This is where the two approaches look most different. With Promises you use .catch(); with async/await you use try/catch.

// Promises: error handling
fetch('/api/data')
  .then(res => res.json())
  .catch(err => console.error(err));

// Async/Await: error handling
async function getData() {
  try {
    const res = await fetch('/api/data');
    if (!res.ok) throw new Error('Network error: ' + res.status);
    const data = await res.json();
    return data;
  } catch (err) {
    console.error(err);
  }
}

When to Use Each

Use async/await when:

• You have multiple async operations that depend on each other (sequential steps)
• You want clean, readable code that others can easily maintain
• You are working inside a function and want try/catch error handling
• You are learning — async/await is generally easier to understand first

Use Promises (.then) when:

• You are at the top level of a module (though modern JS supports top-level await)
• You need to chain a simple one-step operation
• You are working with Promise combinators like Promise.all, Promise.race, Promise.allSettled

Running Multiple Requests in Parallel

If you need to make multiple API calls that do NOT depend on each other, run them in parallel with Promise.all() — not sequentially with multiple awaits.

// SLOW: sequential (second waits for first to finish)
async function slow() {
  const users  = await fetch('/api/users').then(r => r.json());
  const posts  = await fetch('/api/posts').then(r => r.json());
  return { users, posts };
}

// FAST: parallel (both fire at the same time)
async function fast() {
  const [users, posts] = await Promise.all([
    fetch('/api/users').then(r => r.json()),
    fetch('/api/posts').then(r => r.json())
  ]);
  return { users, posts };
}