JavaScript de Cero a Experto / Asincronía II
Promise.all y sus hermanos: esperar en paralelo
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.