Promise.all() Method

The Promise.all() method is actually a promise that takes an array of promises(an iterable) as an input. It returns a single Promise that resolves when all of the promises passed as an iterable, which have resolved or when the iterable contains no promises. In simple way, if any of the passed-in promises reject, the Promise.all() method asynchronously rejects the value of the promise that already rejected, whether or not the other promises have resolved.

Syntax:

Promise.all(iterable)

@Params:

This method accepts a single parameter iterable which takes an array of promises or a normal array which contains some objects.

@Returns:

It follows some rules to return a single promise:

• If passed argument is empty, it returns a Promise that already resolved.
• If passed iterable contains no promises, it returns a Promise that resolved asynchronously.
• For all other cases, it returns a pending Promise.

Fulfillment and Rejection of Promise.all() Method:

Fulfillment: The returned promise is fulfilled,

• If the passed iterable is empty, then this method returns an promise synchronously which is already resolved.
• If all of the passed promises are fulfill, the returned Promises are fulfilled asynchronously.

Rejection:

If any of the passed promises are rejected, then this method rejects the value of that promise, whether or not the other promises have resolved.

Example1:

Promise.all waits for fulfillment

'use strict'
Object.defineProperty(exports, '__esModule', { value: true });

p1 = Promise.resolve(50);
p2 = 200;
p3 = new Promise(function(resolve, reject) {
  setTimeout(resolve, 100, 'good');
})

Promise.all([p1, p2, p3]).then(function(values) {
  document.write(values);
});

Output:

50, 200, good

Example2:

Here Promise.all resolves after 2000ms and the output is shows as an array.

'use strcit'
Object.defineProperty(exports, '__esModule', { value: true });

const tOut = t => {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve(`Completed in ${t}`);
    }, t)
  })
}

tOut(1000).then(result => document.write(result+"<br>"));

Promise.all([tOut(1000), tOut(2000)]).then(result => {
  document.write(result);
})

Output:

Completed in 1000
Completed in 1000, Completed in 2000

Here, Promise.all is the order of the maintained promises. The first promise in the array will get resolved to the first element of the output array, the second promise will be a second element in the output array and so on.

Example3:

Here the Promise.all waits till all the promises resolve.

'use strict'
Object.defineProperty(exports, '__esModule', { value: true });

const tOut = t => {
  return new Promise(resolve, reject) => {
    setTimeout(() => {
      resolve(`Completed in ${t}`);
    }, t);
  });
}

const durations = [1000, 2000, 3000];

const promises = [];

durations.map(duration => {
  promises.push(tOut(duration))
});

document.write(promises);

Promise.all(promises).then(response => {
  document.write(response);
});

Output:

[object Promise], [object Promise], [object Promise]
.
.
. (gap between previous and last promises)
.
.
Completed in 1000, Completed in 2000, Completed in 3000

Example4:

If one of the promises fails, then all the rest of the promises fail. Then Promise.all gets rejected.

'use strict'
Object.defineProperty(exports, '__esModule', { value: true });

const tOut = t => {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      if (t === 2000) reject(`Rejected in ${t}`);
      else resolve(`Completed in ${t}`);
    }, t)
  });
}

const durations = [1000, 2000, 3000]

const promises = [];

durations.map(duration => {
  promises.push(tOut(duration));
})

Promise.all(promises).then(response => {
  document.write(response);
}).catch(error => {
  document.write(`::Error:<br> ${error}`));
})

Output:

Error
Rejected in 2000