Callback Hell, Promises: .then(), .catch(), .finally()

Asynchronous programming is essential for modern web applications, allowing tasks like fetching data or setting timers to run without freezing the user interface. However, a common pitfall when dealing with multiple nested asynchronous operations using traditional callbacks is "Callback Hell" (also known as the "Pyramid of Doom"). Promises were introduced in ES6 to provide a more structured and readable way to manage asynchronous code, elegantly solving this problem.

---

1. The Problem: Callback Hell

Callback Hell arises when you have multiple dependent asynchronous operations, where each subsequent operation relies on the result of the previous one. This leads to deeply nested callback functions, making the code difficult to read, understand, and maintain.

Characteristics:

• Deep indentation.
• Difficult error handling (errors in inner callbacks are hard to propagate).
• Poor readability and maintainability.

Example

---

2. Introduction to Promises

A Promise is an object representing the eventual completion (or failure) of an asynchronous operation, and its resulting value. Instead of immediately returning the final value, an asynchronous function returns a Promise. This Promise then allows you to attach handlers (callbacks) that will be executed when the operation either succeeds or fails.

Promise States:

A Promise can be in one of three states:

1. pending: Initial state, neither fulfilled nor rejected. The asynchronous operation is still ongoing.
2. fulfilled (resolved): The operation completed successfully. The Promise now holds a resulting value.
3. rejected: The operation failed. The Promise now holds a reason for the failure (an error).

Once a Promise is fulfilled or rejected, it becomes settled and its state cannot change again.

Creating a Promise: new Promise(executor)

You create a new Promise using the Promise constructor, which takes an executor function as an argument. The executor function itself takes two arguments:

• resolve (function): Call this function with the successful result when the asynchronous operation completes successfully.
• reject (function): Call this function with an error object or reason when the asynchronous operation fails.

const myPromise = new Promise((resolve, reject) => {
  const success = true; // Simulate async operation result
  if (success) {
    resolve('Operation successful!');
  } else {
    reject(new Error('Operation failed!'));
  }
});

---

3. Handling Promise Outcomes: .then(), .catch(), .finally()

Promises provide three main methods to attach handlers for their different states:

a) Promise.prototype.then(onFulfilled, onRejected)

• Attaches callbacks for the eventual fulfillment or rejection of the Promise.
• onFulfilled (function, optional): Called when the Promise is fulfilled. Receives the fulfillment value as an argument.
• onRejected (function, optional): Called when the Promise is rejected. Receives the rejection reason (error) as an argument.
• Returns: A new Promise, which allows for chaining.

b) Promise.prototype.catch(onRejected)

• A syntactic sugar for Promise.prototype.then(null, onRejected). It's specifically for handling errors.
• Best Practice: Always chain a .catch() at the end of your Promise chain to handle any errors that occur at any point in the chain.
• Returns: A new Promise, allowing chaining.

c) Promise.prototype.finally(onFinally)

• Attaches a callback that is executed regardless of whether the Promise was fulfilled or rejected.
• Useful for cleanup operations (e.g., hiding a loading spinner).
• The onFinally callback receives no arguments.
• Returns: A new Promise, which resolves with the same value or rejects with the same reason as the original Promise, allowing further chaining.

---

4. Promise Chaining

The ability of .then() (and .catch(), .finally()) to return a new Promise is what enables Promise Chaining. This allows you to sequence asynchronous operations, where each subsequent .then() call runs only after the previous Promise has resolved.

• If a .then() callback returns a non-Promise value, the next .then() in the chain will receive that value.
• If a .then() callback returns a Promise, the next .then() will wait for that Promise to resolve before continuing. This is crucial for sequencing dependent async operations.
• Errors can "fall through" the chain until a .catch() handler is encountered.

Example

---

Exercise: Refactor Callback Hell to Promises

Instructions: You are provided with a "callback hell" scenario that simulates loading a user, then their profile, then their friends list. Your task is to refactor this code using Promises (.then(), .catch()) to achieve a cleaner, more readable, and robust asynchronous flow.

// Provided (DO NOT MODIFY THESE FUNCTIONS):
function loadUser(id, callback) {
  console.log(`Loading user ${id}...`);
  setTimeout(() => {
    if (id === 1) {
      callback(null, { id: 1, name: 'Charlie' });
    } else {
      callback(new Error('User not found'), null);
    }
  }, 500);
}

function loadUserProfile(user, callback) {
  console.log(`Loading profile for ${user.name}...`);
  setTimeout(() => {
    if (user.id === 1) {
      callback(null, { userId: user.id, bio: 'A web enthusiast' });
    } else {
      callback(new Error('Profile not available'), null);
    }
  }, 700);
}

function loadUserFriends(profile, callback) {
  console.log(`Loading friends for user ${profile.userId}...`);
  setTimeout(() => {
    if (profile.userId === 1) {
      callback(null, ['Alice', 'Bob', 'David']);
    } else {
      callback(new Error('Friends list empty'), null);
    }
  }, 600);
}

// Callback Hell (The code you need to refactor):
console.log('--- Original Callback Hell ---');
loadUser(1, (userError, user) => {
  if (userError) {
    console.error('Error in loadUser:', userError.message);
    return;
  }
  loadUserProfile(user, (profileError, profile) => {
    if (profileError) {
      console.error('Error in loadUserProfile:', profileError.message);
      return;
    }
    loadUserFriends(profile, (friendsError, friends) => {
      if (friendsError) {
        console.error('Error in loadUserFriends:', friendsError.message);
        return;
      }
      console.log('Successfully loaded all data:', { user, profile, friends });
    });
  });
});
console.log('Original callback hell started...');

Your Task (Implement this in the CodeEditor):

1. Wrap each of the provided loadUser, loadUserProfile, and loadUserFriends functions into new functions that return Promises. Let's call them promiseLoadUser, promiseLoadUserProfile, and promiseLoadUserFriends. Each of these new functions should accept the necessary ID/object and return a Promise that resolves with the successful data or rejects with an error.
2. Use Promise chaining (.then()) to sequence the calls to promiseLoadUser, promiseLoadUserProfile, and promiseLoadUserFriends.
3. Add a single .catch() handler at the end of your Promise chain to gracefully handle any errors that might occur in any step.
4. Add a .finally() handler to log a message indicating that the overall operation is complete (regardless of success or failure).