fetch: tu primera API real

Se acabaron los simuladores: hoy tu código cruza internet. fetch es la función del navegador para pedirle datos a un servidor, devuelve — cómo no — una promesa, y en esta lección la usas contra una API pública de verdad. Lo que llegue a tu consola habrá viajado por la red hasta tu playground.

El timbre y la bolsa

Corre el playground: ese nombre y ese correo NO están en tu código — viajaron desde un servidor. Detalles del rito: fetch(url) sin más opciones hace un GET ("tráeme esto", el verbo de leer); response.json() también devuelve promesa (leer el cuerpo completo toma su tiempo — puede venir por partes), de ahí el segundo await; y el resultado es JSON parseado a objetos — el JSON.parse del módulo 5, hecho en casa por la Response.

Listas y query strings

Las APIs organizan sus datos en URLs predecibles (/users, /users/1, /users/1/todos) y aceptan parámetros después del ? — la query string — para filtrar o limitar:

Fíjate en el momento clave: apenas el JSON se convierte en array, vuelves a territorio conocido — for...of, filter, map, reduce. Consumir APIs es 20% fetch y 80% las herramientas que ya dominas. (Los títulos llegan en un inglés raro — es lorem ipsum: JSONPlaceholder existe para practicar exactamente esto sin registrarte ni pagar; los datos son ficticios, la mecánica es idéntica a cualquier API profesional.)

Nota de red honesta: una petición puede tardar 50ms con buen wifi o 3 segundos en un bus por la Boyacá con 3G — y también puede FALLAR. Todo lo que aprendiste de errores aplica aquí, y la lección 6 le pone lupa a los fallos de fetch (que tienen una trampa famosa).

Mini-reto

Explora la API como profesional: 1) trae al usuario 2 y al usuario 3 EN PARALELO con el Promise.all de la lección pasada e imprime sus nombres; 2) pide /posts?userId=1 y cuenta cuántos títulos tienen más de 30 caracteres (filter + length del módulo 4... sobre datos que viajaron por internet); 3) rompe a propósito: pide /users/999 e imprime response.status y response.ok — guarda lo que veas: es el tema de la lección 6.

Qué sigue

Ya LEES datos del mundo (GET). La otra mitad es ESCRIBIR: enviarle información a un servidor — registrar un gasto, crear un usuario, mandar un formulario. Próxima lección: POST, headers y el cuerpo de la petición — fetch en modo remitente.