Asynchronous JavaScript: Callbacks and Promises

JavaScript Promises

Asynchronous Operations Made Elegant

By AI Learning Assistant  ·  JavaScript  ·  Async  ·  Promises

JavaScript is single threaded, meaning it can only do one thing at a time. But what about waiting for data from a server, reading a file, or setting a timer? If JavaScript stopped everything to wait, your app would freeze. That is where asynchronous programming comes in. And the most elegant way to handle async code today is with Promises.

A Promise is an object that represents the eventual completion (or failure) of an asynchronous operation. Think of it like a restaurant receipt. You order food (start an async task), they give you a receipt (the Promise). That receipt promises that eventually you will get your food (resolve) or hear that they ran out (reject). In the meantime, you can do other things — check your phone, talk to friends — without staring at the kitchen.

We will cover Promise states (pending, fulfilled, rejected), creating Promises with resolve and reject, chaining with .then() and .catch(), Promise.all() for parallel operations, and why Promises solve the nightmare of callback hell.

A Promise is an object that acts as a proxy for a value not yet known. When you create a Promise, you give it a function that receives two parameters: resolve and reject. You call resolve(value) when the async work succeeds, and reject(error) when it fails.

A Promise exists in one of three states: Pending (initial state, neither fulfilled nor rejected), Fulfilled (operation completed successfully), or Rejected (operation failed). Once a Promise is settled (fulfilled or rejected), it cannot change state again.

Let us simulate loading course data from a server. Real APIs take time, so we use setTimeout to mimic a 2 second network delay. The Promise resolves with course data if loading succeeds, or rejects with an error message if it fails.

// Function that returns a Promise simulating an async API call
function getCourseData() {
  // Return a new Promise object
  return new Promise((resolve, reject) => {
    // Simulate network delay with setTimeout (2 seconds)
    setTimeout(() => {
      // Simulate whether the course loaded successfully
      const courseLoaded = true;
      
      // If loading succeeded, resolve with the course data
      if (courseLoaded) {
        resolve({ 
          name: "JS Mastery", 
          cohort: "01", 
          students: 100 
        });
      } 
      // If loading failed, reject with an error message
      else {
        reject("Failed to load course data");
      }
    }, 2000); // 2000 milliseconds = 2 seconds
  });
}

// Using the Promise: .then() handles success, .catch() handles errors
getCourseData()
  .then(data => {
    console.log("Course loaded:", data.name);
    console.log("Cohort:", data.cohort);
    console.log("Students:", data.students);
  })
  .catch(error => {
    console.log("Error:", error);
  });
    

One of the most powerful features of Promises is chaining. When you return a value from a .then() handler, it automatically wraps that value in a resolved Promise. If you return another Promise, it will wait for that Promise to settle before moving to the next .then(). This lets you sequence asynchronous operations without nesting.

Sometimes you need to run multiple asynchronous operations at the same time and wait for all of them to finish. Promise.all() takes an array of Promises and returns a new Promise that resolves with an array of results when all Promises resolve. If any Promise rejects, the whole thing rejects immediately.

Quick Comparison

AI-Assisted JavaScript Learning · Promises & Async · Write Clean, Non-Blocking Code