Morioh
Login
Mélanie Faria

Mélanie Faria

11 months ago

Promises y Async/Await en JavaScript: la guía definitiva

Domine las promesas y async/await en JavaScript con esta guía completa. Aprenda todo lo que necesita saber sobre el uso de promesas y async/await en JavaScript.

Entonces empecemos.

¿Por qué usar promesas en JavaScript?

ES6 introdujo promesas como una implementación nativa. Antes de ES6, usábamos devoluciones de llamada para manejar operaciones asincrónicas.

Comprendamos qué son las devoluciones de llamada y qué problema relacionado con las devoluciones de llamada se resuelve mediante promesas.

Digamos que tenemos una lista de publicaciones y sus respectivos comentarios, así:

const posts = [
  { post_id: 1, post_title: 'First Post' },
  { post_id: 2, post_title: 'Second Post' },
  { post_id: 3, post_title: 'Third Post' },
];

const comments = [
  { post_id: 2, comment: 'Great!'},
  { post_id: 2, comment: 'Nice Post!'},
  { post_id: 3, comment: 'Awesome Post!'},
];

Ahora, escribiremos una función para obtener una publicación pasando la identificación de la publicación. Si se encuentra la publicación, recuperaremos los comentarios relacionados con esa publicación.

const getPost = (id, callback) => {
 const post = posts.find( post => post.post_id === id);
 if(post) {
   callback(null, post);
 } else {
   callback("No such post found", undefined);
 }
};

const getComments = (post_id, callback) => {
 const result = comments.filter( comment => comment.post_id === post_id);
 if(result) {
   callback(null, result);
 } else {
   callback("No comments found", undefined);
 }
}

En las funciones anteriores getPost, getCommentssi hay un error lo pasaremos como primer argumento. Pero si obtenemos el resultado, llamaremos a la función de devolución de llamada y le pasaremos el resultado como segundo argumento.

Si está familiarizado con Node.js, sabrá que este es un patrón muy común que se usa en todas las funciones de devolución de llamada de Node.js.

Ahora usemos esas funciones:

getPost(2, (error, post) => {
    if(error) {
     return console.log(error);
    }
    console.log('Post:', post);
    getComments(post.post_id, (error, comments) => {
        if(error) {
          return console.log(error);
        }
        console.log('Comments:', comments);
    });
});

Después de ejecutar el código anterior, verá el siguiente resultado:

publicaciones

Resultado de llamar a las funciones getPost y getComments

Aquí hay una demostración de CodePen .

Como puede ver, tenemos la getCommentsfunción anidada dentro de la getPostdevolución de llamada.

Ahora imagina si también quisiéramos encontrar los gustos de esos comentarios. Eso también se anidaría dentro de getCommentsla devolución de llamada, creando más anidamiento. Esto eventualmente hará que el código sea difícil de entender.

Este anidamiento de las devoluciones de llamada se conoce como infierno de devolución de llamada.

Puede ver que la condición de manejo de errores también se repite en el código, lo que crea un código duplicado; esto no es bueno.

Entonces, para solucionar este problema y permitir operaciones asincrónicas, se introdujeron promesas.

¿Qué son las promesas en JavaScript?

Las promesas son una de las partes más importantes de JavaScript, pero pueden ser confusas y difíciles de entender. Muchos desarrolladores nuevos, así como los experimentados, luchan por comprenderlos por completo.

Entonces, ¿qué es una promesa? Una promesa representa una operación asíncrona cuyo resultado llegará en el futuro.

Antes de ES6, no había forma de esperar a que algo realizara alguna operación. Por ejemplo, cuando queríamos hacer una llamada a la API, no había forma de esperar hasta que volvieran los resultados.

Para eso, solíamos usar bibliotecas externas como JQuery o Ajax que tenían su propia implementación de promesas. Pero no hubo una implementación de JavaScript de las promesas.

