A practical guide to understand the difference between Promise, Promise.all, Promise.allsettled and Promise.race with examples 

Promises are an essential part of JavaScript. They allow developers to write asynchronous code that is easy to read and understand. Promises are objects that represent the eventual completion or failure of an asynchronous operation and their state can be either “pending”, “fulfilled”, or “rejected”.

In this article, we will discuss the differences between Promise, Promise.all, Promise.allSettled, and Promise.race.

Promise

A Promise is an object that represents a value that may not yet be available. It can be in one of three states: “pending”, “fulfilled”, or “rejected”. A Promise is typically used to represent an asynchronous operation that will eventually complete, and provide the result or an error.

Here is an example of a Promise that resolves after 1 second:

codeconst promise = new Promise((resolve, reject) => {
  setTimeout(() => {
    resolve('Hello, world!');
  }, 1000);
});

promise.then((value) => {
  console.log(value); // "Hello, world!"
});

In this example, we create a new Promise that resolves after 1 second with the value “Hello, world!”. We then use the then() method to handle the resolved value.

Promise.all

The Promise.all method takes an array of Promises and returns a new Promise that resolves when all of the input Promises have resolved. The resolved value of the new Promise is an array of the resolved values of the input Promises, in the same order as the input array.

Here is an example of Promise.all that resolves after all Promises are fulfilled:

codeconst promise1 = Promise.resolve(1);
const promise2 = Promise.resolve(2);
const promise3 = Promise.resolve(3);

Promise.all([promise1, promise2, promise3]).then((values) => {
  console.log(values); // [1, 2, 3]
});

In this example, we create three Promises that resolve immediately with the values 1, 2, and 3. We then pass an array of these Promises to Promise.all, which returns a new Promise that resolves with an array of the resolved values.

Promise.allSettled

The Promise.allSettled method takes an array of Promises and returns a new Promise that resolves when all of the input Promises have settled, whether they were fulfilled or rejected. The resolved value of the new Promise is an array of objects that describe the outcome of each Promise.

Here is an example of Promise.allSettled that resolves after all Promises have settled:

const promise1 = Promise.resolve(1);
const promise2 = Promise.reject(new Error('Error occurred'));
const promise3 = Promise.resolve(3);

Promise.allSettled([promise1, promise2, promise3]).then((results) => {
  console.log(results);
  /*
  [
    { status: 'fulfilled', value: 1 },
    { status: 'rejected', reason: Error('Error occurred') },
    { status: 'fulfilled', value: 3 }
  ]
  */
});

In this example, we create three Promises: one that resolves immediately with the value 1, one that rejects immediately with an Error object, and one that resolves immediately with the value 3. We then pass an array of these Promises to Promise.allSettled, which returns a new Promise that resolves with an array of objects that describe the outcome of each Promise.

Promise.race

The Promise.race method takes an array of Promises and returns a new Promise that resolves or rejects as soon as one of the input Promises resolves or rejects, whichever comes first. The resolved value of the new Promise is the

resolved value of the first Promise that resolves or the rejected reason of the first Promise that rejects.

Here is an example of Promise.race that resolves or rejects based on the first Promise that resolves or rejects:

const promise1 = new Promise((resolve) => {
  setTimeout(() => {
    resolve('First Promise');
  }, 1000);
});

const promise2 = new Promise((resolve, reject) => {
  setTimeout(() => {
    reject(new Error('Second Promise failed'));
  }, 500);
});

Promise.race([promise1, promise2]).then((value) => {
  console.log(value); // "First Promise"
}).catch((error) => {
  console.log(error); // Error: "Second Promise failed"
});

In this example, we create two Promises: one that resolves after 1 second with the value “First Promise” and one that rejects after 500 milliseconds with an Error object. We then pass an array of these Promises to Promise.race, which returns a new Promise that resolves or rejects based on the first Promise that resolves or rejects.

Conclusion

In conclusion, Promises are a powerful feature in JavaScript that allow developers to write asynchronous code that is easy to read and understand. Promise.all, Promise.allSettled, and Promise.race are methods that can be used to manipulate multiple Promises in different ways. By understanding the differences between these methods, developers can write more effective and efficient asynchronous code.