Asincronía en JavaScript: callbacks, promesas y async/await

La asincronía en JavaScript es lo que permite que una web siga respondiendo mientras espera una tarea que tarda: una petición a un servidor, un temporizador, la lectura de un archivo. En lugar de congelar la página, JavaScript sigue con lo suyo y ejecuta el resultado cuando llega. En esta guía verás las tres formas de manejarla —callbacks, promesas y async/await— con ejemplos de código y cómo capturar errores.

Este artículo forma parte de la hoja de ruta para aprender JavaScript. Si aún estás con lo básico, empieza por ahí.

Qué es la asincronía y por qué importa

JavaScript ejecuta el código de arriba abajo, una instrucción tras otra. Pero algunas tareas no terminan al instante (pedir datos a una API puede tardar segundos). Si JavaScript se quedara esperando, la página se congelaría. La asincronía resuelve esto: lanza la tarea, sigue con el resto del código y ejecuta una función cuando el resultado está listo.

Callbacks

Un callback es una función que pasas a otra para que la ejecute cuando termine. Es la forma más antigua.

function pedirDatos(callback) {
  setTimeout(() => {
    callback('Datos recibidos');
  }, 1000);
}

pedirDatos((resultado) => {
  console.log(resultado); // "Datos recibidos" tras 1 segundo
});

El problema aparece al encadenar varias tareas: los callbacks se anidan unos dentro de otros y el código se vuelve ilegible. Es el famoso «callback hell».

Promesas

Una promesa (Promise) representa un valor que llegará en el futuro. Puede resolverse (éxito) o rechazarse (error), y se encadena con .then() y .catch(), mucho más legible.

function pedirDatos() {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve('Datos recibidos');
      // si algo falla: reject('Error al pedir datos');
    }, 1000);
  });
}

pedirDatos()
  .then((resultado) => console.log(resultado))
  .catch((error) => console.error(error));

Lo potente es que puedes encadenar varios .then() sin anidar, cada uno recibiendo el resultado del anterior.

Async/await

Async/await es azúcar sintáctico sobre las promesas: te deja escribir código asíncrono como si fuera secuencial, mucho más fácil de leer. Marcas la función con async y usas await para esperar una promesa.

async function mostrarDatos() {
  const resultado = await pedirDatos();
  console.log(resultado);
}

mostrarDatos();

El await pausa la función hasta que la promesa se resuelve, sin bloquear el resto de la página. Es la forma recomendada hoy en día.

Manejo de errores

Con promesas usas .catch(). Con async/await, envuelves el await en un bloque try...catch:

async function mostrarDatos() {
  try {
    const resultado = await pedirDatos();
    console.log(resultado);
  } catch (error) {
    console.error('Algo falló:', error);
  }
}

Nunca dejes una promesa sin gestionar el error: si falla y no la capturas, tendrás un fallo silencioso difícil de depurar.

Varias tareas a la vez: Promise.all

Si necesitas lanzar varias tareas en paralelo y esperar a que todas terminen, usa Promise.all. Es más rápido que esperarlas una a una.

async function cargarTodo() {
  const [usuarios, productos] = await Promise.all([
    pedirDatos(),
    pedirDatos()
  ]);
  console.log(usuarios, productos);
}

El caso de uso más habitual de la asincronía es consumir APIs. Lo tienes explicado en la guía de Fetch API con JavaScript.

Preguntas frecuentes

¿Qué diferencia hay entre callbacks, promesas y async/await?

Son tres generaciones de lo mismo. Los callbacks son lo más antiguo y se vuelven ilegibles al anidarse. Las promesas los sustituyen con encadenamiento limpio. Async/await es la capa moderna sobre promesas, la más legible. Hoy se usa async/await.

¿Async/await bloquea la página?

No. await pausa solo la función donde está, no el navegador. El resto de la página sigue respondiendo con normalidad.

¿Cuándo uso Promise.all?

Cuando tienes varias tareas independientes que pueden ejecutarse a la vez y quieres esperar a que todas terminen. Si una depende del resultado de otra, encadénalas con await, una tras otra.

Con la asincronía dominada, el siguiente paso natural es consumir APIs con Fetch. Y para seguir el temario completo, vuelve a la hoja de ruta de JavaScript.