Pero luego se agregaron promesas en ES6 como una implementación nativa. Y ahora, usando promesas en ES6, podemos hacer una llamada API nosotros mismos y esperar hasta que termine para realizar alguna operación.

Cómo crear una promesa

Para crear una promesa, necesitamos usar la Promisefunción constructora de esta manera:

const promise = new Promise(function(resolve, reject) {
 
});

El Promiseconstructor toma una función como argumento y esa función recibe internamente resolvey rejectcomo parámetros.

Los parámetros resolvey rejectson en realidad funciones que podemos llamar dependiendo del resultado de la operación asíncrona.

A Promisepuede pasar por tres estados:

  • Pendiente
  • cumplido
  • Rechazado

Cuando creamos una promesa, está en un estado pendiente. Cuando llamamos a la resolvefunción, pasa a estado cumplido, y si rejectla llamamos pasará a estado rechazado.

Para simular la operación asíncrona o de ejecución prolongada, utilizaremos la setTimeoutfunción.

const promise = new Promise(function(resolve, reject) {
 setTimeout(function() {
  const sum = 4 + 5;
  resolve(sum);
 }, 2000);
});

Aquí, hemos creado una promesa que se resolverá en la suma de 4y 5después de que finalice un tiempo de espera de 2000 ms (2 segundos).

Para obtener el resultado de la ejecución exitosa de la promesa, debemos registrar un controlador de devolución de llamada de .thenla siguiente manera:

const promise = new Promise(function(resolve, reject) {
 setTimeout(function() {
  const sum = 4 + 5;
  resolve(sum);
 }, 2000);
});

promise.then(function(result) {
 console.log(result); // 9
});

Entonces, cada vez que llamemos resolve, la promesa devolverá el valor pasado a la resolvefunción que podemos recopilar usando el .thencontrolador.

Si la operación no tiene éxito, llamamos a la rejectfunción así:

const promise = new Promise(function(resolve, reject) {
 setTimeout(function() {
  const sum = 4 + 5 + 'a';
  if(isNaN(sum)) {
    reject('Error while calculating sum.');
  } else {
    resolve(sum);
  }
 }, 2000);
});

promise.then(function(result) {
 console.log(result);
});

Aquí, si sumno es un número, llamamos a la rejectfunción con el mensaje de error. De lo contrario, llamamos a la resolvefunción.

Si ejecuta el código anterior, verá el siguiente resultado:

promesas_fcc

Resultado de rechazar la promesa sin un controlador de captura

Como puede ver, recibimos un mensaje de error no detectado junto con el mensaje que especificamos porque llamar a la rejectfunción genera un error. Pero no hemos agregado un controlador de errores para detectar ese error.

Para detectar el error, necesitamos registrar otra devolución de llamada .catchde esta manera:

promise.then(function(result) {
 console.log(result);
}).catch(function(error) {
 console.log(error);
});

Verá el siguiente resultado:

error_catch

Resultado de rechazar la promesa con el manejador de capturas

Como puede ver, hemos agregado el .catchcontrolador, por lo que no recibimos ningún error no detectado, solo estamos registrando el error en la consola.

Esto también evita detener su aplicación abruptamente.

Por lo tanto, siempre se recomienda agregar el .catchcontrolador a cada promesa para que su aplicación no deje de ejecutarse debido al error.

Cuándo usar resolveyreject

Tomemos un ejemplo de una llamada API.

Si está realizando una llamada a la API y la llamada a la API tiene éxito, llame a la resolvefunción pasando el resultado de la API como argumento.

Y si la API no tiene éxito, llama a la rejectfunción pasando cualquier mensaje como argumento.

Entonces, para indicar que la operación es exitosa, llamamos a la resolvefunción y para indicar una operación fallida, llamamos a la rejectfunción.

¿Qué es el encadenamiento de promesas y por qué es útil?

El encadenamiento de promesas es una técnica utilizada para administrar operaciones asincrónicas de una manera más organizada y legible.

