Promises Methods- At a glance
Tags: javascript, beginners, webdev, codenewbie
Published: 2022-05-13 20:10:31

## Table of Contents
1. [Promise](#promise)
2. [The Promise States](#the-promise-states)
3. [Create a new Promise](#create-a-new-promise)
4. [Promise Handlers](#promise-handlers)
5. [Promise Methods](#promise-methods)
6. [Summary](#summary)
7. [References](#references)


They say _"A Promise is meant to be fulfilled"_. The truth is- In JavaScript, it might as well be rejected. 
<img src="https://media.giphy.com/media/Uryv1zlSjV4ZuDTy94/giphy.gif" width: 100% height:100%/>

_Note: This blog assumes you have a basic understanding of [asynchronous programming](https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Asynchronous/Introducing)._

## 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