El método `then()` se usa principalmente con promesas para manejar el resultado exitoso de una operación asíncrona. Es una parte fundamental del manejo de promesas en JavaScript. Aquí te explico cuándo y cómo se usa `then()`:
1. Manejo de resolución de promesas:
El `then()` se utiliza para especificar qué hacer cuando una promesa se resuelve exitosamente.
const miPromesa = new Promise((resolve) => {
setTimeout(() => resolve("Datos obtenidos"), 2000);
});
miPromesa.then((resultado) => {
console.log(resultado); // Imprime: "Datos obtenidos"
});
2. Encadenamiento de operaciones:
Puedes encadenar múltiples `then()` para realizar operaciones secuenciales.
fetch('https://api.ejemplo.com/usuarios')
.then(respuesta => respuesta.json())
.then(datos => {
console.log(datos);
return datos.id;
})
.then(id => fetch(`https://api.ejemplo.com/usuarios/${id}/posts`))
.then(respuesta => respuesta.json())
.then(posts => console.log(posts));
3. Transformación de datos:
Cada `then()` puede transformar los datos y pasarlos al siguiente `then()`.
const promesaNumero = Promise.resolve(5); promesaNumero .then(numero => numero * 2) .then(numeroDoble => numeroDoble + 3) .then(resultado => console.log(resultado)); // Imprime: 13
4. Manejo de errores en cadena:
Puedes usar `then()` junto con `catch()` para manejar tanto el éxito como el error.
obtenerDatos()
.then(procesarDatos)
.then(guardarDatos)
.then(() => console.log("Operación completada"))
.catch(error => console.error("Ocurrió un error:", error));
5. Retorno de nuevas promesas:
Puedes retornar una nueva promesa dentro de un `then()` para continuar con operaciones asíncronas.
obtenerUsuario(id)
.then(usuario => {
return obtenerPosts(usuario.id); // Retorna una nueva promesa
})
.then(posts => {
console.log(posts);
});
Es importante notar que mientras `then()` es muy útil y ampliamente utilizado, el uso de `async/await` a menudo puede hacer que el código sea más legible, especialmente en operaciones asíncronas complejas. Sin embargo, entender `then()` es crucial para trabajar con promesas y para comprender mejor cómo funciona `async/await` bajo el capó.
¿Te ha resultado útil??
0 / 0