En el encadenamiento de promesas, podemos adjuntar varios .thencontroladores en los que el resultado del .thencontrolador anterior se pasa automáticamente al siguiente .thencontrolador.

El uso del encadenamiento de promesas ayuda a evitar el problema del infierno de devolución de llamada que hemos visto anteriormente.

El encadenamiento de promesas también nos permite escribir código asíncrono de una manera más lineal y secuencial, que es más fácil de leer y comprender.

Además, cuando usamos el encadenamiento de promesas, podemos adjuntar solo un .catchcontrolador al final de todos los .thencontroladores. Si alguna de las promesas intermedias falla, el último .catchcontrolador se ejecutará automáticamente.

Por lo tanto, no necesitamos agregar varios .catchcontroladores. Esto elimina la verificación de errores múltiples como lo hicimos en el ejemplo del infierno de devolución de llamada anterior.

Cómo funciona el encadenamiento de promesas

Podemos agregar múltiples .thencontroladores a una sola promesa como esta:

promise.then(function(result) {
 console.log('first .then handler');
 return result;
}).then(function(result) {
 console.log('second .then handler');
 console.log(result);
}).catch(function(error) {
 console.log(error);
});

Cuando agregamos varios .thencontroladores, el valor de retorno del .thencontrolador anterior se pasa automáticamente al siguiente .thencontrolador.

promesa_encadenamiento

Resultado del encadenamiento de promesas

Como puede ver, agregar 4 + 5resuelve una promesa y obtenemos esa suma en el primer .thencontrolador. Allí estamos imprimiendo una declaración de registro y devolviendo esa suma al siguiente .thencontrolador.

Y dentro del siguiente .thencontrolador, agregamos una declaración de registro y luego imprimimos el resultado que obtuvimos del .thencontrolador anterior.

Esta forma de agregar varios .thencontroladores se conoce como encadenamiento de promesas.

Cómo retrasar la ejecución de una promesa en JavaScript

Muchas veces no queremos que la promesa se ejecute inmediatamente. Más bien, queremos que se retrase hasta que se complete alguna operación.

Para lograr esto, podemos envolver la promesa en una función y devolver esa promesa desde esa función de esta manera:

function createPromise() {
 return new Promise(function(resolve, reject) {
  setTimeout(function() {
   const sum = 4 + 5;
   if(isNaN(sum)) {
     reject('Error while calculating sum.');
   } else {
    resolve(sum);
   }
  }, 2000);
 });
}

De esta manera, podemos usar los parámetros de la función dentro de la promesa, haciendo que la función sea verdaderamente dinámica.

function createPromise(a, b) {
 return new Promise(function(resolve, reject) {
  setTimeout(function() {
   const sum = a + b;
   if(isNaN(sum)) {
     reject('Error while calculating sum.');
   } else {
    resolve(sum);
   }
  }, 2000);
 });
}

createPromise(1,8)
 .then(function(output) {
  console.log(output); // 9
});

// OR

createPromise(10,24)
 .then(function(output) {
  console.log(output); // 34
});

función_general

Resultado de retrasar la ejecución de la promesa

Nota: Cuando creamos una promesa, será resuelta o rechazada, pero no ambas al mismo tiempo. Por lo tanto, no podemos agregar dos resolveo rejectllamadas de función en la misma promesa.

Además, solo podemos pasar un único valor a la función resolveo reject.

Si desea pasar varios valores a una resolvefunción, páselo como un objeto como este:

const promise = new Promise(function(resolve, reject) {
 setTimeout(function() {
  const sum = 4 + 5;
  resolve({
   a: 4,
   b: 5,
   sum
  });
 }, 2000);
});

promise.then(function(result) {
 console.log(result);
}).catch(function(error) {
 console.log(error);
});

resolver_objeto

Pasar el objeto a la función de resolución para devolver múltiples valores

Cómo usar funciones de flecha en JavaScript

En todos los ejemplos de código anteriores, hemos usado la sintaxis de función ES5 normal al crear promesas.

