JavaScript | 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 )

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.

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.

Below examples illustrate the JavaScript Promise.all() method:

Example 1: Promise.all waits for fulfillment

<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 resolves after 2000 ms and the output is shows as an array.

<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 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 waits till all the promises resolve.

<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: If one of the promises fails, then all the rest of the promises fail. Then Promise.all gets rejected.

<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

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

Google Chrome
Microsoft Edge
Mozilla Firefox
Apple Safari
Opera

My Personal Notes

Oct	NOV	Dec
	28
2019	2020	2021

Recommended Posts: