Asincronía y APIs

⏱ 50 minutos
📶 Nivel: principiante
🧩 Incluye ejercicio

💡 🎯 Al terminar esta lección podrás…

Explicar por qué el código asíncrono no se ejecuta en el orden en que se escribe.
Usar temporizadores y promesas.
Escribir funciones con async/await y try/catch.
Pedir datos con fetch y gestionar los estados de carga, error y vacío.

1.Síncrono y asíncrono

Hasta ahora, cada línea esperaba a que terminara la anterior: es lo síncrono. Pero hay tareas que tardan: pedir datos a un servidor, esperar 3 segundos, leer un archivo. Si JavaScript se quedara esperando sin hacer nada más, la página se congelaría: no podrías ni pulsar un botón.

La solución es lo asíncrono: se inicia la tarea lenta, el programa sigue con lo demás, y cuando la tarea termina, se ejecuta una función con el resultado.

▶ El orden sorprendente

Código (edítalo y pulsa Ejecutar)

<script>
  console.log("1. Empieza");

  setTimeout(() => {
    console.log("3. Esto llega después de 1 segundo");
  }, 1000);

  console.log("2. Esto se ejecuta ANTES de lo anterior");
</script>

Página (resultado)

Consola

Ejecútalo: el mensaje 2 sale antes que el 3, aunque esté escrito después. setTimeout no detiene el programa: agenda la función para más tarde y continúa. Entender esto es la clave de toda la lección.

📌 Nota · Una sola línea de ejecución

JavaScript hace una cosa a la vez. Lo asíncrono no significa «dos cosas a la vez»: significa que cuando una tarea tiene que esperar (a la red, a un temporizador), el navegador se ocupa de la espera y JavaScript atiende otras cosas mientras tanto.

2.Temporizadores

Función	Qué hace	Se cancela con
`setTimeout(fn, ms)`	Ejecuta `fn` una vez tras `ms` milisegundos	`clearTimeout(id)`
`setInterval(fn, ms)`	Ejecuta `fn` cada `ms` milisegundos	`clearInterval(id)`

▶ Una cuenta regresiva

Código (edítalo y pulsa Ejecutar)

<p id="num" style="font-size:2rem;font-weight:700">3</p>
<script>
  let n = 3;
  const salida = document.getElementById("num");

  const id = setInterval(() => {
    n--;
    if (n === 0) {
      salida.textContent = "¡Despegue!";
      clearInterval(id);                 // ¡hay que pararlo!
      console.log("Terminó");
    } else {
      salida.textContent = n;
      console.log(n + "...");
    }
  }, 1000);
</script>

Página (resultado)

Consola

⚠️ Importante · Limpia tus intervalos

Un setInterval sigue ejecutándose para siempre hasta que lo cancelas. Guarda su id y llama a clearInterval(id) cuando ya no haga falta, o seguirá consumiendo recursos aunque ya no se vea.

3.Promesas

Una promesa (*Promise*) es un objeto que representa un resultado que llegará en el futuro. Siempre está en uno de tres estados:

Estado	Significa	Cómo reaccionar
pending (pendiente)	Todavía no hay resultado	—
fulfilled (cumplida)	Terminó bien y tiene un valor	`.then(valor => …)`
rejected (rechazada)	Terminó mal y tiene un error	`.catch(error => …)`

▶ Crear y usar una promesa

Código (edítalo y pulsa Ejecutar)

<script>
  function esperar(ms) {
    return new Promise((resolver) => {
      setTimeout(() => resolver("listo tras " + ms + " ms"), ms);
    });
  }

  function dividir(a, b) {
    return new Promise((resolver, rechazar) => {
      if (b === 0) rechazar(new Error("No se puede dividir entre cero"));
      else resolver(a / b);
    });
  }

  esperar(500).then((mensaje) => console.log(mensaje));

  dividir(10, 2).then((r) => console.log("10 / 2 =", r));
  dividir(1, 0)
    .then((r) => console.log(r))
    .catch((e) => console.log("Error:", e.message))
    .finally(() => console.log("Terminó la división"));
</script>

Página (resultado)

Consola

.then() recibe el valor cuando la promesa se cumple y devuelve otra promesa: se pueden encadenar.
.catch() atrapa los errores de cualquier paso anterior de la cadena.
.finally() se ejecuta siempre, salga bien o mal (ideal para quitar un «cargando…»).

4.async / await: promesas con aspecto de código normal

async y await permiten escribir código asíncrono como si fuera síncrono, de arriba abajo, mucho más legible que las cadenas de .then():