Pero es una práctica común usar la sintaxis de la función de flecha en lugar de la sintaxis de la función ES5.

Entonces, primero comprendamos qué es una función de flecha y cómo usarla.

¿Qué son las funciones de flecha?

Antes de ES6, había dos formas principales de declarar funciones.

1. Sintaxis de declaración de función:

function add(a, b) {
 return a + b;
}

2. Sintaxis de expresión de función:

const add = function(a, b) {
 return a + b;
};

La principal diferencia visible entre la función regular y la función de flecha es la sintaxis de escribir la función.

Usando la sintaxis de la función de flecha, podemos escribir la función de suma anterior de esta manera:

const add = (a, b) => {
 return a + b;
};

Es posible que no vea mucha diferencia aquí, aparte de la flecha. Pero si tenemos una sola línea de código en el cuerpo de la función, podemos simplificar la función de flecha anterior de esta manera:

const add = (a, b) => a + b;

Aquí devolvemos implícitamente el resultado de a + b, por lo que no hay necesidad de una returnpalabra clave si hay una sola declaración.

Entonces, usar las funciones de flecha hará que su código sea mucho más corto.

Usando una función de flecha, podemos escribir el código anterior como se muestra a continuación:

const promise = new Promise((resolve, reject) => {
 setTimeout(() => {
  const sum = 4 + 5 + 'a';
  if(isNaN(sum)) {
    reject('Error while calculating sum.');
  } else {
    resolve(sum);
  }
 }, 2000);
});

promise.then((result) => {
 console.log(result);
});

Puede usar la sintaxis de función ES5 o ES6 según sus preferencias y necesidades.

Cómo usar Async/Await en JavaScript

En esta sección, exploraremos todo lo que necesita saber sobre async/await.

Async/await brinda a los desarrolladores una mejor manera de usar las promesas.

Para usar async/await, debe crear una función y agregar la asyncpalabra clave antes del nombre de la función usando la sintaxis de declaración de función ES5 como esta:

async function someFunction() {
  // function body
}

o usando una sintaxis de expresión de función como esta:

const someFunction = async function () {
  // function body
};

o usando una función de flecha como esta:

const someFunction = async () => {
  // function body
};

Recuerde siempre que, cuando agrega la palabra clave asíncrona a la función, siempre devuelve una promesa.

Echa un vistazo al siguiente código:

const sayHello = async function () {
  return 'Hello';
};

sayHello();

¿Cuál crees que será el resultado del código anterior?

asíncrono_1

Resultado de la función de llamada marcada como asíncrona

La salida es una promesa cumplida con la cadena Hello.

Así que el siguiente código:

const sayHello = async function () {
  return 'Hello';
};

es lo mismo que esto:

const sayHello = function() {
 return new Promise((resolve, reject) => {
  resolve('Hello');
 });
}

que es lo mismo que esto:

const sayHello = function () {
  return Promise.resolve('Hello');
};

Promise.resolve('Hello')es solo una forma más corta de crear una promesa que se resuelve en la cadena Hello.

Entonces, para obtener la cadena real Hello, debemos agregar el .thencontrolador de esta manera:

sayHello().then(function (result) {
  console.log(result); // Hello
});

async_hola

Obtener el resultado de la función asíncrona usando el controlador .then

Ahora, ¿dónde usamos la awaitpalabra clave?

Se usa dentro de la función que se declara como async. Por lo tanto, la awaitpalabra clave solo debe usarse dentro de la asyncfunción.

Obtendrá un error si intenta usarlo en funciones no asíncronas.

Supongamos que tenemos una promesa que devuelve el producto de dos números como este:

function getProduct(a, b) {
  return new Promise(function (resolve, reject) {
    setTimeout(function () {
      resolve(a * b);
    }, 1000);
  });
}

y lo estamos usando así:

