JavaScript | Método Promise.all()

El método Promise.all() es en realidad un método del objeto Promise (que también es un objeto bajo JavaScript usado para manejar todas las operaciones asincrónicas), que toma una array de promesas (un iterable) como entrada. Devuelve una Promesa única que se resuelve cuando todas las promesas pasaron como un iterable, que se han resuelto o cuando el iterable no contiene promesas. De manera simple, si alguna de las promesas pasadas se rechaza, el método Promise.all() rechaza de forma asíncrona el valor de la promesa que ya rechazó, ya sea que las otras promesas se hayan resuelto o no. 
Sintaxis: 
 

Promise.all( iterable )

Parámetros: este método acepta un solo parámetro iterable que toma una array de promesas o una array normal que contiene algunos objetos.
Valores devueltos: Sigue algunas reglas para devolver una sola promesa: 
 

• Si el argumento pasado está vacío, devuelve una Promesa que ya se resolvió .
• Si iterable pasado no contiene promesas, devuelve una Promesa que se resolvió de forma asíncrona .
• Para todos los demás casos, devuelve una Promesa pendiente.

Cumplimiento y Rechazo de Promise.all() Método:  
Cumplimiento: Se cumple la promesa devuelta, 
 

• Si el iterable pasado está vacío, este método devuelve una promesa sincrónicamente que ya está resuelta.
• Si se cumplen todas las promesas pasadas, las promesas devueltas se cumplen de forma asíncrona.
• Aquí, la ejecución exitosa de este método en particular depende totalmente de todas las promesas para ejecutarse con éxito.

Rechazo: si se rechaza alguna de las promesas pasadas, este método rechaza el valor de esa promesa, ya sea que las otras promesas se hayan resuelto o no. En otras palabras, si alguna promesa no se ejecuta, el método Promise.all() devolverá un error y no tendrá en cuenta si otras promesas se cumplieron con éxito o no.
Los siguientes ejemplos ilustran el método JavaScript Promise.all():
Ejemplo 1: el método Promise.all() espera el cumplimiento 
 

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

Producción: 
 

50, 200, geek

Ejemplo 2: aquí el método Promise.all() se resuelve después de 2000ms y la salida se muestra como una 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>

Producción: 
 

Completed in 1000
Completed in 1000, Completed in 2000

Aquí, el método Promise.all() es el orden de las promesas mantenidas. La primera promesa en la array se resolverá en el primer elemento de la array de salida, la segunda promesa será un segundo elemento en la array de salida y así sucesivamente.
Ejemplo 3: Aquí el método Promise.all() espera hasta que se resuelvan todas las promesas. 
 

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

Producción : 
 

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

Ejemplo 4:  como se muestra en este ejemplo, si una de las promesas falla, todas las demás fallan y el resultado se mostrará en la consola en forma de error. Entonces el método Promise.all() es rechazado. 
 

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

Producción : 
 

Error
Rejected in 2000

Ejemplo-5: En este ejemplo, usaremos alguna función de temporizador (particularmente la función setTimeout) que tiene diferentes temporizadores y estos se escribirán dentro de diferentes promesas y, además, esas promesas se pasarán dentro del método Promise.all() para obtener el resultado.

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

Producción:

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

Navegadores compatibles: los navegadores compatibles con el método JavaScript Promise.all() se enumeran a continuación: 

• Google Chrome 32 y superior
• Borde 12 y superior
• Firefox 29 y superior
• Ópera 19 y superior
• Safari 8 y superior
• Internet Explorer no es compatible