20. Haciendo peticiones a la API

 

Tutorial 20: Haciendo peticiones a la API

🚀 Transformando nuestra función para consumir la API

Vamos a modificar nuestra función reqApi para que realmente haga la petición a la API de Rick & Morty y obtenga los datos que necesitamos.

Paso 1: Hacer la función asíncrona

Primero, actualizamos nuestra función para que sea async:

javascript

// En tu App.js, reemplaza la función reqApi actual por:

const reqApi = async () => {

  // Quitamos el console.log anterior

  console.log("Haciendo petición a la API...");

};

¿Por qué async?

• Nos permite usar await dentro de la función

• Facilita el manejo de promesas

• Hace el código más limpio y legible

Paso 2: Hacer la petición con fetch

Vamos a usar la API de fetch que viene incluida en los navegadores modernos:

javascript

const reqApi = async () => {

  // Hacemos la petición a la API

  const api = await fetch("https://rickandmortyapi.com/api/character");

  

  console.log("Respuesta de la API:", api);

};

URL de la API: https://rickandmortyapi.com/api/character

Paso 3: Probar la petición

1. Guarda los cambios (Ctrl + S)

2. Abre la consola del navegador (F12 → pestaña "Console")

3. Haz clic en "Buscar personajes"

4. Deberías ver algo como:

text

Respuesta de la API: Response {type: "cors", url: "...", redirected: false, status: 200, ok: true, …}

Paso 4: Convertir la respuesta a JSON

La respuesta de fetch es un objeto Response. Necesitamos convertirlo a JSON para poder trabajar con los datos:

javascript

const reqApi = async () => {

  // Hacemos la petición

  const api = await fetch("https://rickandmortyapi.com/api/character");

  

  // Convertimos la respuesta a JSON

  const characterApi = await api.json();

  

  console.log("Datos en formato JSON:", characterApi);

};

Paso 5: Examinar la respuesta completa

Haz clic en el botón nuevamente y examina lo que aparece en consola:

javascript

// La estructura completa que verás es:

{

  "info": {

    "count": 826,      // Total de personajes

    "pages": 42,       // Total de páginas

    "next": "https://...?page=2",  // URL siguiente página

    "prev": null       // URL página anterior (null si es la primera)

  },

  "results": [         // Array con los personajes

    { /* primer personaje */ },

    { /* segundo personaje */ },

    // ... 20 personajes en total

  ]

}

Paso 6: Ver los datos específicos

Vamos a hacer console.log más específicos para entender mejor los datos:

javascript

const reqApi = async () => {

  const api = await fetch("https://rickandmortyapi.com/api/character");

  const characterApi = await api.json();

  

  // Información general

  console.log("Total personajes en la API:", characterApi.info.count);

  console.log("Total páginas:", characterApi.info.pages);

  console.log("Personajes en esta página:", characterApi.results.length);

  

  // Primer personaje para examinar

  console.log("Primer personaje:", characterApi.results[0]);

  

  // Todos los nombres

  console.log("Nombres de todos los personajes:");

  characterApi.results.forEach((personaje, index) => {

    console.log(`${index + 1}. ${personaje.name}`);

  });

};

Paso 7: Analizar la estructura de un personaje

Cuando examines characterApi.results[0], verás:

javascript

{

  "id": 1,

  "name": "Rick Sanchez",

  "status": "Alive",

  "species": "Human",

  "type": "",

  "gender": "Male",

  "origin": {

    "name": "Earth (C-137)",

    "url": "https://rickandmortyapi.com/api/location/1"

  },

  "location": {

    "name": "Citadel of Ricks",

    "url": "https://rickandmortyapi.com/api/location/3"

  },

  "image": "https://rickandmortyapi.com/api/character/avatar/1.jpeg",

  "episode": [

    "https://rickandmortyapi.com/api/episode/1",

    "https://rickandmortyapi.com/api/episode/2",

    // ... más episodios

  ],

  "url": "https://rickandmortyapi.com/api/character/1",

  "created": "2017-11-04T18:48:46.250Z"

}

🔍 Validando que la petición sea exitosa

Es buena práctica verificar que la petición fue exitosa:

javascript

const reqApi = async () => {

  try {

    const api = await fetch("https://rickandmortyapi.com/api/character");

    

    // Verificar que la respuesta sea OK

    if (!api.ok) {

      throw new Error(`Error HTTP: ${api.status}`);

    }

    

    const characterApi = await api.json();

    

    console.log("¡Petición exitosa!");

    console.log("Status:", api.status); // Debería ser 200

    console.log("Primer personaje:", characterApi.results[0].name);

    

  } catch (error) {

    console.error("Error al hacer la petición:", error);

  }

};

📊 Código completo de la función hasta ahora:

javascript