▶ async / await

Código (edítalo y pulsa Ejecutar)

<script>
  const esperar = (ms, valor) => new Promise(r => setTimeout(() => r(valor), ms));

  async function preparar() {
    console.log("Empiezo");
    const cafe = await esperar(500, "café");      // espera sin congelar la página
    console.log("Listo el", cafe);
    const pan = await esperar(300, "pan");
    console.log("Listo el", pan);
    return `${cafe} con ${pan}`;
  }

  preparar().then((desayuno) => console.log("Desayuno:", desayuno));
  console.log("Esta línea sale antes de que termine preparar()");
</script>

Página (resultado)

Consola

Palabra	Qué hace
`async function f()`	La función siempre devuelve una promesa
`await promesa`	Pausa solo esa función hasta que la promesa se cumpla y da su valor. Solo se puede usar dentro de una función `async` (o en un módulo)
`try { … } catch (e) { … }`	Atrapa los errores (promesas rechazadas) de los `await`

▶ Errores con try / catch

Código (edítalo y pulsa Ejecutar)

<script>
  const fallar = () => new Promise((_, rechazar) => setTimeout(() => rechazar(new Error("¡Se cayó el servidor!")), 300));

  async function intentar() {
    try {
      const datos = await fallar();
      console.log("No llegamos aquí", datos);
    } catch (error) {
      console.log("Capturado:", error.message);
    } finally {
      console.log("Fin del intento");
    }
  }
  intentar();
</script>

Página (resultado)

Consola

5.Pedir datos a internet con fetch

fetch(url) hace una petición HTTP y devuelve una promesa con la respuesta. Es lo que usan las páginas para traer datos de una API (un servicio que ofrece datos en JSON):

El patrón estándar

async function cargarUsuario(id) {
  const respuesta = await fetch(`https://jsonplaceholder.typicode.com/users/${id}`);

  if (!respuesta.ok) {                         // 404, 500…
    throw new Error(`Error ${respuesta.status}`);
  }

  const usuario = await respuesta.json();      // convertir el cuerpo JSON en un objeto
  return usuario;
}

await fetch(url) → una respuesta (aunque sea un 404: fetch solo falla si no hay red).
Comprueba respuesta.ok (true para códigos 200–299) y lanza un error si no.
await respuesta.json() → los datos como objeto de JavaScript.

▶ Una API real (necesitas internet)

Código (edítalo y pulsa Ejecutar)

<h3 id="estado">Cargando…</h3>
<ul id="lista"></ul>
<script>
  async function cargar() {
    const estado = document.getElementById("estado");
    try {
      const r = await fetch("https://jsonplaceholder.typicode.com/users?_limit=4");
      if (!r.ok) throw new Error("Respuesta " + r.status);
      const usuarios = await r.json();

      estado.textContent = "Usuarios";
      document.getElementById("lista").innerHTML = "";
      for (const u of usuarios) {
        const li = document.createElement("li");
        li.textContent = `${u.name} (${u.email})`;     // textContent: dato externo
        document.getElementById("lista").append(li);
      }
      console.log("Llegaron", usuarios.length, "usuarios");
    } catch (error) {
      estado.textContent = "No se pudo cargar: " + error.message;
    }
  }
  cargar();
</script>

Página (resultado)

Consola

📌 Nota · ¿Y si estás sin conexión?

Este ejemplo necesita internet. Si falla, verás el mensaje de error en pantalla: es justo lo que debe pasar, y por eso siempre se envuelve fetch en try…catch. Los ejercicios del curso simulan la red para funcionar siempre.

⚠️ Importante · CORS

Los navegadores bloquean pedir datos a otro dominio salvo que ese servidor lo permita expresamente (cabeceras CORS). Si ves «blocked by CORS policy», no es un error tuyo: el servidor no admite peticiones desde tu página.

6.Varias tareas a la vez

Función	Hace	Cuándo
`Promise.all([…])`	Espera a que todas terminen; falla si una falla	Cargar varias cosas independientes a la vez
`Promise.allSettled([…])`	Espera a todas y da el resultado de cada una	Quieres saber qué salió bien y qué mal
`Promise.race([…])`	La primera que termine	Tiempos límite

▶ En serie frente a en paralelo

Código (edítalo y pulsa Ejecutar)

