¿En qué se diferencia el método Promise.any() del método Promise.race() en JavaScript?

En este artículo, primero intentaremos entender cómo podemos declarar o usar los métodos Promise.any() y Promise.race(), seguido de algunos hechos que eventualmente nos ayudarán a comprender cómo difieren entre sí (a través de la teoría también). como ejemplos de codificación).

Primero entendamos rápidamente en breve acerca de ambos métodos seguidos por sus sintaxis de declaración. 

Método Promise.any(): este método devuelve una promesa que cumple o rechaza tan pronto como cualquiera de las promesas, que hemos pasado dentro de la array iterable similar a un objeto, se cumple o resuelve con éxito.

Sintaxis para el método Promise.any(): Siguiendo la sintaxis, podemos usar para declarar este método.

Promise.any([promise_1 , promise_2 , ... ]). then(
    // do something...
)

Método Promise.race(): este método devuelve una promesa que cumple o rechaza tan pronto como cualquiera de las promesas, que hemos pasado dentro de la array iterable similar a un objeto, se cumple o resuelve con éxito al principio o antes, con el valor o la razón de esa promesa.

Sintaxis para el método Promise.race(): Siguiendo la sintaxis, podemos usar para declarar este método.

Promise.race([promise_1 , promise_2 , ... ]). then(
    // do something...
)

Ahora que hemos entendido tanto los métodos en resumen como también con sus sintaxis de declaraciones, ahora pasemos a otra sección a continuación en la que veremos en qué se diferencian realmente entre sí y esto lo entenderemos con la ayuda de algunos teórico, así como algunos ejemplos de codificación también.

¿Cómo se diferencian entre sí?

Los siguientes puntos nos ayudarán a comprender en qué se diferencian realmente entre sí:

1. Si alguna de las promesas pasadas (como entrada) está en estado rechazado:

• El método Promise.any() aceptará esa promesa rechazada y buscará otras promesas pasadas y, si encuentra alguna promesa resuelta, devolverá sus datos como salida.
• El método Promise.race() aceptará esa promesa rechazada y no verificará más si hay otras promesas pasadas y, finalmente, devolverá un mensaje de error que se pasa dentro de la promesa rechazada como datos.

2. Si todas las promesas pasadas (como en las entradas) están en estado rechazado:

• El método Promise.any() aceptará todas las promesas en estado rechazado y devolverá un error peculiar (diferente) que se conoce como error agregado  , lo que implica que todas las promesas que se pasan están en estado rechazado.
• El método Promise.race() aceptará todas las promesas de estado rechazadas y sin verificar más otras promesas de estado rechazadas después de verificar la primera promesa de estado rechazada, devolverá un error que contiene los datos que se pasan dentro del método de rechazo() del primera promesa estatal rechazada.

Ahora que hemos entendido algunas explicaciones teóricas relacionadas con el hecho de que en realidad difieren entre sí, es hora de visualizar los hechos ilustrados anteriormente a través de algunos ejemplos ilustrados a continuación:

Ejemplo 1: en este ejemplo, pasará varias promesas de estado resuelto como un parámetro de entrada (como elementos de una array) dentro de ambos métodos y visualizará su salida.

<script>
    let first_resolved_promise = new Promise((resolve, reject) => {
        setTimeout(() => {
            resolve("Resolved after 1 second");
        }, 1000);
    });
  
    let second_resolved_promise = new Promise((resolve, reject) => {
        setTimeout(() => {
            resolve("Resolved after 2 seconds");
        }, 2000);
    });
  
    let third_resolved_promise = new Promise((resolve, reject) => {
        setTimeout(() => {
            resolve("Resolved after 3 seconds");
        }, 3000);
    });
  
    try {
        let result_1 = Promise.any([
            first_resolved_promise,
            second_resolved_promise,
            third_resolved_promise,
        ]);
  
        result_1.then((data) => console.log("Any's data: " + data));
  
        let result_2 = Promise.race([
            first_resolved_promise,
            second_resolved_promise,
            third_resolved_promise,
        ]);
  
        result_2.then((data) => console.log("Race's data: " + data));
    } catch (error) {
        console.log(error);
    }
</script>

Salida: la salida para ambos métodos sigue siendo la misma, ya que para todas las promesas resueltas, ambos métodos actuarían de la misma manera, ya que para cada uno de ellos, la promesa que se resuelva primero se ejecutará al principio y el resto permanecerá sin ejecutar.

Any's data: Resolved after 1 second
Race's data: Resolved after 1 second

Ejemplo 2: En este ejemplo, pasaremos una promesa de estado rechazada dentro de ambos como parámetro de entrada y visualizaremos su salida.

<script>
    let rejected_promise = new Promise((resolve, reject) => {
        reject("Rejected Promise.....");
    });
  
    let first_resolved_promise = new Promise((resolve, reject) => {
        setTimeout(() => {
            resolve("Resolved after 1 second");
        }, 1000);
    });
  
    let second_resolved_promise = new Promise((resolve, reject) => {
        setTimeout(() => {
            resolve("Resolved after 2 seconds");
        }, 2000);
    });
  
    try {
        let result_1 = Promise.any([
            rejected_promise,
            first_resolved_promise,
            second_resolved_promise,
        ]);
  
        result_1.then((data) => console.log("Any's data: " + data));
  
        let result_2 = Promise.race([
            rejected_promise,
            first_resolved_promise,
            second_resolved_promise,
        ]);
  
        result_2.then((data) => console.log("Race's data: " + data));
    } catch (error) {
        console.log(error);
    }
</script>

Salida: los datos de Race serán rechazados ya que no podrá aceptar la promesa rechazada y eventualmente también ignorará otros datos de promesa resueltos con éxito. Por otro lado, los datos de Any se ejecutarán con éxito.

Uncaught (in promise) Rejected Promise.....
Any's data: Resolved after 1 second

Ejemplo 3: En este ejemplo, pasaremos todas las promesas de estado rechazadas dentro de ambos métodos y visualizaremos sus respectivos resultados.

<script>
    let first_rejected_promise = new Promise((resolve, reject) => {
        reject("First Rejected Promise.....");
    });
  
    let second_rejected_promise = new Promise((resolve, reject) => {
        reject("Second Rejected Promise...");
    });
  
    let third_rejected_promise = new Promise((resolve, reject) => {
        reject("Third Rejected Promise....");
    });
  
    try {
        let result_1 = Promise.any([
            first_rejected_promise,
            second_rejected_promise,
            third_rejected_promise,
        ]);
  
        result_1.then((data) => console.log("Any's data: " + data));
  
        let result_2 = Promise.race([
            first_rejected_promise,
            second_rejected_promise,
            third_rejected_promise,
        ]);
  
        result_2.then((data) => console.log("Race's data: " + data));
    } catch (error) {
        console.log(error);
    }
</script>

Salida: Ambas promesas devolverán un mensaje de error, pero ese mensaje de error sería diferente para ambas. En la salida, el primer mensaje de error es del método Promise.any() y el segundo mensaje de error es del método Promise.race().

Uncaught (in promise) AggregateError: All promises were rejected
Uncaught (in promise) First Rejected Promise.....