getProduct(2, 4)
  .then(function (result) {
    getProduct(result, 2)
      .then(function (finalResult) {
        console.log('final_result', finalResult);
      })
      .catch(function (error) {
        console.log(error);
      });
  })
  .catch(function (error) {
    console.log(error);
  });

En el código anterior, primero obtenemos el producto de 2y 4. Luego usamos ese resultado para multiplicarlo nuevamente 2y finalmente imprimimos el producto.

Si ejecuta el código anterior, verá el resultado final como 16, que es 2 * 4 = 8 y 8 * 2 = 16.

producto_async

Resultado de anidar .then controladores de devolución de llamada

El código anterior de   .theny .catchparece bastante complicado y difícil de entender de un vistazo.

Entonces, usando async/await podemos simplificar el código anterior a esto:

const printResult = async () => {
  try {
    const result = await getProduct(2, 4); // line 1
    const finalResult = await getProduct(result, 2); // line 2
    console.log('final_result', finalResult); // line 3
  } catch (error) {
    console.log(error);
  }
};

printResult();

Esto se ve mucho más limpio y fácil de entender.

Aquí, para usar la awaitpalabra clave, estamos declarando una función con la asyncpalabra clave. Luego, para obtener el resultado de cada promesa, agregamos la awaitpalabra clave delante de ella.

Además, tenga en cuenta que hemos agregado probar/atrapar dentro de la función. Siempre debe agregar un bloque de prueba alrededor del código que se usa awaitpara que el bloque de captura se ejecute si se rechaza la promesa.

Hay una cosa muy importante que debe recordar: el código async/await anterior funcionará exactamente igual que cuando lo usamos .then, por lo que la siguiente awaitlínea (línea 2) no se ejecutará hasta que la awaitllamada anterior (línea 1) sea exitosa.

Por lo tanto, como la getProductfunción tarda 1 segundo en ejecutarse debido a la llamada setTimeout, la línea 2 tendrá que esperar 1 segundo antes de ejecutar la getProductfunción nuevamente.

Pero hay una excepción a este comportamiento, que puede consultar en este artículo .

Además, si hay un error al ejecutar la línea 1 (debido a algún error que ocurrió en la getProductfunción), el siguiente código después de la línea 1 no se ejecutará. En su lugar, se ejecutará el bloque catch.

Ahora, si compara el código de encadenamiento de promesas y async/await, verá la diferencia.

// code using async/await

const printResult = async () => {
  try {
    const product = await getProduct(2, 4); // line 1
    const finalResult = await getProduct(product, 2); // line 2
    console.log('final_result', finalResult); // line 3
  } catch (error) {
    console.log(error);
  }
};

printResult();
// code using .then and .catch

getProduct(2, 4)
  .then(function (result) {
    getProduct(result, 2)
      .then(function (finalResult) {
        console.log('final_result', finalResult);
      })
      .catch(function (error) {
        console.log(error);
      });
  })
  .catch(function (error) {
    console.log(error);
  });

Como puede ver, el código que usa async/await es mucho más limpio y fácil de entender en comparación con el encadenamiento de promesas.

A medida que el anidamiento se vuelve más profundo, el código que usa el encadenamiento de promesas se vuelve más complicado. Así que async/await solo proporciona una forma de escribir el mismo código pero con mayor claridad.

El uso de async/await también reduce la necesidad de agregar varios .catchcontroladores para manejar los errores.

Podemos evitar el anidamiento en el encadenamiento de promesas anterior escribiendo el código anterior de esta manera:

getProduct(2, 4)
  .then(function (result) {
    return getProduct(result, 2);
  })
  .then(function (finalResult) {
    console.log('final_result', finalResult);
  })
  .catch(function (error) {
    console.log(error);
  });

Aquí, desde el primer .thencontrolador, devolvemos el resultado de getProduct(result, 2).

Todo lo que devuelva el .thencontrolador anterior pasará al siguiente .thencontrolador.

Como la getProductfunción devuelve una promesa, podemos adjuntarla .thennuevamente y evitar la necesidad de un .catchcontrolador anidado.

evitar_controladores_anidados

usando el encadenamiento de promesas

Pero aún así, la sintaxis async/await parece más limpia y más fácil de entender que la sintaxis de encadenamiento de promesas.

Métodos de promesa

En esta sección, exploraremos los diversos métodos proporcionados por la API de Promise.

Todos estos métodos son útiles cuando desea ejecutar varias tareas asincrónicas al mismo tiempo cuando esas tareas no dependen unas de otras (lo que ahorra mucho tiempo).

Porque si ejecuta cada tarea una tras otra, debe esperar a que finalice la tarea anterior antes de poder comenzar con la siguiente tarea.

Y si las tareas no están relacionadas entre sí, no tiene sentido esperar a que termine la tarea anterior para ejecutar la siguiente.

el Promise.allmetodo

Este método se utiliza para ejecutar múltiples tareas asincrónicas simultáneamente sin tener que esperar a que finalice otra tarea.

Supongamos que tenemos tres promesas y todas se resuelven con éxito:

const promise1 = new Promise((resolve, reject) => resolve('promise1 success'));
const promise2 = new Promise((resolve, reject) => resolve('promise2 success'));
const promise3 = new Promise((resolve, reject) => resolve('promise3 success'));

Ahora, usemos el Promise.allmétodo.

Promise.allnecesita una serie de promesas como argumento.

Promise.all([promise1, promise2, promise3])
  .then((result) => {
    console.log('resolved', result); // resolved ["promise1 success", "promise2 success", "promise3 success"]
  })
  .catch((error) => {
    console.log('rejected', error);
  });

promesa_todo

A medida que se resuelvan todas las promesas, resultaparecerá una matriz con los resultados de las promesas resueltas.

Ahora, ¿qué pasa si alguna de las promesas es rechazada?

const promise1 = new Promise((resolve, reject) => resolve('promise1 success'));
const promise2 = new Promise((resolve, reject) => reject('promise2 failure'));
const promise3 = new Promise((resolve, reject) => resolve('promise3 success'));

Promise.all([promise1, promise2, promise3])
  .then((result) => {
    console.log('resolved', result);
  })
  .catch((error) => {
    console.log('rejected', error); // rejected promise2 failure
  });

promesa_todas_rechazadas

En el código anterior, se rechaza la promesa2, por lo que se ejecutará el controlador catch y, en el caso de Promise.all:

  • Si se rechaza una de las promesas, contendrá errorel mensaje de error de la promesa fallida (como en nuestro caso anterior)
  • Si se rechazan varias promesas, aparecerá errorel mensaje de error de la primera promesa fallida.

Nota: aunque se rechace la promesa intermedia, no se detendrá la ejecución de todas las próximas promesas. Todos se ejecutarán, pero solo el primer valor de promesa rechazado estará disponible en el parámetro de error del bloque catch.

el Promise.racemetodo

Consideremos nuevamente las tres promesas resueltas:

const promise1 = new Promise((resolve, reject) => resolve('promise1 success'));
const promise2 = new Promise((resolve, reject) => resolve('promise2 success'));
const promise3 = new Promise((resolve, reject) => resolve('promise3 success'));

Promise.race([promise1, promise2, promise3])
  .then((result) => {
    console.log('resolved', result); // resolved promise1 success
  })
  .catch((error) => {
    console.log('rejected', error);
  });

promesa_carrera_éxito

Como puede ver aquí, tan pronto como se resuelva la primera promesa, el Promise.racemétodo devolverá el resultado de esa promesa resuelta.

Ahora, eche un vistazo al siguiente código:

const promise1 = new Promise((resolve, reject) => reject('promise1 failure'));
const promise2 = new Promise((resolve, reject) => resolve('promise2 success'));
const promise3 = new Promise((resolve, reject) => resolve('promise3 success'));

