Then

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.

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
const miPromesa = new Promise((resolve) => {
setTimeout(() => resolve("Datos obtenidos"), 2000);
});
miPromesa.then((resultado) => {
console.log(resultado); // Imprime: "Datos obtenidos"
});
const miPromesa = new Promise((resolve) => { setTimeout(() => resolve("Datos obtenidos"), 2000); }); miPromesa.then((resultado) => { console.log(resultado); // Imprime: "Datos obtenidos" });
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.


Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
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));
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));
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()`.


Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
const promesaNumero = Promise.resolve(5);
promesaNumero
.then(numero => numero * 2)
.then(numeroDoble => numeroDoble + 3)
.then(resultado => console.log(resultado)); // Imprime: 13
const promesaNumero = Promise.resolve(5); promesaNumero .then(numero => numero * 2) .then(numeroDoble => numeroDoble + 3) .then(resultado => console.log(resultado)); // Imprime: 13
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.

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
obtenerDatos()
.then(procesarDatos)
.then(guardarDatos)
.then(() => console.log("Operación completada"))
.catch(error => console.error("Ocurrió un error:", error));
obtenerDatos() .then(procesarDatos) .then(guardarDatos) .then(() => console.log("Operación completada")) .catch(error => console.error("Ocurrió un error:", 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.

 

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
obtenerUsuario(id)
.then(usuario => {
return obtenerPosts(usuario.id); // Retorna una nueva promesa
})
.then(posts => {
console.log(posts);
});
obtenerUsuario(id) .then(usuario => { return obtenerPosts(usuario.id); // Retorna una nueva promesa }) .then(posts => { console.log(posts); });
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

Deja una respuesta 0

Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.