Promises Methods- At a glance

Table of Contents

1. Promise
2. The Promise States
3. Create a new Promise
4. Promise Handlers
5. Promise Methods
6. Summary
7. References

They say "A Promise is meant to be fulfilled". The truth is- In JavaScript, it might as well be rejected.

Note: This blog assumes you have a basic understanding of asynchronous programming.

Promise

• A Promise literally promises to get back with a value or information for something which hasn't even happened till now.
• It is simply a JavaScript object that holds a result of an asynchronous operation.

The Promise States

Pending: This is the initial state of a promise. This depicts that the task is in progress.

Fulfilled: If the task was successfully done, then the promise returns a fulfilled state.

Rejected: If the task failed, then the promise returns a rejected state.

Settled: Once the promise is resolved or rejected, we say that the promise has been settled.

Create a new Promise

• To create a Promise object, we use the Promise constructor.

const myPromise = new Promise((resolve, reject) => {
  const success = true;
  if (success) {
    resolve("Promise Fulfilled!");
  } else {
    reject("Promise Rejected!");
  }
});

Let's try to find out the state of the promise by running console.log(myPromise);.
We will get a Promise Object in a Pending state.

Promise Handlers

then()

• To get the value of a resolved promise, we use then() method.

syntax: promiseObj.then(callBackFunction)

• Eg: myPromise.then((res) => console.log(res)); This will return Promise Fulfilled! as an output. If the promise would have been reject, it would have given an error.

catch()

• To handle the error once a resolved promise is rejected, we use catch() method.

syntax: promiseObj.then(callBackFunction).catch(callBackFunction)

• Eg: myPromise.then((res) => console.log(res)).catch((e) => console.log(e)); This will return Promise Rejected! as an output.

finally()

• The code inside finally() method will run irrespective of the promise state.

syntax: promiseObj.then(callBackFunction).catch(callBackFunction).finally(callbackFunction)

• Eg: myPromise.then((res) => console.log(res)).catch((e) => console.log(e)); This will return Promise Rejected! as an output.

Promise Methods

These methods are used to handle multiple promises

Promise.all()

• Promise.all() takes an array of promises as input.
• It waits for all promises to be resolved.
• It returns an array containing all values if all of them are fulfilled.
• It returns an error of the first rejected promise.

const myPromise1 = new Promise((resolve, reject) => {
  const success = true;
  if (success) {
    resolve("Promise Fulfilled 1!");
  } else {
    reject("Promise Rejected 1!");
  }
});

const myPromise2 = new Promise((resolve, reject) => {
  const success = true;
  if (success) {
    resolve("Promise Fulfilled 2!");
  } else {
    reject("Promise Rejected 2!");
  }
});
const myPromise3 = new Promise((resolve, reject) => {
  const success = true;
  if (success) {
    resolve("Promise Fulfilled 3!");
  } else {
    reject("Promise Rejected 3!");
  }
});

Promise.all([myPromise1, myPromise2, myPromise3]).then((res) =>
  console.log(res)
// output 
// ["Promise Fulfilled 1!", "Promise Fulfilled 2!", "Promise Fulfilled 3!"]
);

Promise.any()

• Promise.any() takes an array of promises as an input.
• It returns a value of the first fulfilled promise.
• Once it finds a fulfilled promise, it returns a value. It doesn't wait for any other promise to be complete.

const myPromise1 = new Promise((resolve, reject) => {
  const success = false;
  if (success) {
    resolve("Promise Fulfilled 1!");
  } else {
    reject("Promise Rejected 1!");
  }
});

const myPromise2 = new Promise((resolve, reject) => {
  const success = true;
  if (success) {
    resolve("Promise Fulfilled 2!");
  } else {
    reject("Promise Rejected 2!");
  }
});
const myPromise3 = new Promise((resolve, reject) => {
  const success = true;
  if (success) {
    resolve("Promise Fulfilled 3!");
  } else {
    reject("Promise Rejected 3!");
  }
});

Promise.any([myPromise1, myPromise2, myPromise3]).then((res) =>
  console.log(res)
// output 
// "Promise Fulfilled 2!"
);

Promise.allSettled()

• Promise.allSettled() takes an array of promises as an input.
• It waits for all promises to be either fulfilled or rejected.
• It returns an object containing status and reason in case a promise is rejected or value in case a promise is fulfilled.

const myPromise1 = new Promise((resolve, reject) => {
  const success = false;
  if (success) {
    resolve("Promise Fulfilled 1!");
  } else {
    reject("Promise Rejected 1!");
  }
});

const myPromise2 = new Promise((resolve, reject) => {
  const success = true;
  if (success) {
    resolve("Promise Fulfilled 2!");
  } else {
    reject("Promise Rejected 2!");
  }
});
const myPromise3 = new Promise((resolve, reject) => {
  const success = true;
  if (success) {
    resolve("Promise Fulfilled 3!");
  } else {
    reject("Promise Rejected 3!");
  }
});

Promise.allSettled([myPromise1, myPromise2, myPromise3]).then((res) =>
  console.log(res));

// output 
/* 
[
{
status: "rejected"
reason: "Promise Rejected 1!"
},
{
status: "fulfilled"
value: "Promise Fulfilled 2!"
},
{
status: "fulfilled"
value: "Promise Fulfilled 3!"
}
]
*/

promise.race()

• Promise.race() takes array of promises as an input.
• It returns a value of the first fulfilled promise or error in case of the first promise is rejected.

const myPromise1 = new Promise((resolve, reject) => {
  const success = false;
  if (success) {
    resolve("Promise Fulfilled 1!");
  } else {
    reject("Promise Rejected 1!");
  }
});

const myPromise2 = new Promise((resolve, reject) => {
  const success = true;
  if (success) {
    resolve("Promise Fulfilled 2!");
  } else {
    reject("Promise Rejected 2!");
  }
});
const myPromise3 = new Promise((resolve, reject) => {
  const success = true;
  if (success) {
    resolve("Promise Fulfilled 3!");
  } else {
    reject("Promise Rejected 3!");
  }
});

Promise.race([myPromise1, myPromise2, myPromise3]).then((res) =>
  console.log(res)
// output 
// "Promise Rejected 1!"
);

Summary

• Promise is a JavaScript object that holds a result of an asynchronous operation.
• It has 3 states- pending, fulfilled, and rejected.
• .then() and .catch() are promise handlers to access promise values once it is resolved.
• .finally() is used to execute a code irrespective of the promise state.
• Promise.all() waits for all promises to be resolved or for the first rejected promise.
• Promise.any() returns a value of the first fulfilled promise.
• Promise.allSettled() waits for all promises to be either fulfilled or rejected.
• Promise.race() returns a value of the first fulfilled promise or error in case of the first promise is rejected.

References

• https://www.freecodecamp.org/news/javascript-promise-tutorial-how-to-resolve-or-reject-promises-in-js/
• https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise