Understanding JavaScript Promises

What is a Promise?

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

Key States of a Promise

1. Pending: The initial state; neither fulfilled nor rejected.
2. Fulfilled: The operation completed successfully, and the promise has a resulting value.
3. Rejected: The operation failed, and the promise has a reason for the failure.

Creating a Promise

To create a promise, you use the Promise constructor. It takes a function (executor) that has two parameters: resolve and reject.

Example:

let myPromise = new Promise((resolve, reject) => {
    // Simulate an asynchronous operation
    let success = true; // Change this to false to see rejection
    if (success) {
        resolve("Operation was successful!");
    } else {
        reject("Operation failed.");
    }
});

Using Promises

You can handle promises using the .then() and .catch() methods.

Example of Handling Promises:

myPromise
    .then(result => {
        console.log(result); // Output: Operation was successful!
    })
    .catch(error => {
        console.log(error); // Output: Operation failed.
    });

Chaining Promises

You can chain multiple promises together. The output of one promise can be the input to another.

Example of Chaining:

let firstPromise = new Promise((resolve, reject) => {
    resolve("First promise resolved.");
});

firstPromise
    .then(result => {
        console.log(result); // Output: First promise resolved.
        return new Promise((resolve, reject) => {
            resolve("Second promise resolved.");
        });
    })
    .then(result => {
        console.log(result); // Output: Second promise resolved.
    });

Important Methods

• Promise.all(): Takes an array of promises and resolves when all promises are fulfilled or rejects if any promise is rejected.
• Promise.race(): Returns a promise that resolves or rejects as soon as one of the promises in the array resolves or rejects.

Example of Promise.all():

let promise1 = Promise.resolve(3);
let promise2 = new Promise((resolve, reject) => {
    setTimeout(resolve, 100, 'foo');
});
let promise3 = 42;

Promise.all([promise1, promise2, promise3]).then(values => {
    console.log(values); // Output: [3, 'foo', 42]
});

Conclusion

Promises are a powerful way to handle asynchronous operations in JavaScript. They help manage code execution flow in a more readable and manageable way compared to traditional callback functions. Understanding promises is essential for working with modern JavaScript, especially when dealing with APIs and asynchronous tasks.