Inicio > Cursos > JavaScript > Callbacks y Promesas
JavaScriptProgramación AsíncronaLección 13 de 24

Callbacks y Promesas

JavaScript ejecuta código de línea en línea, en un solo hilo. Pero tareas como pedir datos a un servidor o leer archivos pueden tardar segundos. Si JavaScript tuviera que esperar bloqueado, la app se congelaría. La solución es la asincronía: JavaScript inicia la tarea, sigue ejecutando otro código, y retoma la tarea cuando termina.

Los callbacks fueron la primera solución: pasas una función que se ejecutará cuando la tarea termine. Funcionaban, pero llevan al "callback hell" cuando tienes operaciones anidadas. El código se volvía una pirámide ilegible con decenas de niveles de indentación.

Las Promesas (Promises) resolvieron el callback hell en ES6. Una Promesa representa un valor que todavía no existe pero existirá en el futuro. Tiene tres estados: pendiente, resuelta (éxito) o rechazada (error). Con .then() manejas el éxito y con .catch() los errores, de forma encadenada y legible.

// Callback (forma antigua)
function obtenerDatos(callback) {
  setTimeout(() => {
    callback(null, { nombre: "Ana" });
  }, 1000);
}
obtenerDatos((error, datos) => {
  if (error) console.log("Error:", error);
  else console.log(datos);
});

// Promesa - estado: pending → fulfilled/rejected
const promesa = new Promise((resolve, reject) => {
  const exito = true;
  if (exito) {
    resolve({ nombre: "Ana", edad: 25 });
  } else {
    reject(new Error("Algo falló"));
  }
});

// Usar la promesa con .then/.catch
promesa
  .then(datos => {
    console.log("Éxito:", datos);
    return datos.nombre.toUpperCase();
  })
  .then(nombre => console.log("Nombre:", nombre))
  .catch(error => console.log("Error:", error))
  .finally(() => console.log("Siempre ejecuta"));

// Promise.all - espera TODAS
Promise.all([promesa1, promesa2, promesa3])
  .then(resultados => console.log(resultados));
Consejo⚡ Una promesa tiene 3 estados: pending (esperando), fulfilled (exitosa) y rejected (falló). Una vez establecido, el estado no cambia.
← Spread, Rest y Optional Chainingasync/await y Fetch API →

Practica esta lección

Resuelve los ejercicios del curso de JavaScript en la app, gratis y con corrección automática.

Empezar a practicar