Tutorial: consume una API con fetch - clima en vivo

Hasta ahora tus páginas solo usaban datos que tú mismo escribiste. Hoy vamos a pedirle datos a internet, en vivo, usando fetch. Bienvenido al mundo real.

Paso 1: haz tu primera petición

fetch('https://api.github.com/users/octocat')
  .then((respuesta) => respuesta.json())
  .then((datos) => console.log(datos))
  .catch((error) => console.error('Algo salió mal:', error));

fetch(url) pide datos a esa dirección. La respuesta llega en un formato que hay que convertir a JSON con .json() (que, sorpresa, también es asíncrono, por eso otro .then). Si algo falla (sin internet, la API está caída), .catch te avisa en vez de romper tu página en silencio.

Paso 2: la versión moderna con async/await

async function obtenerUsuario() {
  try {
    const respuesta = await fetch('https://api.github.com/users/octocat');
    const datos = await respuesta.json();
    console.log(datos.name, datos.public_repos);
  } catch (error) {
    console.error('Algo salió mal:', error);
  }
}

obtenerUsuario();

async/await es la misma idea que .then(), pero se lee de arriba hacia abajo como código normal, en vez de anidarse como una muñeca rusa. try/catch cumple el mismo rol que .catch(): atrapar errores sin que exploten en la consola.

Paso 3: muestra los datos en la página

<div id="usuario"></div>

async function mostrarUsuario() {
  const respuesta = await fetch('https://api.github.com/users/octocat');
  const datos = await respuesta.json();

  document.querySelector('#usuario').innerHTML = `
    <h3>${datos.name}</h3>
    <p>Repositorios públicos: ${datos.public_repos}</p>
  `;
}

mostrarUsuario();

Ahora tu página ya no está atada a datos fijos: muestra información real, actualizada, que ni siquiera vive en tu computadora. Esto es, técnicamente, el 90% de lo que hacen las aplicaciones web modernas.

¿Qué acabas de aprender?

• Cómo pedir datos de internet con fetch.
• La diferencia entre .then() y async/await (son la misma idea, distinta sintaxis).
• Cómo manejar errores con try/catch sin que tu app se rompa en silencio.