🐱 Bonus · Lab Extra · Cat API

Lab extra: API externa desde el browser

Un ejercicio extra para entender cómo el frontend puede consumir una API sin necesitar backend propio.

¿Qué es este archivo?

Si en la sesión te sobró tiempo — o querés practicar en casa — este lab te muestra algo importante: el frontend puede hablar directo con APIs externas, sin que vos tengas que montar ningún backend.

Abajo hay una demo interactiva que hace un fetch a The Cat API y muestra el resultado JSON en pantalla — exactamente lo que haría tu código en producción.

💡

Si descargaste este archivo: hacé doble clic en el archivo .html y se va a abrir directamente en tu navegador. No necesitás instalar nada.

Request que hace el browser

GEThttps://api.thecatapi.com/v1/images/search
?has_breeds=true&limit=1
&x-api-key: DEMO-API-KEY

🐱

Presioná el botón para cargar un gatito

Lo que está pasando

El browser hace un GET request a The Cat API
La API devuelve un JSON con la URL de la imagen y datos de la raza
El frontend parsea el JSON y renderiza la imagen y los datos
No hay backend propio — el frontend habla directo con la API externa
El API key va en el header — así la API sabe quién está pidiendo