<script>
  const pedir = (nombre, ms) => new Promise(r => setTimeout(() => r(nombre), ms));

  async function enSerie() {
    const t0 = Date.now();
    const a = await pedir("A", 500);
    const b = await pedir("B", 500);
    const c = await pedir("C", 500);
    console.log("En serie:", [a, b, c], Date.now() - t0, "ms");
  }

  async function enParalelo() {
    const t0 = Date.now();
    const resultados = await Promise.all([pedir("A", 500), pedir("B", 500), pedir("C", 500)]);
    console.log("En paralelo:", resultados, Date.now() - t0, "ms");
  }

  enSerie().then(enParalelo);
</script>

Página (resultado)

Consola

💡 Consejo · No esperes de uno en uno sin necesidad

Si las tareas no dependen unas de otras, lánzalas juntas con Promise.all: tardan lo que tarde la más lenta, no la suma de todas. Es una mejora de rendimiento gratuita.

7.Buena experiencia: cargando, error y vacío

Una pantalla que muestra datos remotos debe contemplar cuatro estados, no solo el feliz:

Estado	Qué mostrar
Cargando	Un indicador («Cargando…», un spinner), idealmente con `role="status"`
Éxito	Los datos
Vacío	Un mensaje claro («No hay resultados») y no una pantalla en blanco
Error	Qué pasó, en lenguaje humano, y cómo reintentar

Estructura recomendada

async function mostrarDatos() {
  estado.textContent = "Cargando…";
  boton.disabled = true;
  try {
    const datos = await obtener();
    estado.textContent = datos.length ? "" : "No hay resultados";
    pintar(datos);
  } catch (error) {
    estado.textContent = "No pudimos cargar los datos. Inténtalo de nuevo.";
  } finally {
    boton.disabled = false;       // se ejecuta siempre
  }
}

8.Errores frecuentes

Olvidar await: obtienes una promesa en lugar del valor (Promise { <pending> }).
Usar await fuera de una función async.
No comprobar respuesta.ok: un 404 no hace fallar a fetch.
Olvidar .json() o no esperarlo con await.
No capturar errores: un await que falla sin try/catch deja un error sin controlar.
Esperar en serie tareas independientes en lugar de usar Promise.all.
Dejar un setInterval activo sin cancelarlo.
Usar innerHTML con datos de una API: son datos externos, usa textContent.
Dar por hecho que el orden de ejecución es el del código: lo asíncrono llega después.

📒 Apuntes para llevar

JavaScript hace una cosa a la vez; lo asíncrono permite iniciar una tarea lenta y seguir, atendiendo el resultado cuando llegue.
setTimeout ejecuta una vez y setInterval repetidamente; cancélalos con clearTimeout/clearInterval.
Una Promise está pendiente, cumplida o rechazada: .then() recibe el valor, .catch() el error y .finally() siempre se ejecuta.
async function devuelve una promesa; await espera el resultado sin congelar la página; try/catch captura los fallos.
fetch(url) devuelve la respuesta: comprueba respuesta.ok y usa await respuesta.json().
Promise.all lanza tareas independientes en paralelo; allSettled y race cubren otros casos.
Toda pantalla con datos remotos necesita estados de cargando, éxito, vacío y error.
Los datos de internet son externos: muéstralos con textContent.

9.Glosario

Término	Significado
Asíncrono	Que no bloquea la ejecución mientras espera un resultado.
Promesa (Promise)	Objeto que representa un resultado futuro.
`async` / `await`	Sintaxis para escribir promesas como código secuencial.
`fetch`	Función que hace peticiones HTTP y devuelve una promesa.
API	Servicio que ofrece datos o funciones para ser usado por programas.
CORS	Mecanismo que restringe peticiones entre dominios distintos.
Callback	Función que se ejecuta cuando termina una tarea.
`Promise.all`	Espera a que terminen varias promesas a la vez.

🧠 Comprueba lo aprendido

Elige una respuesta en cada pregunta. Verás al instante si acertaste y por qué.

¿En qué orden se muestran? console.log(1); setTimeout(() => console.log(2), 0); console.log(3);

¿Qué devuelve una función async?

Una función async siempre devuelve una promesa.

fetch recibe un 404 del servidor. ¿Qué ocurre?

fetch solo se rechaza si falla la red; hay que comprobar ok.

Tienes 3 peticiones independientes. ¿Cómo tardas menos?

Promise.all las lanza juntas: tardas lo que tarde la más lenta.

Un setInterval que ya no necesitas, ¿qué requiere?

Tu progreso se guarda en este navegador y se refleja en el índice del curso.

💡 🚀 ¡Ahora te toca!

La práctica fija lo aprendido. Pasa al ejercicio de esta lección.

Ir al ejercicio