🔌 Poke-Fetch PRO
Busca por Nombre, Número o Tipo con filtros avanzados e Infinite Scroll.
Busca por Nombre, Número o Tipo con filtros avanzados e Infinite Scroll.
Utilizamos la API nativa de Javascript fetch() para realizar solicitudes HTTP a los servidores de PokéAPI. 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('https://pokeapi.co/api/v2/pokemon?limit=1300');
const data = await res.json();Al hacer la primera petición `fetch()`, la API solo nos entrega una lista con el Nombre y la URL de cada Pokémon. ¡Las imágenes y poderes están ocultos! Debemos acceder a esa URL oculta.
En vez de descargar 1300 sub-URLs, hacemos paginación infinita. Bajamos información de 12 en 12 ejecutando Promise.all() para lanzar las peticiones en parelelo simultáneamente, ahorrando tiempos de carga enormes.
const detailedData = await Promise.all(
nextBatch.map(p => fetch(p.url).then(r => r.json()))
);Superado el paso asíncrono, la app interactúa con tu navegador. Toma ese arreglo (array) con datos vírgenes y mediante la función interna renderCard(data), crea piezas HTML al vuelo y las inyecta a un Grid estático. Usamos destructuring y plantillas literales (` `) para empastar los Sprites y HP Stats logrando una UI Premium.