Day 42 of #100DaysOfCode: Review Promise for JavaScript asynchronous calls
Tags: javascript, promise, webdev, async
Published: 2020-11-02 14:03:50

## Introduction
[Promise](https://developer.mozilla.org/zh-TW/docs/Web/JavaScript/Reference/Global_Objects/Promise) is used to improve the asynchronous calls in JavaScript.This article is the note for reviewing some properties of [Promise](https://developer.mozilla.org/zh-TW/docs/Web/JavaScript/Reference/Global_Objects/Promise)

## 1. Promise object
* Promise takes two callback functions as arguments: resolve and reject

```javascript
new Promise((resolve, reject) => {
    setTimeout(() => {
      if (isResolved) {
          resolve('resolved');
      } else {
          reject('rejected');
      }
    }, 300);
  });
```

## 2. Promise object has three kind of state
The source of the following figure is [MDN](https://developer.mozilla.org/zh-TW/docs/Web/JavaScript/Reference/Global_Objects/Promise)

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/w86snqkwtu26ahdgphmr.png)

1. Pending
2. Fulfilled(resolved): the resolve function will be triggered
3. Rejected: the reject will be triggered
4. Settled: Something happened

### Example for resolving Promise objects in different states
```javascript

const myPromise = (isResolved) => {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      if (isResolved) {
          resolve('resolved');
      } else {
          reject('rejected');
      }
    }, 300);
  });
}

myPromise(true)
  .then((value) => {
    console.log(value);
  })
  .catch((value) => {
    console.log('something wrong');
  });
//resolved

myPromise(false)
  .then((value) => {
    console.log(value);
  })
  .catch((value) => {
    console.log('something wrong');
  });
//something wrong


```

## 3. Run multiple Promise objects serially 
* The example of the promise chain

```javascript

myPromise(true)
  .then((value) => {
    console.log(value);
    return myPromise(false)
  })
  .then((value) => {
    console.log(value);
  })
  .catch((value) => {
    console.log('something wrong');
  });

//resolved
//something wrong

```

## 4. Run multiple Promises at once (method 1: Promise.all)
### The properties of [Promise.all](https://developer.mozilla.org/zh-TW/docs/Web/JavaScript/Reference/Global_Objects/Promise/all):
1. Finish when all promises are resolved or one promise is rejected
2. Promise.all will be resolved when all promises are fulfilled
3. Promise.all will be rejected when one promise is resolved

```javascript

const myPromise = (isResolved) => {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      if (isResolved) {
          resolve('resolved');
      } else {
          reject('rejected');
      }
    }, 300);
  });
}

var r = Promise.all([
  myPromise(false),
  myPromise(true)
])
.then(values => { 
  console.log(values); 
  //no out put
});

```

* Check the state of the Promise.all object. It's rejected.

```
console.log(r)
```

* we can see that the state is rejected

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/d8aqkt8g9spc1ikzhlco.png)

## 5. Run multiple Promises at once (method 1: Promise.allSettled)
### The properties of [Promise.allSettled](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise/allSettled):
* The Promise.allSettled() method returns a promise that resolves after all of the given promises have either fulfilled or rejected, with an array of objects that each describes the outcome of each promise.

```javascript

const myPromise2 = (isResolved) => {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      if (isResolved) {
          resolve('resolved');
      } else {
          reject('rejected');
      }
    }, 300);
  });
}


var r = Promise.allSettled([
  myPromise2(false),
  myPromise2(true)
])
.then(values => { 
  console.log(values); 
});
//Array [Object { status: "rejected", reason: "rejected" }, Object { status: "fulfilled", value: "resolved" }]

```

* Check the state of the Promise.all object. It's fulfilled.

```
console.log(r)
```

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/9iz9ny67kvpx9n58uldc.png)

## Articles
There are some of my articles. Feel free to check if you like! 
* My blog-posts for software developing: https://medium.com/a-layman
* My web resume: https://jenhsuan.github.io/ALayman/cover.html
* Facebook page: https://www.facebook.com/imalayman
* Twitter bot: https://twitter.com/ALayman84368087