How to Use the Promise.all() Method in JavaScript

02/18/2022

Contents

In this article, you will learn how to use the Promise.all() method in JavaScript.

What is a Promise?

Promise is a mechanism to write asynchronous processing in JavaScript in an easy-to-understand manner.

The program has some processes that take a long time to complete or you do not know when it will complete.
The processing method that advances such processing separately from the “execution order of the main processing” and returns the result to the main processing when completed is called “asynchronous processing”.

Promise takes two functions, resolve and reject, as arguments.
If the asynchronous process succeeds, resolve is executed, and if it fails, reject is executed.

The following is an example of asynchronous processing that returns a Promise.

const myFunc = () => {
  return new Promise((resolve, reject) => {
    if () {
      resolve('Success');
    } else {
      reject('Failure');
    }
  })
};

The caller of asynchronous processing is written as follows.
Promise resolve is associated with the then() method and reject is associated with the catch() method, and each process is executed according to the success / failure of asynchronous processing.

myFunc()
.then((result) => {
  // Success
})
.catch((result) => {
  // Failure
});

How to use the Promise.all() method

The Promise.all() method executes all multiple asynchronous processes.
In the argument, specify the asynchronous process to be executed as an array.
If all asynchronous processes succeed, the then() method is executed, and if any of the asynchronous processes fails, the catch method is executed.

Promise.all([process1, process2, ...])
.then((result) => {
  // All asynchronous processe succeeded
})
.catch((result) => {
  // Any of the asynchronous processes failed
});