Promesas en ECMAScript 11: Uso de Promise.allSettled

Clase 28 de 35 • Curso de ECMAScript: Historia y Versiones de JavaScript

Resumen

En alguna situación necesitarás manejar varias promesas y obtener sus resultados. ¿Cómo? Utilizando los métodos Promise.all y Promise.allSettled.

Promise.all

El método Promise.all sirve para manejar varias promesas al mismo tiempo. Recibe como argumento un array de promesas.

Promise.all([promesa1, promesa2, promesa3])
    .then(respuesta => console.log(respuesta))
    .catch(error => console.log(error))

El problema es que Promise.all() se resolverá, si y solo si todas las promesas fueron resueltas. Si al menos una promesa es rechazada, Promise.all será rechazada.

Promise.allSettled

Promise.allSettled() permite manejar varias promesas, que devolverá un array de objetos con el estado y el valor de cada promesa, haya sido resuelta o rechazada.

const promesa1 = Promise.reject("Ups promesa 1 falló")
const promesa2 = Promise.resolve("Promesa 2")
const promesa3 = Promise.reject("Ups promesa 3 falló")

Promise.allSettled([promesa1, promesa2, promesa3])
    .then(respuesta => console.log(respuesta))

/* [
  {
    status: 'rejected',
    reason: 'Ups promesa 1 falló'
  },
  { status: 'fulfilled', value: 'Promesa 2' },
  {
    status: 'rejected',
    reason: 'Ups promesa 3 falló'
  }
] */

¿Debería usar Promise.allSettled en lugar de Promise.all? No, porque ambas son muy útiles dependiendo cómo quieras manejar tus promesas.

Contribución creada por Andrés Guano (Platzi Contributor).

Marco Alan García

student•

Por si alguien más tenía la duda.

