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

What is a Promise?

In the previous lesson, we talked about callback functions being placed in a queue to be executed later. Promises are a modern, more structured, and powerful way to manage these callbacks.

A Promise is a special JavaScript object that represents the eventual completion (or failure) of an asynchronous operation and its resulting value.

Think of it like ordering a coffee.

1. You place your order (initiating the asynchronous operation).
2. You get a receipt with an order number (this is the Promise object). It's not the coffee itself, but it's a promise that you will get your coffee eventually.
3. You can go find a seat and wait, instead of blocking the counter. The main thread is free.
4. When your coffee is ready, your number is called. You use your receipt to claim your coffee (the fulfilled state).
5. If they run out of beans, they'll tell you the order is cancelled (the rejected state).

A Promise can be in one of three states:

• pending: The initial state; the operation has not completed yet. (You're waiting for your coffee.)
• fulfilled: The operation completed successfully, and the promise now has a resulting value. (Your coffee is ready!)
• rejected: The operation failed, and the promise has a reason for the failure. (They ran out of beans.)

Once a promise is fulfilled or rejected, it is considered settled, and its state will not change again.

Consuming a Promise with .then() and .catch()

You will most often be consuming promises returned by browser APIs (like fetch for network requests) or other libraries. The primary way to interact with a settled promise is by using its .then() and .catch() methods.

Let's dive into a comprehensive explanation from the excellent javascript.info series.

As the article explained, .then() and .catch() are the essential tools for consuming promises:

• .then(onFulfilled, onRejected): You attach callback functions to run when the promise settles.
  • The first argument, onFulfilled, runs if the promise is fulfilled. It receives the result.
  • The second argument, onRejected, runs if the promise is rejected. It receives the error.
• .catch(onRejected): This is a more readable and common way to handle errors. It's equivalent to .then(null, onRejected).

This flowchart provides a great visual summary of the entire lifecycle.

Chaining Promises for Sequential Operations

A powerful feature of .then() and .catch() is that they themselves return a new promise. This allows us to chain them together to perform a sequence of asynchronous actions.

This is extremely common when working with APIs. For example, a fetch request first resolves with an HTTP Response object. To get the actual data, you need to call the .json() method on that response, which also returns a promise.

Let's watch a practical example that puts this all together.

Let's break down the pattern you saw in the video, as you will use it constantly:

fetch('https://api.example.com/data')
  // First .then() handles the HTTP Response
  .then(response => {
    // Check if the request was successful
    if (!response.ok) {
      // If not, we create our own error to be caught by the .catch() block
      throw new Error('Network response was not ok');
    }
    // response.json() is an async operation that reads the response body
    // and returns a NEW promise that resolves with the parsed JSON data.
    return response.json(); 
  })
  // Second .then() handles the result of response.json()
  .then(data => {
    // Now we have the actual data!
    console.log(data);
    // You can now use the data to update your UI.
  })
  // .catch() handles errors from ANYWHERE in the chain
  .catch(error => {
    // This could be a network failure (e.g., offline) or the error we threw above.
    console.error('There was a problem with the fetch operation:', error);
  });

This chain is much cleaner and more readable than the nested callbacks ("callback hell") that were common before promises.

function createDelayedMessage(shouldSucceed) {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      if (shouldSucceed) {
        resolve("Success: The message has arrived!");
      } else {
        reject(new Error("Failure: The message was lost."));
      }
    }, 1000);
  });
}

// Scenario 1:
createDelayedMessage(true)
  .then(message => console.log(message))
  .catch(error => console.error(error.message));

// Scenario 2:
createDelayedMessage(false)
  .then(message => console.log(message))
  .catch(error => console.error(error.message));

Conclusion

You've just learned the fundamental pattern for handling asynchronous operations in modern JavaScript. Mastering this is a huge step towards building interactive web applications that communicate with servers.

Key Takeaways:

• A Promise is an object representing the result of an asynchronous operation. It starts as pending and settles as either fulfilled or rejected.
• You use the .then() method to schedule a callback function that will run when a promise is fulfilled. This callback receives the resolved value.
• You use the .catch() method to schedule a callback function that will run when a promise is rejected. This callback receives the error.
• .then() and .catch() return new promises, allowing you to chain them together to create clean, sequential asynchronous logic.

While .then() and .catch() are incredibly powerful, they can still become a bit verbose for complex sequences. In our next lesson, we will build directly on what you've learned today and explore async/await, a more recent syntax that allows you to work with promises in a way that looks and feels synchronous, making your asynchronous code even easier to write and read.