Skip to content
Related Articles

Related Articles

Improve Article

JavaScript | Promise.all() Method

  • Last Updated : 13 Sep, 2021
Geek Week

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 
 

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 resolves after 2000 ms 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 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. 
 

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

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

  • Google Chrome 6.0 and above
  • Internet Explorer 9.0 and above
  • Mozilla 4.0 and above
  • Opera 11.1 and above
  • Safari 5.0 and above

 

Hey geek! The constant emerging technologies in the world of web development always keeps the excitement for this subject through the roof. But before you tackle the big projects, we suggest you start by learning the basics. Kickstart your web development journey by learning JS concepts with our JavaScript Course. Now at it’s lowest price ever!




My Personal Notes arrow_drop_up
Recommended Articles
Page :