CodeForge

JavaScript de Cero a Experto / Asincronía I

Encadenar promesas: la pirámide, aplanada

Teoría20 min20 XP

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 .then lo recibe.
  • Retornas una PROMESA → la cadena ESPERA a que se resuelva, y el siguiente .then recibe 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.