"resolve" y "reject" no son palabras reservadas (pero sí comúnmente usadas en la sintaxis de una promesa. Se puede usar cualquier nombre como:

new Promise((simon, nel ) => (true) ? simon() : nel())

Josue Cerron Tuesta

student•

Gracias por el aporte!

Jonathan Barzola

student•

Muy util!

Jhon Eduard Bocanegra Ortiz

student•

Tambien existe

Promise.all()

El método Promise.all(iterable) devuelve una promesa que termina correctamente cuando todas las promesas en el argumento iterable han sido concluídas con éxito, o bien rechaza la petición con el motivo pasado por la primera promesa que es rechazada. MDN (https://developer.mozilla.org/es/docs/Web/JavaScript/Reference/Global_Objects/Promise/all)

La diferencia con

Promise.allSettled()

Ejecuta todas las promesas sin importar si son rechazadas o no.

Josue Cerron Tuesta

student•

Gracias por el aporte!

John F Chacpi Marchena

student•

excelente aporte!!!

Yuli Alexandra Pulido Castañeda

student•

Hola Chic@s

**ES11: **

Promise.allSettled

const promise1 = new Promise((resolve, reject) => reject("reject"));
const promise2 = new Promise((resolve, reject) => resolve("resolve"));
const promise3 = new Promise((resolve, reject) => resolve("resolve2"));

Promise.allSettled([promise1, promise2, promise3])
.then(response => console.log(response));

Miguel Angel Hernandez Colombo

student•

El método Promise.allSettled() devuelve una promesa que se cumple después de que todas las promesas dadas se hayan cumplido o rechazado, con una matriz de objetos que describen el resultado de cada promesa.

Por lo general, se usa cuando tiene varias tareas asincrónicas que no dependen unas de otras para completarse correctamente, o si siempre desea saber el resultado de cada promesa.

En comparación, la Promesa devuelta por Promise.all() puede ser más apropiada si las tareas dependen unas de otras/si desea rechazar inmediatamente cualquiera de ellas

Teo Zavala

student•

Gran aporte, me ayudo mucho a comprender. Gracias

Fabio Escobar

student•

Es dificil entender estos conceptos sin un contexto, lastimosamente hay que complementar estas clases con videos de youtube donde si explican los conceptos dando ejemplos practicos

jose maria garcia

student•

Si no les quedo claro, aqui les dejo un video que lo explica. Duración aproximada 1min https://youtube.com/shorts/0BeOn_WSaN0?feature=share

Pablo Nistal

student•

Muy suculento

Arnoll Bermudez

student•

si desean ver la información de una manera distinta a la del profe podemos utilizar console.table, la cual nos dará la información mas organizada, mostrándonos igual el resultado de la promesa, la razón, y el valor de las que fueron resueltas, espero les sirva, (no es mucho pero es trabajo honesto XD)

Diego Eduardo Téllez Contreras

student•

Fulfilled significa "Cumplido"

Diego Perez Perez

student•

gracias por aclarar:)

Juan Esteban Gallego Perez

student•

Todo quedó más claro leyendo la explicación que está en la sección de recursos

Hector Maluy Fernandez

student•

Mi código para este curso.

/*El método Promise.all sirve para manejar varias promesas al mismo tiempo. Recibe como argumento un
 array de promesas. Promise.all() se resolverá, si y solo si todas las promesas fueron resueltas. 
 Si al menos una promesa es rechazada, Promise.all será rechazada. */
{
  const promise1 = new Promise((resolve, reject) => reject("Rechazada"));
  const promise2 = new Promise((resolve, reject) => resolve("Resuelta 2"));
  const promise3 = new Promise((resolve, reject) => resolve("Resuelta 3"));

  Promise.all([promise1, promise2, promise3])
    .then(respuesta => console.log(respuesta))
    .catch(error => console.log(error));
  
  // Sí todas las promesas se cumplen, se ejecuta el metodo then() y el parametro respuesta es un array:
  ['resuelta 1', 'Resuelta 2', 'Resuelta 3'];

  //Sí al menos una es rechazada, se ejecuta el metodo catch y el parametro error es un string
  "Rechazada";
}

/*Promise.allSettled() permite manejar varias promesas, que devolverá un array de objetos con el
estado y el valor de cada promesa, haya sido resuelta o rechazada. */

{
  const promesa1 = Promise.reject("Ups promesa 1 falló");
  const promesa2 = Promise.resolve("Promesa 2 sí cumplió");
  const promesa3 = Promise.reject("Ups promesa 3 falló");

  Promise.allSettled([promesa1, promesa2, promesa3])
    .then(respuesta => console.log(respuesta));
  
  //El resultado, se ejecuta el metodo then() y el parametro respuesta sería este array:
  [
    { status: 'rejected', reason: 'Ups promesa 1 falló' },
    { status: 'fulfilled', value: 'Promesa 2 sí cumplió' },
    { status: 'rejected', reason: 'Ups promesa 3 falló' }
  ];
}

Alfonso Neil Jiménez

student•

Link a la documentación oficial sobre Promise.allSettled()

Carlos Andrade

student•

28/35 ES11: Promise.allSettled Cuando necesitas manejar varias promesas al mismo tiempo y obtener sus resultados, puede utilizar los métodos Promise.all y Promise.allSettled

Promise.all toma un array de promesas como argumento y se resolverá solo si todas las promesas en el array son resueltas. Si al menos una primesa es rechazada, Promise.all se rechazará. Por ejemplo:

Promise.all([
  fetch('https://api.example.com/data1'),
  fetch('https://api.example.com/data2'),
  fetch('https://api.example.com/data3')
]).then(respuesta => {
  console.log(respuesta[0]); // respuesta de la primera promesa
  console.log(respuesta[1]); // respuesta de la segunda promesa
  console.log(respuesta[2]); // respuesta de la tercera promesa
}).catch(error => {
  console.log(error); // si al menos una promesa fue rechazada
});

Por otro lado, Promise.allSettled toma un array de promesas como argumento y devolverá un array de objetos que contiene el estado y el valor de cada promesa, independientemente de si fue resuelta o rechazada. Por ejemplo:

const promesa1 = Promise.reject("Ups promesa 1 falló");
const promesa2 = Promise.resolve("Promesa 2");
const promesa3 = Promise.reject("Ups promesa 3 falló");

Promise.allSettled([promesa1, promesa2, promesa3])
  .then(respuesta => {
    console.log(respuesta[0]); // estado y razón de la promesa 1
    console.log(respuesta[1]); // estado y valor de la promesa 2
    console.log(respuesta[2]); // estado y razón de la promesa 3
  });

Ernesto Edgar Zarate Gutierrez

student•

En algún curso se entra a detalle con las promesas en javascript? me parece que no se han explicado apropiadamente

Luis Alfredo Suarez

student•

ES11: Promise.allSettled

En ECMAScript 2020 (ES11), se introdujo el método Promise.allSettled(), que en español se traduce como "Promise.allSettled()". Esta adición es una extensión de la funcionalidad de las promesas en JavaScript y proporciona una forma de trabajar con múltiples promesas de manera más robusta, permitiendo que todas las promesas se resuelvan o rechacen sin interrumpir el flujo de ejecución.
Antes de Promise.allSettled(), la función Promise.all() se usaba para manejar un arreglo de promesas y esperar a que todas se resolvieran o al menos una se rechazara. Sin embargo, si una de las promesas se rechazaba, el método Promise.all() terminaba inmediatamente y no proporcionaba información sobre las promesas individuales.
Con Promise.allSettled(), puedes esperar a que todas las promesas se resuelvan o se rechacen, y obtendrás una matriz de resultados que indica el estado final de cada promesa, ya sea resuelta o rechazada, junto con el valor o motivo asociado.
Aquí tienes un ejemplo de cómo usar Promise.allSettled():

const promesa1 = Promise.resolve('Éxito');
const promesa2 = Promise.reject('Error');
const promesa3 = new Promise(resolve => setTimeout(resolve, 100, 'Tiempo agotado'));

Promise.allSettled([promesa1, promesa2, promesa3])
  .then(resultados => {
    console.log(resultados);
  });

En este ejemplo, las tres promesas tienen diferentes resultados:

promesa1 se resuelve con el valor 'Éxito'.
promesa2 se rechaza con el motivo 'Error'.
promesa3 se resuelve después de un retraso de 100 ms con el valor 'Tiempo agotado'.
La salida del código será:

[
  { status: 'fulfilled', value: 'Éxito' },
  { status: 'rejected', reason: 'Error' },
  { status: 'fulfilled', value: 'Tiempo agotado' }
]

El método Promise.allSettled() te permite obtener información detallada sobre el estado y los resultados de todas las promesas en el arreglo, lo que puede ser útil para manejar diferentes casos de resolución y rechazo en un contexto asincrónico.

Espero sea de utilidad. 👨‍💻

Deiber Orlando López Moyano

student•

Por que la sintaxis de las promesas aqui son diferente faltaron, los paranesis que define esta como una funcion anonima despues de que declaramos la constante como en el siguiente ejemplo : const promesa = () => { return new Promise((resolve, reject) => {

Alguien me podria explicar porque no colocamos esos primeros parantesis () despues de la declaracion de la constante?

Creative Artisan

student•

Aquí dejo un ejemplo para entender mejor la diferencia entre all() y allSettled()

const promise1 = new Promise(
  (resolve, reject) => reject("Menos pobreza")
);
const promise2 = new Promise(
  (resolve, reject) => resolve("Mas impuestos")
);
const promise3 = new Promise(
  (resolve, reject) => resolve("Inmunidad parlamentaria")
);


Promise.all([promise1, promise2, promise3])
  .then(response => console.log('Se cumplío:', response))
  .catch(err => console.log('No se cumplió:', err))


Promise.allSettled([promise1, promise2, promise3])
  .then(response => {
    const mapp = response.map(
      ({ status, reason, value }) => ([reason ?? value, status])
    );
    console.table(Object.fromEntries(mapp))
  })

Sergio Brandon De Lucio Chavero

student•

hace 1 año necesitaba esta feature, definitivamente la tendre en cuenta :3

Miguel Angel Zuluaga Palacios

student•

I have had some problems trying to understand this course, but also the same course have showed me that if you really are resolved to learn anything, there is nothing able to stop you!!

This course won't be able to make you proficient in JS, that depends only on YOU.

Always search for the path, not for a destination!!

Edu Socias

student•

para ver como Promise "espera" el resultado de las promises mientras prosigue el flujo



const promise = new Promise((resolve, reject) => {
    (true)
    ?setTimeout(() => resolve("desde alguna API..."), 5000)
    :reject(new Error("Error!")); 
});
const promise1 = new Promise((resolve, reject ) => reject("Reject1"));
const promise2 = new Promise((resolve, reject ) => resolve("OK1"));
const promise3 = new Promise((resolve, reject ) => reject("Reject2"));

console.log("Before");
Promise.allSettled([promise, promise1, promise2, promise3])
    .then(response=>console.log(response));

console.log(promise);
console.log(promise1);
console.log(promise2);
console.log(promise3);
console.log("After");```

Andrés Soret Chacin

student•

El método promise.allSettled() devuelve una promesa que es resuelta después de que todas las promesas dadas hayan sido concluidas, sin importar si fueron resueltas o rechazadas. El resultado va a ser una serie de objetos describiendo el resultado de cada promesa.

const p1 = new Promise((resolve, reject) => resolve("✅"));
const p2 = new Promise((resolve, reject) => reject("❌"));
const p3 = new Promise((resolve, reject) => resolve("✅"));

Promise.allSettled([p1, p2, p3])
	.then(response => console.log(response))
	.catch(error => console.log(error));

/*

0: {status: "fulfilled", value: "✅"}
1: {status: "rejected", reason: "❌"}
2: {status: "fulfilled", value: "✅"}

*/

Para cada resultado hay un status (estado). Si el estado es fulfilled, es porque la promesa se resolvió correctamente y tenemos value. Si el estado es rejected, es porque la promesa se rechazó y tenemos reason.