Getting Started with JavaScript Promises and async/await

Asynchronous code is where JavaScript trips up the most people. The good news is that once you build one solid mental model, Promise chains and async/await both fall into place.

A Promise is a value that resolves later

A Promise represents a value that isn’t available yet. It is always in one of three states: pending, fulfilled, or rejected.

const promise = fetch('https://api.example.com/posts');

promise
  .then((response) => response.json())
  .then((data) => console.log(data))
  .catch((error) => console.error(error));

Each .then() returns a new promise, which is what lets you chain operations without nested callbacks.

async and await are syntax sugar

async/await does not replace Promises — it is a cleaner way to write them. An async function always returns a Promise, and await pauses that function until a Promise settles:

async function getPost(id) {
  try {
    const response = await fetch(`/api/posts/${id}`);
    if (!response.ok) throw new Error('Request failed');
    return await response.json();
  } catch (error) {
    console.error(error);
  }
}

Think of await as “give me the value when it’s ready, but don’t block the rest of the program.” The event loop keeps running while the function waits.

A few rules that prevent most bugs

1. await only works inside async functions.
2. An async function always returns a Promise — even if you return a plain value.
3. Errors in async functions can be caught with try/catch, just like synchronous code.
4. Run independent promises in parallel with Promise.all instead of awaiting each one in sequence.

Once these rules feel natural, asynchronous JavaScript stops being scary and starts being one of the language’s most powerful features.