CodeForge

JavaScript de Cero a Experto / Asincronía II

Promise.all y sus hermanos: esperar en paralelo

Teoría22 min20 XP

Tres consultas que no dependen entre sí, y tu código las espera en fila india: 3 segundos donde pudo haber 1. Hoy aprendes la trampa de rendimiento más común de async/await — y los cuatro combinadores (all, allSettled, race, any) que coordinan promesas en paralelo, cada uno con su política de llegada.

La trampa: awaits en fila india

Mira los tiempos: 3 segundos contra 1. Cada await en fila pone el marcapáginas ANTES de arrancar la siguiente consulta — la segunda ni existe mientras la primera espera. Promise.all primero LANZA las tres (llamarlas ya las pone a trabajar en la cocina) y luego espera la llegada conjunta; el resultado es un array EN EL MISMO ORDEN que pediste (no en orden de llegada), perfecto para el destructuring del módulo 5. La regla: si el paso B no necesita el resultado de A, no lo hagas esperar a A.

Los cuatro hermanos y sus políticas

Guía rápida para elegir: ¿necesitas TODO para continuar? all. ¿Quieres el resultado de cada una aunque fallen algunas (un dashboard con varios paneles)? allSettled — nota su forma peculiar: cada resultado es un objeto con status, y el dato viene en value (si cumplió) o reason (si falló). ¿Te sirve el primero que responda de varios espejos equivalentes? any. ¿race? Su uso estrella es correr una promesa contra un temporizador — "la consulta o 5 segundos, lo que ocurra primero" — el patrón timeout que verás pronto con fetch.

Tu dashboard de Mi Bolsillo carga 4 paneles de fuentes distintas, y quieres mostrar los que lleguen bien aunque alguno falle. Usas Promise.all y cuando UNA fuente falla se cae el dashboard entero. ¿Qué combinador es el correcto?

Mini-reto

Al dashboard de "Mi Bolsillo": 1) simula 3 fuentes con tiempos distintos (gastos 800ms, presupuesto 1200ms, racha 400ms) y cárgalas con Promise.all + destructuring, midiendo con console.time que el total es ~1.2s y no la suma; 2) haz que la racha falle y compara: all (todo se pierde) vs allSettled (imprimes gastos y presupuesto, y "sin datos" para la racha); 3) bonus race: tu consulta de gastos contra un esperar(500).then(() => { throw new Error("timeout") }) — ¿quién gana?

Qué sigue

Tienes todo el arsenal: async/await, errores, paralelismo. Falta lo que lo conecta con el mundo: fetch — la función con la que tu JavaScript le pide datos a servidores REALES. Próxima lección: tu primera petición a una API pública de verdad, en vivo desde el playground.