Promesas y async/await en JavaScript, explicado desde cero

JavaScript hace una sola cosa a la vez. Si fetch() "congelara" el programa mientras espera la respuesta de internet, toda la página se trabaría hasta que llegue. En vez de eso, JavaScript sigue trabajando y te avisa cuando el dato llega, con una promesa.

<script>
  function esperar(segundos) {
    return new Promise((resolver) => {
      setTimeout(resolver, segundos * 1000);
    });
  }

  console.log("Empieza");
  esperar(1).then(() => {
    console.log("Pasó 1 segundo");
  });
  console.log("Esto sale ANTES que el mensaje de arriba");
</script>

Una promesa siempre está en uno de tres estados: pendiente (todavía esperando), cumplida (llegó bien, dispara .then()), o rechazada (algo salió mal, dispara .catch()).

<script>
  function tirarMoneda() {
    return new Promise((resolver, rechazar) => {
      setTimeout(() => {
        const gano = Math.random() > 0.5;
        if (gano) resolver("¡Cara! Ganaste");
        else rechazar("Sello. Perdiste");
      }, 600);
    });
  }

  tirarMoneda()
    .then((mensaje) => console.log("Éxito:", mensaje))
    .catch((error) => console.log("Falló:", error));
</script>

.then() encadenado varias veces se vuelve difícil de seguir. async y await son azúcar sintáctico: la misma promesa por dentro, pero escrita como si fuera código normal, de arriba a abajo.

<script>
  function esperar(segundos) {
    return new Promise((resolver) => setTimeout(resolver, segundos * 1000));
  }

  // await SOLO funciona dentro de una función async
  async function jugar() {
    console.log("Preparando...");
    await esperar(1);
    console.log("¡Ahora!");
    await esperar(1);
    console.log("Se acabó");
  }

  jugar();
</script>

Ese es exactamente el patrón que usaste con fetch en el tutorial anterior: await fetch(...) espera la respuesta antes de seguir a la siguiente línea, sin congelar el resto de la página.

Con async/await, los errores se atrapan con try/catch —lo mismo que ya viste en el tutorial de manejo de errores—, en vez de .catch().

<script>
  async function buscarUsuario(nombre) {
    try {
      const respuesta = await fetch("https://api.github.com/users/" + nombre);
      if (!respuesta.ok) throw new Error("Usuario no encontrado");

      const datos = await respuesta.json();
      console.log("Encontrado:", datos.name || datos.login);
    } catch (error) {
      console.error("Problema:", error.message);
    }
  }

  buscarUsuario("torvalds");
  buscarUsuario("un-usuario-que-no-existe-seguro-123");
</script>

Qué es una promesa y sus tres estados, cómo escribirlas con .then()/.catch(), y por qué async/await es la forma preferida hoy en día para escribir lo mismo de forma más clara.

Ahora, tres métodos de array que vas a usar constantemente: map, filter y reduce, a fondo.

Promesas y async/await

Promises and async/await