Usar APIs externas

Trae datos de otros servicios a tu app

⏱ Estim. ~5 min

01 · Leer

La mayoría de las apps reales no viven aisladas. Hablan con otros servicios para obtener datos: una app del clima llama a una API del clima, una app social llama a una API de autenticación, una app de e-commerce llama a una API de pagos.

Una API (Application Programming Interface) es básicamente una URL que devuelve datos en vez de una página web. Cuando visitas un sitio, el navegador recibe HTML. Cuando tu programa llama a una API, recibe JSON — datos estructurados que tu programa puede usar.

Aprendiste sobre APIs en el Level 5. Ahora vamos a usarlas en código real.

💡 Imagínalo asíSi tu servidor es la cocina de un restaurante, una API externa es un proveedor. No cultivas tus propios tomates — llamas al proveedor (la API), haces un pedido (la petición) y él te entrega (la respuesta). Si el proveedor cierra (la API se cae), necesitas un plan B (manejo de errores).

02 · Ejemplo de código

Aquí tienes una ruta que trae datos de una API externa. Léela y fíjate en tres patrones clave: async/await, fetch y try/catch.

Ejemplo: ruta de API

app.get('/api/joke', async (req, res) => {
  try {
    const response = await fetch('https://official-joke-api.appspot.com/random_joke');
    const joke = await response.json();
    res.json({
      setup: joke.setup,
      punchline: joke.punchline
    });
  } catch (error) {
    res.status(500).json({ error: 'Failed to fetch joke' });
  }
});

Fíjate en tres cosas: (1) async/await te deja esperar datos externos sin congelar el servidor. La palabra 'await' pausa esta función hasta que llegan los datos, pero las demás peticiones se siguen procesando. (2) fetch envía una petición HTTP a la API externa. (3) try/catch maneja errores con elegancia — si la API de chistes está caída, tu servidor sigue devolviendo un mensaje de error útil en vez de caerse.

03 · Leer

Cuando trabajas con APIs externas hay conceptos que aparecen una y otra vez. Entenderlos te ahorra errores comunes.

Puntos clave

async/await — la forma de esperar datos externos sin bloquear el servidor
API key — autenticación para APIs pagas o privadas (¡ponla en .env!)
Rate limit — las APIs limitan cuántas peticiones puedes hacer por minuto
Manejo de errores — siempre ten un fallback por si la API se cae

04 · Práctica real

Intenta agregar esta ruta de API a tu servidor Express del Level 7. Llama a una API de chistes gratuita que no requiere API key — perfecta para practicar.

// Add this to your app.js
app.get('/api/joke', async (req, res) => {
  try {
    const response = await fetch('https://official-joke-api.appspot.com/random_joke');
    const joke = await response.json();
    res.json({ setup: joke.setup, punchline: joke.punchline });
  } catch (error) {
    res.status(500).json({ error: 'Failed to fetch joke' });
  }
});

05 · Completar

Para manejar errores de API en JavaScript, envuelve la llamada a fetch en un bloque _____/catch.

06 · Quiz

¿Por qué envolver las llamadas a APIs en un bloque try/catch?

Todas las funciones de JavaScript requieren try/catch
Para que el programa corra más rápido
Para evitar llamar a la API demasiadas veces
Para manejar errores con elegancia cuando la API se cae

Otras lecciones de este capítulo

⚠ La experiencia interactiva completa necesita JavaScript. Actívalo y vuelve a cargar la página.

※ Este es un proyecto educativo independiente — no es un producto oficial de Anthropic. Claude™ es una marca registrada de Anthropic, PBC.