Explique Promise.race() con async-await en JavaScript

En este artículo, intentaremos comprender cómo podemos implementar el método Promise.race() con async-await en JavaScript con la ayuda de ciertos ejemplos de codificación y explicaciones teóricas. Primero entendamos rápidamente cómo podemos implementar el método Promise.race(). Este método es uno de los métodos de promesa más utilizados que establece que cualquier promesa que llegue a su punto de ejecución, primero se ejecutará primero y el resto permanecerá como está. Esto también se puede realizar en términos reales, ya que siempre que llegue primero ganará la carrera, aquí también el concepto sigue siendo el mismo.

Sintaxis:

La siguiente sintaxis nos ayudará a comprender cómo podemos implementar el método Promise.race():

Promise.race([first_promise , second_promise, ...]).then(
    // do something......
)

Veamos el siguiente ejemplo para comprender mejor la sintaxis del método Promise.race() ilustrado anteriormente:

Ejemplo 1: En este ejemplo, crearemos tres promesas una tras otra con una función de temporizador (método setTimeout()) dentro de cada una de ellas. Cada función de temporizador tendría tiempos diferentes que se mencionarán al final de su ilustración. Luego usaremos el método Promise.race() que tomará las tres promesas como entrada en forma de array y las ejecutará según su propio rol.

let first_promise = new Promise((resolve, reject) => {
    setTimeout(() => {
        resolve("GeeksforGeeks...!!");
    }, 1000);
});
  
let second_promise = new Promise((resolve, reject) => {
    setTimeout(() => {
        resolve("JavaScript......!!");
    }, 2000);
});
  
let third_promise = new Promise((resolve, reject) => {
    setTimeout(() => {
        resolve("TypeScript...!!");
    }, 3000);
});
  
let promise_array = [first_promise, second_promise, third_promise];
Promise.race(promise_array).then((result) => console.log(result));

Producción:

GeeksforGeeks...!!

Ahora que hemos entendido cómo podemos ejecutar el método Promise.race(), veamos el siguiente ejemplo que nos ayudará a comprender cómo podemos implementar el método Promise.race() con palabras clave async-await.

Ejemplo 2: como en el ejemplo anterior, aquí crearemos tres promesas, cada una con diferentes funciones de temporizador con diferentes tiempos de espera. Luego, crearemos una función (o un método) que tenga el prefijo asincrónico y, dentro de ella, almacenaremos el resultado usando otra palabra clave llamada await y luego mostraremos el resultado con la ayuda del método then().

let first_promise = new Promise((resolve, reject) => {
    setTimeout(() => {
        resolve("GeeksforGeeks...!!");
    }, 1000);
});
  
let second_promise = new Promise((resolve, reject) => {
    setTimeout(() => {
        resolve("JavaScript......!!");
    }, 2000);
});
  
let third_promise = new Promise((resolve, reject) => {
    setTimeout(() => {
        resolve("TypeScript...!!");
    }, 3000);
});
  
  
async function displayResult() {
    let promise_array = [first_promise, second_promise, third_promise];
    let result = await promise_array;
    Promise.race(promise_array).then((result) => console.log(result));
}
  
displayResult();

Producción:

GeeksforGeeks...!!