Introduction to Async JavaScript

The problem: JavaScript only does one thing at a time

JavaScript is single-threaded. That means it has one call stack, and it processes one piece of code at a time, in order. This is fine for most tasks.

The problem arises when a task takes time — loading a file, querying a database, calling an API. If JavaScript ran those tasks synchronously, it would block everything else until they finished.

// Imaginary synchronous fetch — do NOT do this
const data = slowNetworkRequest(); // everything freezes here
console.log(data);                 // only runs after the wait

In a browser, this means the UI freezes. The user can't click, scroll, or type. A three-second network request becomes a three-second dead interface.

The solution is to hand off slow work to the browser's Web APIs, which run separately from the JavaScript call stack. When the work is done, the result is returned to JavaScript via a callback queue and processed when the stack is free. This is the event loop model.

You don't need to fully understand the event loop mechanics to write good async code — but knowing it exists helps explain why async code looks different from synchronous code.

Callbacks: the original async pattern

Before Promises, async code used callbacks — functions passed as arguments, to be called when work was done.

function loadUser(id, callback) {
  setTimeout(() => {
    const user = { id, name: 'Helen' };
    callback(user);
  }, 1000);
}

loadUser(1, (user) => {
  console.log(user.name); // runs after 1 second
});

This works. But callbacks have a well-known problem: nesting. When one async operation depends on another, which depends on another, you end up with deeply nested, hard-to-read code — often called callback hell.

loadUser(1, (user) => {
  loadPosts(user.id, (posts) => {
    loadComments(posts[0].id, (comments) => {
      // three levels deep and we're just getting started
    });
  });
});

Promises were introduced to solve this.

What is a Promise?

A Promise is an object that represents the eventual result of an asynchronous operation. It doesn't have the result yet — it's a promise that a result will arrive.

You can think of it like ordering a coffee. The barista hands you a number. You haven't got the coffee yet, but you have a promise of coffee. You can keep moving around, do other things, and when your number is called, you collect it.

A Promise has three possible states:

Once a Promise is fulfilled or rejected, it stays that way. It won't flip back to pending, and it won't change state again.

Creating a Promise

You create a Promise with new Promise(), passing it an executor function with two parameters: resolve (call this when the work succeeds) and reject (call this when it fails).

const myPromise = new Promise((resolve, reject) => {
  const success = true;

  if (success) {
    resolve('Here is your result');
  } else {
    reject('Something went wrong');
  }
});

In practice you'll rarely create Promises from scratch — most of the time you'll be working with Promises returned by built-in APIs like fetch(). But understanding how they're built helps you understand how they behave.

Handling results with .then() and .catch()

Once you have a Promise, you handle its outcome using .then() for success and .catch() for errors.

myPromise
  .then((result) => {
    console.log(result); // 'Here is your result'
  })
  .catch((error) => {
    console.log(error); // only runs if rejected
  });

.then() and .catch() both return new Promises, which means you can chain them — each step receives the result of the previous one.

fetch('/api/user')
  .then((response) => response.json())   // step 1: parse the response
  .then((user) => {                       // step 2: use the parsed data
    console.log(user.name);
  })
  .catch((error) => {                     // catches any error in the chain
    console.error('Failed:', error);
  });

This flat chain is far more readable than nested callbacks — and it's the pattern fetch() is built on. You'll see it in the next tutorial.

A complete example

Here's a self-contained example that simulates loading a user after a short delay:

function getUser(id) {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      if (id > 0) {
        resolve({ id, name: 'Helen', role: 'admin' });
      } else {
        reject(new Error('Invalid user ID'));
      }
    }, 800);
  });
}

getUser(1)
  .then((user) => {
    console.log(`Welcome, ${user.name}`);
  })
  .catch((error) => {
    console.error(error.message);
  });

console.log('This runs immediately — before the user loads');

Notice that the final console.log runs before the user loads. That's async in action: JavaScript doesn't stop and wait, it moves on and handles the result when it's ready.