Async and Promises

JavaScript is single-threaded, meaning it can only do one thing at a time. Yet the web is full of operations that take time: fetching data, waiting for user input, running timers. Asynchronous programming solves this by letting your code start a task and continue running while that task completes in the background. In this lesson you will learn the three main approaches to async code: callbacks, Promises, and async/await.

What You'll Learn

Why asynchronous code is necessary in JavaScript
How callbacks work and their limitations
The Promise constructor, .then(), and .catch()
How async/await simplifies asynchronous code
Error handling patterns for async operations

The Problem: Blocking Code

Imagine if your entire page froze every time it fetched data from a server. That would be a terrible experience. JavaScript avoids this by using an event loop that processes tasks without blocking. Let's see the difference:

// Synchronous: each line waits for the previous one
console.log("Step 1: Start");
console.log("Step 2: Process");
console.log("Step 3: Done");

console.log("---");

// Asynchronous: setTimeout schedules work for later
console.log("Step 1: Start");
setTimeout(function() {
  console.log("Step 2: This runs after the delay");
}, 1000);
console.log("Step 3: This runs immediately (doesn't wait!)");

Notice how Step 3 prints before Step 2. The setTimeout schedules the callback to run after 1000 milliseconds, but the rest of the code keeps going.

Callbacks

A callback is a function passed to another function to be called later. Callbacks were the original way to handle async operations in JavaScript:

function fetchUserData(userId, callback) {
  console.log("Fetching user " + userId + "...");

  setTimeout(function() {
    // Simulate data coming back from a server
    const user = { id: userId, name: "Alice", email: "alice@example.com" };
    callback(null, user); // Convention: first arg is error, second is data
  }, 1000);
}

function displayUser(error, user) {
  if (error) {
    console.log("Error:", error.message);
    return;
  }
  console.log("User found:", user.name + " (" + user.email + ")");
}

fetchUserData(1, displayUser);
console.log("Request sent, waiting for response...");

Callback Hell

When you need to perform multiple async operations in sequence, callbacks nest deeper and deeper. This is often called "callback hell" or the "pyramid of doom":

// Simulating sequential async operations
function step1(callback) {
  setTimeout(function() {
    console.log("Step 1 complete");
    callback("data from step 1");
  }, 500);
}

function step2(data, callback) {
  setTimeout(function() {
    console.log("Step 2 complete (received: " + data + ")");
    callback("data from step 2");
  }, 500);
}

function step3(data, callback) {
  setTimeout(function() {
    console.log("Step 3 complete (received: " + data + ")");
    callback("final result");
  }, 500);
}

// Nested callbacks become hard to read
step1(function(result1) {
  step2(result1, function(result2) {
    step3(result2, function(result3) {
      console.log("All done:", result3);
    });
  });
});

Promises

Promises were introduced to solve the callback nesting problem. A Promise is an object that represents the eventual completion or failure of an async operation:

// Creating a Promise
function fetchUser(userId) {
  return new Promise(function(resolve, reject) {
    console.log("Fetching user " + userId + "...");

    setTimeout(function() {
      if (userId > 0) {
        resolve({ id: userId, name: "Alice", role: "Developer" });
      } else {
        reject(new Error("Invalid user ID"));
      }
    }, 1000);
  });
}

// Using .then() and .catch()
fetchUser(1)
  .then(function(user) {
    console.log("Success:", user.name + " is a " + user.role);
  })
  .catch(function(error) {
    console.log("Error:", error.message);
  });

// Trigger the error path
fetchUser(-1)
  .then(function(user) {
    console.log("This won't run");
  })
  .catch(function(error) {
    console.log("Caught error:", error.message);
  });

Promise Chaining

Promises shine when you need to perform sequential async operations. Each .then() returns a new Promise, so you can chain them flat instead of nesting:

function delay(ms, value) {
  return new Promise(function(resolve) {
    setTimeout(function() { resolve(value); }, ms);
  });
}

delay(500, "Hello")
  .then(function(result) {
    console.log("Step 1:", result);
    return delay(500, result + " World");
  })
  .then(function(result) {
    console.log("Step 2:", result);
    return delay(500, result + "!");
  })
  .then(function(result) {
    console.log("Step 3:", result);
    console.log("Final result:", result);
  })
  .catch(function(error) {
    console.log("Something went wrong:", error.message);
  });

Promise.all and Promise.race

When you need to run multiple async operations in parallel, Promise.all waits for all of them. Promise.race resolves as soon as the first one finishes:

function fetchData(name, time) {
  return new Promise(function(resolve) {
    setTimeout(function() {
      resolve({ name: name, time: time });
    }, time);
  });
}

