No tienes acceso a esta clase

隆Contin煤a aprendiendo! 脷nete y comienza a potenciar tu carrera

ES11: Promise.allSettled

28/35
Recursos

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

Aportes 27

Preguntas 2

Ordenar por:

驴Quieres ver m谩s aportes, preguntas y respuestas de la comunidad?

o inicia sesi贸n.

Por si alguien m谩s ten铆a la duda.

鈥渞esolve鈥 y 鈥渞eject鈥 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())

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.

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

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

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

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

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)

Fulfilled significa 鈥淐umplido鈥

Todo qued贸 m谩s claro leyendo la explicaci贸n que est谩 en la secci贸n de recursos

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贸' }
  ];
}

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

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
  });

para ver como Promise 鈥渆spera鈥 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");```

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.

----------------------- Apuntes 馃崕 -------------------------
Promise.allSettled() 馃殌

Es un m茅todo est谩tico que toma un iterable de promesas como entrada y devuelve un solo Promise. Esta promesa devuelta se cumple cuando todas las promesas de la entrada se resuelven (incluso cuando se pasa un iterable vac铆o), con una serie de objetos que describen el resultado de cada promesa.

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

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

//ejemplo

const promise1 = Promise.resolve(3);
const promise2 = new Promise((resolve, reject) => setTimeout(reject, 100, 'foo'));
const promises = [promise1, promise2];

Promise.allSettled(promises).then((results) => results.forEach((result) => console.log(result.status)));

// Expected output:
// "fulfilled"
// "rejected"

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise/allSettled

alguien mas le quedo una duda en esta clase?, pienso la explicaci贸n fue muy corta.
Otra vez tendr茅 que investigar por mi cuenta.

ES11: Promise.allSettled


En ECMAScript 2020 (ES11), se introdujo el m茅todo Promise.allSettled(), que en espa帽ol se traduce como 鈥淧romise.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 鈥樏墄ito鈥.
  • promesa2 se rechaza con el motivo 鈥楨rror鈥.
  • promesa3 se resuelve despu茅s de un retraso de 100 ms con el valor 鈥楾iempo 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. 馃懆鈥嶐煉

Promise.allSettled().- Maneja varias promesas a la vez (promesas que recibe en un array como argumento), y devuelve un array de objetos con la informaci贸n: estado y valor de cada promesa evaluada, tanto si esta fue resuelta o rechazada.

馃捇 Archivos del Proyecto 馃捇


Pasos 馃搶

  • 鈥 Dentro de la carpeta es11, crear el archivo llamado: 03-promise-allsettled.js
      • 鈼 El c贸digo queda:
//Compilar: seleccionar el c贸digo + click derecho + Run Code

//Ejercicio #1
const promise1 = new Promise((resolve, reject) => reject("reject"));
const promise2 = new Promise((resolve, reject) => resolve("resolve"));
const promise3 = new Promise((resolve, reject) => resolve("resolve 2"));

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

/*output: muestra un status por cada promise, fulfilled indica que fue completada
[
{ status: 'rejected', reason: 'reject' },
{ status: 'fulfilled', value: 'resolve' },
{ status: 'fulfilled', value: 'resolve 2' }
]
*/

Ejecutar todas las promesas :0

La respuesta es un callback, no son palabras reservadas

    const anotherFunction = () => {
    return new Promise((simon, nel ) => (true) ? simon("jalo") : nel("no jalo"))
    }

    anotherFunction()
    .then(dice => console.log(dice))

Mi resumen:

Cada que hay una nueva clase que habla de as铆ncronismo y a煤n no llevas el curso de eso.

// allSettled (Todo resuelto)
// Nos permite saber si nuestra promesa ha sido terminado(Ya sea resuelta o rechazada)

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

// [
//     { status: 'rejected', reason: 'reject' },
//     { status: 'fulfilled', value: 'resolve' },
//     { status: 'fulfilled', value: 'resolve2' }
//   ]
  

En JavaScript, la funci贸n Promise.allSettled es un m茅todo est谩tico de la clase Promise que se introdujo en ECMAScript 11 (tambi茅n conocido como ECMAScript 2021). Este m茅todo permite esperar a que todas las promesas hayan sido completadas o rechazadas antes de continuar con el c贸digo siguiente.

Promise.allSettled difiere de Promise.allen que Promise.all espera que todas las promesas se completen exitosamente antes de continuar, mientras que Promise.allSettled permite continuar incluso si algunas de las promesas se rechazan.

Aqu铆 hay un ejemplo de c贸mo se puede usar Promise.allSettled en JavaScript:

const promise1 = new Promise((resolve, reject) => {
  setTimeout(() => {
    resolve('Promise 1 resolved');
  }, 1000);
});

const promise2 = new Promise((resolve, reject) => {
  setTimeout(() => {
    reject('Promise 2 rejected');
  }, 500);
});

Promise.allSettled([promise1, promise2]).then((results) => {
  console.log(results);
  /* Output:
    [
      { status: 'fulfilled', value: 'Promise 1 resolved' },
      { status: 'rejected', reason: 'Promise 2 rejected' }
    ]
  */
});

En este ejemplo, ambas promesas son esperadas por Promise.allSettled antes de continuar con el c贸digo siguiente. Aunque promise2 es rechazada, Promise.allSettled permite continuar y devuelve un objeto con los resultados de cada promesa en forma de una matriz de objetos. Cada objeto tiene un estado (fulfilled o rejected) y un valor (value o reason).

Me encontre con un detalle muy curioso.
Ejecute tanto ...allSettled() como ...all().

Pero me percate de que al hacer console.log, sin importar el orden en que ejecute el all o allSettled los catch siempre son procesados despues de los then dentro del callstack de JavaScript.

Apunte

Aunque no es tan necesario.