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

filter_none

edit
close

play_arrow

link
brightness_4
code

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

chevron_right


Output:

50, 200, geek

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

filter_none

edit
close

play_arrow

link
brightness_4
code

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

chevron_right


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.

filter_none

edit
close

play_arrow

link
brightness_4
code

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

chevron_right


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.

filter_none

edit
close

play_arrow

link
brightness_4
code

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

chevron_right


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

full-stack-img




My Personal Notes arrow_drop_up

3rd year student of Information Technology JADAVPUR UNIVERSITY

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.