Cómo Consumir APIs con JavaScript: 8 Ejemplos Reales Paso a Paso

Ejemplo práctico: Aprende a consumir APIs con JavaScript usando fetch() con ejemplos reales como Pokémon, Dragon Ball, clima y datos financieros.

Consumir APIs es una de las habilidades más importantes para cualquier desarrollador moderno.

En esta guía encontrarás 7 ejemplos reales donde utilizamos JavaScript para conectarnos a APIs públicas y obtener datos dinámicos.

Verás desde proyectos divertidos hasta integraciones financieras reales.

---

¿Qué es una API y cómo se usa en JavaScript?

Una API es un servicio que permite obtener datos desde un servidor.

Con JavaScript puedes consumir APIs utilizando fetch(), que realiza peticiones HTTP y devuelve datos en formato JSON.

fetch("https://api.ejemplo.com/data")
  .then(res => res.json())
  .then(data => console.log(data));

Este es el concepto base que aplicarás en todos los ejemplos siguientes.

---

🌌 1️⃣ Rick and Morty API – Mini Proyecto Web

Construimos un buscador interactivo de personajes utilizando fetch(), paginación y filtros dinámicos.

• Consumo de API REST
• Paginación
• Renderizado dinámico en el DOM

Ver demo completa Rick and Morty API →

---

🏎️ 2️⃣ API de Fórmula 1 – Datos en Tiempo Real

Consultamos información de pilotos y estadísticas usando una API pública.

• Request HTTP con JavaScript
• Manejo de JSON
• Visualización de datos

Ver ejemplo API Fórmula 1 →

---

🐉 3️⃣ API de Dragon Ball – Proyecto Geek

Obtenemos personajes, imágenes y datos del universo Dragon Ball.

• Parámetros dinámicos
• Manipulación de JSON
• Interfaz interactiva

Ver ejemplo API Dragon Ball →

---

💰 4️⃣ API Financiera – Banxico (UDIS, CETES, TIIE)

Trabajamos con datos económicos reales utilizando APIs.

• Datos financieros en tiempo real
• Uso en Excel y dashboards
• Aplicaciones empresariales

Ver ejemplo API financiera →

---

🖼️ 5️⃣ API de Imágenes Aleatorias

Aprende a mostrar imágenes dinámicas consumiendo una API pública.

• Uso de fetch()
• Contenido dinámico
• Manipulación del DOM

👉 Ver tutorial completo →

---

🌦️ 6️⃣ API del Clima con Geolocalización

Consulta el clima en tiempo real usando la ubicación del usuario.

• Geolocalización
• API Open-Meteo
• Datos en tiempo real

👉 Probar la demo →

---

⚡ 7️⃣ API de Pokémon (PokéAPI)

Obtén información de Pokémon aleatorios usando JavaScript.

• Consumo de APIs REST
• Uso de fetch()
• Renderizado dinámico

👉 Ver ejemplo Pokémon →

⚡ 8 API de Tennis (TennisAPI)

Dashboard-atp-javascript-tennis-api.html

Consumo de APIs REST

Datos de Tennis-api.com

Uso de fetch()

---

🎯 ¿Qué aprenderás con estos ejemplos?

• Cómo usar fetch() correctamente
• Cómo manejar JSON
• Cómo consumir APIs REST
• Cómo crear proyectos reales
• Cómo escalar a APIs empresariales

---

🚀 Siguiente nivel: APIs empresariales

Después de dominar APIs públicas, puedes avanzar a integraciones como Oracle Fusion Cloud.

Guía de APIs en Oracle →

---

Conclusión: dominar el consumo de APIs te permite crear aplicaciones reales, dashboards y automatizaciones.