En muchas aplicaciones del mundo real, puede ser necesario ejecutar varias tareas asíncronas simultáneamente o determinar cuál finaliza primero. JavaScript proporciona dos métodos clave para manejar estos escenarios: Promise.all() y Promise.race().

Promise.all(): Ejecución de tareas en paralelo

Promise.all() permite ejecutar múltiples promesas en paralelo. Devuelve una única promesa que se resuelve cuando todas las promesas del arreglo se resuelven, o se rechaza tan pronto como una de las promesas se rechaza. Esto es útil cuando se requiere que todas las operaciones asíncronas finalicen correctamente antes de continuar.

La función fetchMultipleResources envía tres solicitudes simultáneamente para obtener datos de una publicación, un usuario y comentarios. Con Promise.all(), las tres solicitudes se inician juntas y la función espera hasta que todas las promesas se resuelvan. Una vez resueltas, los resultados se desestructuran en variables separadas (post, user y comments). Luego, el título de la publicación, el nombre del usuario y el número total de comentarios se muestran en el HTML. Este enfoque es eficiente cuando se necesita que todas las solicitudes finalicen antes de continuar, ya que reduce el tiempo de espera total al ejecutar las tareas de forma concurrente.

Promise.race(): Manejo de la Primera Promesa Resuelta

Promise.race() devuelve una única promesa que se resuelve o rechaza tan pronto como la primera promesa del arreglo se complete (ya sea resuelta o rechazada). Esto es útil cuando se necesita el resultado más rápido, como al establecer un tiempo de espera para una solicitud si tarda demasiado.

La función fetchWithTimeout crea una timeoutPromise que se rechaza después de 3 segundos, simulando un tiempo de espera agotado. Al mismo tiempo, una fetchPromise solicita datos de una API. Con Promise.race(), la función espera la promesa que se resuelva primero. Si la solicitud se completa dentro de los 3 segundos, se muestra el título de la publicación. De lo contrario, si la solicitud tarda demasiado, se activa el tiempo de espera y se muestra un mensaje de error ("¡La solicitud excedió el tiempo de espera!") en el HTML. Este enfoque es ideal para gestionar situaciones donde una respuesta rápida es esencial.

Casos de uso para ejecutar solicitudes en paralelo vs. secuencialmente

Cuándo usar solicitudes en paralelo (Promise.all())

Las solicitudes en paralelo son ideales cuando se obtienen datos de múltiples fuentes independientes, ya que permiten que todas las solicitudes se ejecuten simultáneamente. Por ejemplo, al cargar datos de usuario, publicaciones y comentarios para un panel, cada solicitud es independiente y no depende de las demás, por lo que pueden obtenerse en paralelo para mejorar el rendimiento. Este enfoque minimiza el tiempo total de espera, ya que las solicitudes se procesan de manera concurrente en lugar de una tras otra.

Cuándo usar solicitudes secuenciales

En algunos casos, las tareas deben completarse en un orden específico, es decir, una debe finalizar antes de que la siguiente pueda comenzar. Para estas solicitudes dependientes, se puede utilizar async/await en un bucle o encadenar llamadas .then(), evitando Promise.all().

Un ejemplo sería obtener primero los datos de usuario y luego, utilizando el ID de usuario obtenido, solicitar las publicaciones de ese usuario. En estos escenarios, cada solicitud depende de los resultados de la anterior, lo que requiere un enfoque secuencial.

Este ejemplo demuestra cómo realizar solicitudes secuenciales donde cada solicitud depende del resultado de la anterior. En fetchUserDataSequentially, la función primero obtiene los datos del usuario desde la API. Una vez que se reciben y procesan los datos del usuario, el ID del usuario se utiliza en una segunda solicitud para obtener las publicaciones del usuario. Los resultados se muestran en el HTML, mostrando el nombre del usuario y la cantidad de publicaciones. Este enfoque secuencial es necesario cuando las solicitudes son interdependientes, asegurando que cada solicitud se complete antes de iniciar la siguiente.