// Promise.all: wait for ALL to complete
Promise.all([
  fetchData("Users", 800),
  fetchData("Posts", 500),
  fetchData("Comments", 1200)
]).then(function(results) {
  console.log("All data fetched:");
  results.forEach(function(r) {
    console.log("  " + r.name + " (took " + r.time + "ms)");
  });
});

// Promise.race: first one wins
Promise.race([
  fetchData("Fast Server", 300),
  fetchData("Slow Server", 2000)
]).then(function(winner) {
  console.log("Race winner:", winner.name);
});

Async/Await

async/await is syntactic sugar built on top of Promises. It lets you write asynchronous code that looks and reads like synchronous code:

function fetchProduct(id) {
  return new Promise(function(resolve, reject) {
    setTimeout(function() {
      const products = {
        1: { name: "Laptop", price: 999 },
        2: { name: "Phone", price: 699 },
        3: { name: "Tablet", price: 499 }
      };
      if (products[id]) {
        resolve(products[id]);
      } else {
        reject(new Error("Product not found"));
      }
    }, 500);
  });
}

// Using async/await
async function showProduct(id) {
  console.log("Looking up product " + id + "...");

  try {
    const product = await fetchProduct(id);
    console.log("Found: " + product.name + " - $" + product.price);
  } catch (error) {
    console.log("Error: " + error.message);
  }
}

// Sequential async calls that read top-to-bottom
async function showAll() {
  await showProduct(1);
  await showProduct(2);
  await showProduct(3);
  await showProduct(99); // Will trigger error handling
  console.log("All lookups complete");
}

showAll();

Parallel Execution with Async/Await

Using await in a loop runs operations one after another. For parallel execution, combine async/await with Promise.all:

function fetchScore(player) {
  return new Promise(function(resolve) {
    const time = Math.floor(Math.random() * 1000) + 200;
    setTimeout(function() {
      const score = Math.floor(Math.random() * 100);
      resolve({ player: player, score: score });
    }, time);
  });
}

async function getScores() {
  const players = ["Alice", "Bob", "Charlie", "Diana"];

  console.log("Fetching scores in parallel...");
  const startTime = Date.now();

  // All requests fire at once
  const results = await Promise.all(
    players.map(function(player) { return fetchScore(player); })
  );

  const elapsed = Date.now() - startTime;
  console.log("All fetched in ~" + elapsed + "ms\n");

  results
    .sort(function(a, b) { return b.score - a.score; })
    .forEach(function(r, i) {
      console.log((i + 1) + ". " + r.player + ": " + r.score);
    });
}

getScores();

Try It Yourself

Build a simulated API client using Promises and async/await:

// Simulated database
const database = {
  users: { 1: "Alice", 2: "Bob", 3: "Charlie" },
  emails: { "Alice": "alice@test.com", "Bob": "bob@test.com", "Charlie": "charlie@test.com" }
};

function getUser(id) {
  return new Promise(function(resolve, reject) {
    setTimeout(function() {
      const name = database.users[id];
      if (name) {
        resolve(name);
      } else {
        reject(new Error("User " + id + " not found"));
      }
    }, 300);
  });
}

function getEmail(name) {
  return new Promise(function(resolve, reject) {
    setTimeout(function() {
      const email = database.emails[name];
      if (email) {
        resolve(email);
      } else {
        reject(new Error("Email not found for " + name));
      }
    }, 300);
  });
}

// Chain the lookups: get user, then get their email
async function getUserEmail(id) {
  try {
    const name = await getUser(id);
    console.log("Found user:", name);
    const email = await getEmail(name);
    console.log("Found email:", email);
    return { name, email };
  } catch (error) {
    console.log("Error:", error.message);
    return null;
  }
}

async function main() {
  const result = await getUserEmail(1);
  console.log("Result:", result);

  await getUserEmail(99); // Will fail gracefully

  // Fetch all users in parallel
  const allUsers = await Promise.all([
    getUserEmail(1),
    getUserEmail(2),
    getUserEmail(3)
  ]);
  console.log("All users:", allUsers);
}

main();

Key Takeaways

JavaScript is single-threaded but handles async operations through the event loop
Callbacks are functions passed to other functions, but nesting them creates callback hell
Promises represent eventual completion or failure and enable flat chaining with .then()
Promise.all runs multiple async operations in parallel; Promise.race resolves with the first to finish
async/await makes async code look synchronous and is the modern preferred approach
Always wrap await calls in try/catch for proper error handling

Next Steps

Asynchronous code often needs to handle things going wrong, from network failures to invalid data. The next lesson dives deep into error handling, giving you the tools to write robust code that fails gracefully.

Pro Tip: A common mistake is forgetting to use await when calling an async function. Without await, you get a Promise object instead of the resolved value. If your code is logging [object Promise], check for a missing await.