🔌 Multi-Fetch API PRO
Explora datos de diferentes universos usando Fetch API y Paginación Dinámica.
Explora datos de diferentes universos usando Fetch API y Paginación Dinámica.
Utilizamos la API nativa de Javascript fetch() para realizar solicitudes HTTP a los servidores. Como esta petición requiere viajar por internet, utilizamos funciones async y la palabra clave await para esperar y desempaquetar la promesa en formato JSON.
const res = await fetch(url);
const data = await res.json();En el caso de Pokémon, la API nos entrega solo Nombres y URLs. Para obtener las imágenes, debemos acceder a sub-URLs. Usamos Promise.all() para lanzar las peticiones en paralelo simultáneamente, ahorrando tiempos de carga enormes.
const detailedData = await Promise.all(
nextBatch.map(p => fetch(p.url).then(r => r.json()))
);Como cada API (Naruto, DB, Pokémon) devuelve los datos con nombres de campos distintos, usamos una función de Normalización que estandariza la información para que todas las tarjetas se vean iguales sin importar la fuente.
Personajes, cómics y películas. Regístrate en developer.marvel.com para obtener tu clave.
La más completa sobre Pokémon: movimientos, habilidades y hábitats. Visita pokeapi.co.
Datos globales históricos sobre contagios y hospitalizaciones para proyectos más serios.
Precios, cambios y predicciones de criptomonedas en tiempo real.
Datos meteorológicos actuales, históricos y mapas climáticos globales.