DEV Community

Cover image for Day 42 of #100DaysOfCode: Review Promise for JavaScript asynchronous calls
Jen-Hsuan Hsieh
Jen-Hsuan Hsieh

Posted on • Updated on

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);
  });
Enter fullscreen mode Exit fullscreen mode

2. Promise object has three kind of state

The source of the following figure is MDN

Alt Text

  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


Enter fullscreen mode Exit fullscreen mode

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

Enter fullscreen mode Exit fullscreen mode

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
});

Enter fullscreen mode Exit fullscreen mode
  • Check the state of the Promise.all object. It's rejected.
console.log(r)
Enter fullscreen mode Exit fullscreen mode
  • we can see that the state is rejected

Alt Text

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" }]

Enter fullscreen mode Exit fullscreen mode
  • Check the state of the Promise.all object. It's fulfilled.
console.log(r)
Enter fullscreen mode Exit fullscreen mode

Alt Text

Articles

There are some of my articles. Feel free to check if you like!

Top comments (0)