🏠 Menú ⭐ NIVEL 19 ⬅️ Anterior

🌐 APIs y Fetch - Conectando con el Mundo

🤔 ¿Qué es una API?

API = Application Programming Interface

Una API es como un mesero en un restaurante:

  • 🍽️ Tú (la web) pides algo al mesero (API)
  • 👨‍🍳 El mesero va a la cocina (servidor) a buscar tu pedido
  • 📦 El mesero te trae la comida (datos)

Las APIs nos permiten obtener datos de otros sitios web, como:

📡 La Función fetch()

fetch() es la forma de JavaScript para hacer pedidos a APIs:

// Pedir datos a una API
fetch('https://api.ejemplo.com/datos')
    .then(respuesta => respuesta.json())
    .then(datos => {
        console.log(datos);
    });
¿Qué significa cada parte?
• fetch(url) - Hace el pedido
• .then() - "Cuando llegue la respuesta, haz esto..."
• .json() - Convierte la respuesta a datos que podemos usar

🆕 Forma moderna con async/await

async function obtenerDatos() {
    const respuesta = await fetch('https://api.ejemplo.com/datos');
    const datos = await respuesta.json();
    console.log(datos);
}

obtenerDatos();
async/await hace el código más fácil de leer, como si fuera paso a paso.

🎮 ¡Prueba APIs Reales!

Haz clic en los botones para ver datos de APIs reales:

👆 Haz clic en un botón para ver la magia de las APIs

💻 Editor - Tu Primera API

Modifica el código y ejecuta para ver los resultados:

📝 JavaScript
👁️ Resultado

Haz clic en "▶️ Ejecutar" para ver el resultado

🛡️ Manejo de Errores

A veces las APIs fallan. Es importante manejar los errores:

async function obtenerDatosSeguro() {
    try {
        const respuesta = await fetch('https://api.ejemplo.com/datos');
        
        // Verificar si la respuesta fue exitosa
        if (!respuesta.ok) {
            throw new Error('Error en la petición');
        }
        
        const datos = await respuesta.json();
        console.log(datos);
        
    } catch (error) {
        console.log('❌ Algo salió mal:', error);
    }
}
Siempre usa try/catch cuando trabajes con APIs. ¡Internet no siempre funciona!

🎯 Quiz - ¡Demuestra lo que Aprendiste!

1. ¿Qué es una API?

Un tipo de base de datos
Una forma de obtener datos de otros servidores
Un lenguaje de programación

2. ¿Qué función usamos para hacer peticiones HTTP?

get()
fetch()
request()

3. ¿Qué hace .json() en una respuesta fetch?

Envía datos al servidor
Crea un archivo JSON
Convierte la respuesta a un objeto JavaScript

4. ¿Qué palabras clave hacen el código asíncrono más legible?

async / await
sync / wait
promise / resolve
⭐ ⭐ ⭐