Promise.race([promise1, promise2, promise3])
  .then((result) => {
    console.log('resolved', result);
  })
  .catch((error) => {
    console.log('rejected', error); // rejected promise1 failure
  });

promesa_carrera_fallida

Como puede ver aquí, la primera promesa en sí misma se rechaza, por lo que .catchse ejecutará el controlador.

Entonces, cuando usamos el Promise.racemétodo, esperará hasta que la primera promesa se resuelva o rechace y luego:

  • Si se resuelve la primera promesa de la cadena de promesas, .thense ejecutará el controlador y el resultado será el resultado de la primera promesa resuelta.
  • Si se rechaza la primera promesa de la cadena de promesas, .catchse ejecutará el controlador y el resultado será el resultado de la primera promesa fallida.
  • Si se rechazan varias promesas, .catchse ejecutará el controlador y el resultado será el resultado de la primera promesa fallida.

el Promise.allSettledmetodo

Este método es útil cuando se quiere saber el resultado de cada tarea aunque sean rechazadas.

Porque en Promise.ally Promise.race, solo obtenemos el resultado de la primera promesa rechazada y no hay forma de obtener el resultado de otras promesas exitosas o fallidas.

Entonces usando Promise.allSettledpodemos obtener el resultado de todas las promesas, incluso si fallaron.

Echa un vistazo al siguiente código:

const promise1 = new Promise((resolve, reject) => resolve('promise1 success'));
const promise2 = new Promise((resolve, reject) => resolve('promise2 success'));
const promise3 = new Promise((resolve, reject) => resolve('promise3 success'));

Promise.allSettled([promise1, promise2, promise3]).then((result) => {
  console.log('resolved', result);
});

/* output from `.then`:
resolved [
  {
    "status": "fulfilled",
    "value": "promise1 success"
  },
  {
    "status": "fulfilled",
    "value": "promise2 success"
  },
  {
    "status": "fulfilled",
    "value": "promise3 success"
  }
]
*/

promesa_todo_establecido_éxito

Como puede ver, el Promise.allSettledmétodo espera hasta que todas las promesas se resuelvan o rechacen y resultcontendrá el resultado de cada promesa.

const promise1 = new Promise((resolve, reject) => reject('promise1 failure'));
const promise2 = new Promise((resolve, reject) => resolve('promise2 success'));
const promise3 = new Promise((resolve, reject) => resolve('promise3 success'));

Promise.allSettled([promise1, promise2, promise3]).then((result) => {
  console.log('resolved', result);
});

/* output from `.then`:
resolved [
  {
    "status": "rejected",
    "reason": "promise1 failure"
  },
  {
    "status": "fulfilled",
    "value": "promise2 success"
  },
  {
    "status": "fulfilled",
    "value": "promise3 success"
  }
]
*/

promesa_todo_resuelto_fracaso

En el caso anterior, aunque se rechace la primera promesa, obtenemos el resultado de todas las promesas dentro del .thencontrolador.

const promise1 = new Promise((resolve, reject) => reject('promise1 failure'));
const promise2 = new Promise((resolve, reject) => reject('promise2 failure'));
const promise3 = new Promise((resolve, reject) => reject('promise3 failure'));

Promise.allSettled([promise1, promise2, promise3]).then((result) => {
  console.log('resolved', result);
});

/* output from `.then`:
 resolved [
  {
    "status": "rejected",
    "reason": "promise1 failure"
  },
  {
    "status": "rejected",
    "reason": "promise2 failure"
  },
  {
    "status": "rejected",
    "reason": "promise3 failure"
  }
] 
*/

promesa_todo_liquidado_múltiple_fracaso

Aquí, aunque se rechacen todas las promesas, el .thencontrolador se ejecutará y obtendremos el resultado de cada promesa.

¡Gracias por leer!

Eso es todo por este tutorial. Espero que hayas aprendido mucho de ello.

Fuente: https://www.freecodecamp.org

#javascript

1.15 GEEK