MENU


Promise.all(), Promise.race(), Promise.allSettled()

Promise.all( iterable ) returns a Promise with an array of the resolved values after all the promises in the iterable argument have been resolved. Promise.race(iterable) returns a Promise with the resolved value, immediately after the first promise has been resolved or rejected.

Promise.all Settled ( iterable ) returns a Promise with an array of the resolved values after all the promises in the iterable argument have been resolved or rejected.

Notice the asynchrony / parallelism.
RESETRUNFULL
<!DOCTYPE html><html><body><script>

var p1 = new Promise(resolve=>{setTimeout(resolve,400,'1');});var p2 = new Promise(resolve=>{setTimeout(resolve,500,'2');});var p3 = new Promise(resolve=>{setTimeout(resolve,600,'3');});Promise.all([p1,p2,p3]).then(  // the iterable argument can be any iterable, not just array
   a => {for (v of a) console.log(v);});console.log('START');// START, 1, 2, 3
   (after 6 seconds)

</script></body><html>

<!DOCTYPE html><html><body><script>

var p1 = new Promise(resolve=>{setTimeout(resolve,400,'1');});var p2 = new Promise(resolve=>{setTimeout(resolve,500,'2');});var p3 = new Promise(resolve=>{setTimeout(resolve,600,'3');});Promise.race([p1,p2,p3]).then(  // the iterable argument can be any iterable, not just array
   a => {for (v of a) console.log(v);});console.log('START');// START, 1
    (after 4 seconds)

</script></body><html>

<!DOCTYPE html><html><body><script>

(new Promise((resolve,reject)=>{
   console.log(1);
   resolve();})).then(
   ()=>{console.log(2);});console.log('START');// 1, START, 2

</script></body><html>

As soon as any Promise in the iterable argument rejects, Promise.all() or Promise.race() returns a rejected Promise immediately.


RESETRUNFULL
<!DOCTYPE html><html><body><script>

(new Promise((resolve,reject)=>{
   console.log(1);
   resolve();})).then(
   ()=>{console.log(2);});console.log('START');// 1, START, 2

</script></body><html>

<!DOCTYPE html><html><body><script>

var p1 = new Promise((resolve,reject)=>{
   setTimeout(reject,500,'1');});var p2 = new Promise((resolve,reject)=>{
   setTimeout(resolve,100,'2');});var p3 = new Promise((resolve,reject)=>{
   setTimeout(resolve,1000,'3');});Promise.all([p1,p2,p3]).then(
   a => {for (v of a) console.log('(all)'+v);},
   e => {console.log('rejected(all):'+e);});Promise.race([p1,p2,p3]).then(
   a => {for (v of a) console.log('(race)'+v);},
   e => {console.log('rejected(race):'+e);});Promise.allSettled([p1,p2,p3]).then(
   a => {for (v of a) console.log('(allSettled)'+JSON.stringify(v));},);console.log('START');// START, // (race)2,// rejected(all):1// (allSettled){"status":"rejected","reason":"1"}// (allSettled){"status":"fulfilled","reason":"2"}// (allSettled){"status":"fulfilled","reason":"3"}

</script></body><html>

If the iterable argument contains non-promise values, the values are simply passed on to the array for the successCallback in then(). (If the iterable argument is empty, the promise resolves immediately and synchronously.)


RESETRUNFULL
<!DOCTYPE html><html><body><script>

var p1 = Promise.resolve(300);var p2 = 100;var p3 = new Promise((resolve, reject) => {
  setTimeout(resolve, 100, 'hi');}); Promise.all([p1, p2, p3]).then(console.log);                                                             // [300, 100, "hi"] 

</script></body><html>

Do remember that when resolved, Promise.all() returns an array of values while Promise.race() returns a single value.