Consumir promesas y encadenarlas es una de las habilidades más prácticas que puedes dominar en JavaScript. Pasar del temido callback hell a un flujo de código lineal y legible cambia por completo la forma en que escribes operaciones asíncronas. Aquí verás cómo funciona .then, cómo encadenar múltiples promesas y las reglas que debes respetar para que todo fluya sin errores.
¿Cómo se consume una promesa con .then?
El método .then recibe una función que se ejecuta únicamente cuando la promesa pasa al estado fulfilled [0:10]. El argumento de esa función es el valor con el que se resolvió la promesa.
Para ilustrarlo, se utiliza la Platzi Fake Store API, una API pública que devuelve usuarios con nombre, email y rol [0:25]. La función obtenerUsuarios recibe un ID y hace lo siguiente:
- Llama a
fetch con la URL de la API concatenando el ID.
- Encadena un
.then que recibe la respuesta y valida si fue exitosa.
- Si la respuesta no está ok, lanza un error con el mensaje "Error al obtener el usuario".
- Transforma la respuesta a JSON con
response.json() [0:42].
javascript
function obtenerUsuarios(id) {
return fetch(https://api.escuelajs.co/api/v1/users/${id})
.then(response => {
if (!response.ok) throw new Error('Error al obtener el usuario');
return response.json();
});
}
Después de cada .then siempre debe existir un .catch para capturar errores [1:25]. Cuando se llama al usuario con ID 1, la consola muestra que el nombre es John y su rol es customer. Al llamar un ID inexistente como 999, el .catch atrapa el error y lo imprime de forma clara [1:50].
¿Qué es el encadenamiento de promesas y por qué reemplaza al callback hell?
Aquí está la clave: .then siempre devuelve una nueva promesa [2:15]. Eso significa que puedes encadenar un .then tras otro, y cada uno recibe el resultado que retornó el anterior.
javascript
obtenerUsuarios(1)
.then(usuario => {
console.log('Usuario:', usuario.name);
return usuario;
})
.then(usuario => {
console.log('ID recibido:', usuario.id);
return usuario;
})
.then(usuario => {
console.log('Rol:', usuario.role);
return usuario;
})
.then(usuario => {
console.log('Email:', usuario.email);
})
.catch(error => console.error('Error:', error.message));
El resultado en consola muestra nombre, ID, rol y email en orden secuencial [3:10]. Cada .then recibe lo que el anterior retorna, y el flujo es vertical en lugar de diagonal, lo que mejora enormemente la legibilidad frente al callback hell [3:35].
¿Cuáles son las tres reglas del promise chaining?
- Siempre retornar algo dentro del
.then: sin el return, la cadena se rompe.
- Si no retornas, el siguiente
.then recibe undefined: esto causa errores difíciles de depurar.
- El encadenamiento es secuencial: primero se ejecuta el primer
.then, luego el segundo, y así sucesivamente [3:50].
¿Cómo se retornan promesas dentro de un .then?
Cuando una función dentro de un .then retorna otra promesa, el siguiente .then espera a que esa promesa se resuelva antes de ejecutarse [4:15]. Se puede ver con dos funciones adicionales:
obtenerPedidos: recibe un usuario y devuelve una promesa con los pedidos, incluyendo ID y producto.obtenerDetalles: recibe un pedido y devuelve una promesa con el estado del envío y el total.
javascript
obtenerUsuarios(1)
.then(usuario => obtenerPedidos(usuario))
.then(pedidos => obtenerDetalles(pedidos[0]))
.then(detalle => console.log(detalle))
.catch(error => console.error(error));
Cuando una función retorna una promesa dentro de un .then, se convierte automáticamente en parte de la cadena, y por eso puede anidarse con más .then [4:40]. El resultado imprime el detalle con ID 101, estado "enviado" y un total de 1200.
El promise chaining resuelve el problema de legibilidad, pero queda pendiente una pieza fundamental: el manejo centralizado de errores cuando alguna promesa de la cadena falla. Si lograste encadenar promesas con éxito, comparte tu solución al reto en los comentarios.
