JavaScript Promises and Promise Chaining

---

In JavaScript, asynchronous operations like fetching data from APIs or performing background tasks are essential for building dynamic and efficient web applications. Promises provide a powerful way to handle asynchronous operations, making it easier to manage complex workflows and avoid callback hell.

What Are JavaScript Promises?

A Promise is an object representing the eventual completion (or failure) of an asynchronous operation. It is used to handle asynchronous results in a cleaner, more manageable way compared to callbacks. Promises can be in one of three states:

1. Pending: The Promise is still in progress.
2. Fulfilled: The asynchronous operation was completed successfully.
3. Rejected: The asynchronous operation failed.

Basic Syntax of a Promise

let promise = new Promise(function(resolve, reject) {
    // The asynchronous task goes here
    let success = true;

    if (success) {
        resolve("Task completed successfully!");
    } else {
        reject("Task failed.");
    }
});

promise.then(function(result) {
    console.log(result);  // If the Promise is resolved
}).catch(function(error) {
    console.log(error);  // If the Promise is rejected
});

In this example:

• A new Promise is created, which performs an asynchronous task.
• If the task is successful, the Promise is resolved with a message.
• If the task fails, the Promise is rejected with an error message.

Understanding Promise States

Pending

A Promise is in the pending state when it is neither fulfilled nor rejected. It remains in this state while the asynchronous operation is still running.

Fulfilled

The Promise transitions to the fulfilled state when the asynchronous task completes successfully, triggering the resolve() function.

Rejected

If the task fails or an error occurs, the Promise transitions to the rejected state, triggering the reject() function.

Example: A Promise in Action

let myPromise = new Promise(function(resolve, reject) {
    let isDataFetched = true;

    if (isDataFetched) {
        resolve("Data fetched successfully!");
    } else {
        reject("Error fetching data.");
    }
});

myPromise
    .then(function(result) {
        console.log(result);  // Data fetched successfully!
    })
    .catch(function(error) {
        console.log(error);  // Error fetching data.
    });

In this case, if isDataFetched is true, the Promise resolves and logs "Data fetched successfully!". If false, it rejects and logs "Error fetching data."

Promise Chaining in JavaScript

Promise chaining is a technique where multiple asynchronous operations are executed sequentially. Instead of nesting callbacks or using multiple .then() calls in isolation, you can chain them together to ensure they execute in order.

How Promise Chaining Works

Each .then() returns a new Promise, allowing you to chain additional .then() blocks for subsequent tasks. If one .then() returns a value, it is passed to the next .then() in the chain. If an error occurs in any part of the chain, it is passed to the .catch() block.

Example: Basic Promise Chaining

let task = new Promise(function(resolve, reject) {
    resolve("Task 1 completed");
});

task
    .then(function(result) {
        console.log(result);  // Task 1 completed
        return "Task 2 completed";  // Returning a new value for the next .then()
    })
    .then(function(result) {
        console.log(result);  // Task 2 completed
        return "Task 3 completed";
    })
    .then(function(result) {
        console.log(result);  // Task 3 completed
    })
    .catch(function(error) {
        console.log(error);
    });

In this example:

• Each .then() returns a value that is passed to the next .then() block in the chain.
• The chain continues until the final task is completed, and errors can be caught by the .catch() block.

Handling Errors in Promise Chaining

When working with Promise chains, errors can be caught at any point in the chain using the .catch() method. If any of the .then() blocks throws an error or a Promise is rejected, the .catch() block will handle it.

Example: Handling Errors in Chained Promises

let task = new Promise(function(resolve, reject) {
    resolve("Task 1 completed");
});

task
    .then(function(result) {
        console.log(result);  // Task 1 completed
        return Promise.reject("Task 2 failed");  // Rejecting the Promise in Task 2
    })
    .then(function(result) {
        console.log(result);  // This won't run
    })
    .catch(function(error) {
        console.log(error);  // Task 2 failed
    });

In this example:

• When Promise.reject() is called in the second .then(), the error is passed to the .catch() block.
• The subsequent .then() block will be skipped, and the error will be logged.

Returning Promises from .then() Blocks

You can also return a Promise from inside a .then() block to create more complex chains. This is especially useful when you need to execute asynchronous tasks sequentially.

Example: Returning Promises in a Chain

function fetchData(url) {
    return new Promise(function(resolve, reject) {
        setTimeout(function() {
            resolve(`Data fetched from ${url}`);
        }, 1000);
    });
}

fetchData("https://api.example.com/data1")
    .then(function(result) {
        console.log(result);  // Data fetched from https://api.example.com/data1
        return fetchData("https://api.example.com/data2");  // Returning a new Promise
    })
    .then(function(result) {
        console.log(result);  // Data fetched from https://api.example.com/data2
    })
    .catch(function(error) {
        console.log(error);
    });

Here:

• The first fetchData() call returns a Promise that resolves after a delay.
• The second fetchData() call is returned from the first .then() block, continuing the chain.
• The result from the second call is logged in the second .then().

Promise.all() and Promise Chaining

Promise.all() allows you to execute multiple asynchronous operations in parallel and wait for all of them to resolve before continuing with the next step.

Example: Using Promise.all() in Chaining

function fetchData(url) {
    return new Promise(function(resolve) {
        setTimeout(() => resolve(`Data fetched from ${url}`), 1000);
    });
}

Promise.all([
    fetchData("https://api.example.com/data1"),
    fetchData("https://api.example.com/data2")
])
    .then(function(results) {
        console.log(results[0]);  // Data fetched from https://api.example.com/data1
        console.log(results[1]);  // Data fetched from https://api.example.com/data2
    })
    .catch(function(error) {
        console.log(error);
    });

In this example:

• Both fetchData() calls run in parallel.
• The Promise.all() method waits for both Promises to resolve and then logs the results.

---

---