JavaScript de Cero a Experto / Asincronía I
Encadenar promesas: la pirámide, aplanada
Esta es la lección donde el módulo paga: vas a tomar la pirámide de
callbacks de la lección 3 y aplanarla en una cadena que se lee de arriba a
abajo, con UN solo lugar para los errores. Para lograrlo solo falta
entender un secreto: qué devuelve exactamente .then.
El secreto: then devuelve otra promesa
Cada .then devuelve una promesa NUEVA, cuyo destino depende de lo que tu
función retorne. Dos casos:
- Retornas un valor normal → la nueva promesa se cumple de una con ese
valor: el siguiente
.thenlo recibe. - Retornas una PROMESA → la cadena ESPERA a que se resuelva, y el
siguiente
.thenrecibe su resultado.
Ojo al detalle silencioso: si NO retornas nada, el siguiente .then
recibe undefined — la cadena sigue, pero sin testimonio. El bug clásico
es olvidar el return de una promesa: la cadena no espera, y el paso
siguiente corre con datos que no existen. Regla mecánica: dentro de un
.then, todo lo que el siguiente paso necesite, se retorna.
La pirámide, aplanada
El servidor simulado de la lección 3, ahora en versión promesa (como el de tu mini-reto anterior). Compara esta forma con la pirámide — es el mismo flujo:
Cuenta los niveles de indentación: uno. El flujo mental "titular, luego
gastos, luego total" ahora ES el código, de arriba a abajo. E insertar un
paso en la mitad es agregar un .then — no re-anidar media pirámide.
Un catch para gobernarlos a todos
El .catch final atrapa el rechazo de CUALQUIER paso anterior: si
cargarTitular falla, los dos .then intermedios se saltan y el error
aterriza directo en el catch. Compáralo con la pirámide: cuatro
callbacks de error repartidos contra UN vigilante al final. Y si un paso
lanza un error inesperado (throw, o un bug tuyo), también cae ahí — la
cadena convierte explosiones en rechazos.
Nota honesta: este encadenado con .then es la base REAL de todo, y hay
que dominarlo… pero en el código moderno lo verás vestido con otra
sintaxis — async/await, que hace que estas cadenas parezcan código
síncrono. Es la primera lección del módulo 10, y sin lo de hoy sería
magia negra; con lo de hoy, será obvio.
En tu cadena: .then((titular) => { cargarGastos(titular); }).then((gastos) => gastos.length) — el segundo then recibe undefined y explota. ¿Cuál es el bug?
Mini-reto
Aplana tu propia pirámide: toma el calcularReporte que agregaste en el
mini-reto de la lección 3 y reescribe TODO el flujo como cadena de
promesas — titular → gastos → reporte — con un solo .catch y un
.finally. Luego sabotea: haz que cargarGastos rechace y verifica que
el paso del reporte NUNCA corre y el error aterriza en tu único catch.
Guarda las dos versiones lado a lado: es tu "antes y después" del módulo.
Qué sigue
Teoría del módulo completa: entiendes el event loop, sufriste los callbacks y dominas las promesas de punta a punta. El reto te espera: construir la consulta completa de "Mi Bolsillo en la nube" — simulador con promesas, cadena con transformaciones, rechazo controlado y salida impecable en consola. Todo lo del módulo, en un solo flujo.