Day 42 of #100DaysOfCode: Review Promise for JavaScript asynchronous calls

Introduction

Promise is used to improve the asynchronous calls in JavaScript.This article is the note for reviewing some properties of Promise

1. Promise object

• Promise takes two callback functions as arguments: resolve and reject

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

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

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

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:

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

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

5. Run multiple Promises at once (method 1: Promise.allSettled)

The properties of 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.

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)

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