const reqApi = async () => {

  console.log("Iniciando petición a la API...");

  

  try {

    // 1. Hacer la petición

    const api = await fetch("https://rickandmortyapi.com/api/character");

    

    // 2. Verificar que fue exitosa

    if (!api.ok) {

      throw new Error(`Error: ${api.status} - ${api.statusText}`);

    }

    

    // 3. Convertir a JSON

    const characterApi = await api.json();

    

    // 4. Mostrar información útil

    console.log("✅ Petición exitosa!");

    console.log("📊 Total personajes disponibles:", characterApi.info.count);

    console.log("📄 Personajes obtenidos:", characterApi.results.length);

    console.log("👤 Ejemplo - Primer personaje:", {

      nombre: characterApi.results[0].name,

      estado: characterApi.results[0].status,

      especie: characterApi.results[0].species,

      episodios: characterApi.results[0].episode.length,

      imagen: characterApi.results[0].image

    });

    

    // 5. Mostrar todos los nombres

    console.log("📋 Lista completa de nombres:");

    characterApi.results.forEach((p, i) => {

      console.log(`${i + 1}. ${p.name} - ${p.status} - ${p.species}`);

    });

    

  } catch (error) {

    console.error("❌ Error en la petición:", error);

    alert("Hubo un error al cargar los personajes. Verifica tu conexión.");

  }

};

🧪 Prueba de funcionamiento

Lo que deberías ver en consola al hacer clic:

text

Iniciando petición a la API...

✅ Petición exitosa!

📊 Total personajes disponibles: 826

📄 Personajes obtenidos: 20

👤 Ejemplo - Primer personaje: {nombre: "Rick Sanchez", estado: "Alive", especie: "Human", episodios: 51, imagen: "https://..."}

📋 Lista completa de nombres:

1. Rick Sanchez - Alive - Human

2. Morty Smith - Alive - Human

3. Summer Smith - Alive - Human

4. Beth Smith - Alive - Human

5. Jerry Smith - Alive - Human

... y así sucesivamente

⚠️ Errores comunes y soluciones

Error 1: "Failed to fetch"

javascript

// Posibles causas:

// 1. Sin conexión a internet

// 2. URL mal escrita

// 3. Problemas de CORS (aunque esta API lo permite)

// Solución: Verifica la URL

const api = await fetch("https://rickandmortyapi.com/api/character");

// NOTA: Asegúrate de que sea HTTPS y no HTTP

Error 2: "Unexpected token < in JSON"

javascript

// Causa: El servidor devuelve HTML en lugar de JSON

// Solución: Verifica que la API esté funcionando

// Puedes probar la URL directamente en el navegador

Error 3: La consola no muestra nada

javascript

// Causas posibles:

// 1. No guardaste los cambios (Ctrl + S)

// 2. La consola está filtrada (asegúrate de ver "All" o "Default")

// 3. Hay un error silencioso

🔗 Verificación manual de la API

Si tienes dudas sobre si la API funciona, puedes:

1. Abrir directamente en el navegador: https://rickandmortyapi.com/api/character

2. Usar curl en terminal: curl https://rickandmortyapi.com/api/character

3. Usar herramientas como Postman

🎯 ¿Qué hemos logrado?

✅ Creamos una función asíncrona
✅ Hicimos peticiones a una API real
✅ Convertimos la respuesta a JSON
✅ Validamos que la petición sea exitosa
✅ Exploramos la estructura de los datos
✅ Implementamos manejo de errores básico

📝 Actividad práctica

Modifica tu código para que:

1. Muestre solo personajes que estén vivos (status === "Alive")

2. Cuente cuántos personajes son humanos (species === "Human")

3. Encuentre el personaje con más episodios

javascript

// Ejemplo de solución parcial

const vivos = characterApi.results.filter(p => p.status === "Alive");

console.log(`Personajes vivos: ${vivos.length}`);

const humanos = characterApi.results.filter(p => p.species === "Human");

console.log(`Personajes humanos: ${humanos.length}`);

const masEpisodios = characterApi.results.reduce((prev, current) => {

  return prev.episode.length > current.episode.length ? prev : current;

});

console.log(`Personaje con más episodios: ${masEpisodios.name} (${masEpisodios.episode.length})`);

🚀 Próximo paso

¡Excelente! Ya estamos obteniendo los datos de la API. En el siguiente tutorial vamos a:

1. Almacenar estos datos en el estado de React

2. Actualizar la interfaz para mostrar los personajes

3. Crear un componente específico para mostrar cada personaje

---

¿Lograste ver la lista completa de personajes en tu consola? ¡Comparte cuál es tu personaje favorito que apareció en la lista! 🌟

¿Tuviste algún problema con la petición? ¡Describe el error en los comentarios para ayudarte