JavaScript Promise all() Method

The Promise.all() method is actually a method of Promise object (which is also an object under JavaScript used to handle all the asynchronous operations), 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 )

Parameters: This method accepts a single parameter iterable which takes an array of promises or a normal array which contains some objects.
Return values: 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.
• Here the successful execution of this particular method totally depends on all promises to get successfully executed.

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. In other words, if any promise fails to get executed, then Promise.all() method will return an error and it will not take into the account whether other promises are successfully fulfilled or not.
Below examples illustrate the JavaScript Promise.all() method:
Example 1: Promise.all() method waits for fulfillment

javascript

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

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

Output:

50, 200, geek

Example 2: Here Promise.all() method resolves after 2000ms and the output is shows as an array. 

javascript

<script>
// Simple promise that resolves
// after a given time
const tOut = (t) => {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve(`Completed in ${t}`)
    }, t)
  })
}

// Resolving a normal promise
tOut(1000).then(result => document.write(result+"<br>"))
// Completed in 1000

// Promise.all
Promise.all([tOut(1000), tOut(2000)]).then(result => document.write(result))
</script>

Output:

Completed in 1000
Completed in 1000, Completed in 2000

Here, Promise.all() method 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.
Example 3: Here the Promise.all() method waits till all the promises resolve. 

javascript

<script>
// Simple promise that resolves after a given time
const tOut = (t) => {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve(`Completed in ${t}`)
    }, t)
  })
}

// Array contains some time duration
const durations = [1000, 2000, 3000]

const promises = []  // Empty array

durations.map((duration) => {

    // Calling the async function timeout(), so
    // at this point the async function has started
    // and enters the 'pending' state
    // pushing the pending promise to an array.
  promises.push(tOut(duration))
})

document.write(promises)

// Passing an array of pending promises to Promise.all
// Promise.all will wait till all the promises get resolves
// and then the same gets resolved.
Promise.all(promises).then(response => document.write(response))

// It prints after previous promises gets resolved
// ["Completed in 1000", "Completed in 2000", "Completed in 3000"]
</script>

Output :

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

Example 4:  As shown in this example, If one of the promises fails, then all the rest of the promises fail and result will be displayed in the console in the form of an Error. Then Promise.all() method gets rejected. 

javascript

<script>
// Promise that resolves after a given time
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]

// Array contains some time durations
const promises = [] //empty array

durations.map((duration) => {
    promises.push(tOut(duration))
    // Pushing durations in the promises array
})

// Passing an array of pending promises to Promise.all
Promise.all(promises).then(response => document.write(response))
// Promise.all cannot be resolved, as one of the
// promises passed, got rejected.

.catch(error => document.write(`::Error::<br> ${error}`))
// Promise.all throws an error.
</script>

Output :

Error
Rejected in 2000

Example-5: In this example we will use some timer function (particularly setTimeout function) having different timers in it and those will be written inside different promises and further those promises will be passed inside Promise.all() method in order to obtain the result.

Javascript

let first_promise = new Promise((resolve, reject) => {
  setTimeout(() => {
    resolve("Resolved First after 1 second");
  }, 1000);
});

let second_promise = new Promise((resolve, reject) => {
  setTimeout(() => {
    resolve("Resolved First after 2 seconds");
  }, 2000);
});

let third_promise = new Promise((resolve, reject) => {
  setTimeout(() => {
    resolve("Resolved First after 3 seconds");
  }, 3000);
});

try {
  let result = Promise.all([first_promise, second_promise, third_promise]);
  result.then((data) => console.log(data));
} catch (error) {
  console.log(error);
}

// This code is contributed by Aman Singla...

Output:

[
  'Resolved First after 1 second',
  'Resolved First after 2 seconds',
  'Resolved First after 3 seconds'
]

Supported Browsers: The browsers supported by JavaScript Promise.all() method are listed below: 

• Google Chrome 32 and above
• Edge 12 and above
• Firefox 29 and above
• Opera 19 and above
• Safari 8 and above
• Internet Explorer not supported