Información de todos los Pokemon

Curso de React Native: Manejo de Listas y Consumo de APIs

Contenido del curso

Inicializando la app

API y listado de Pokemon

Detalles del Pokemon

Tomar examen

Cursos Empresas Blog Live Conf Eventos Precios

0:0012:34

Información de todos los Pokemon

Curso de React Native: Manejo de Listas y Consumo de APIs

Clase 6 de 17

Clase 6 / 17

Daniel Briceño

Hace 3 años

No es muy recomendable usar un loop con peticiones asíncronas, debido a que siempre se esperara a resolver una promesa antes de iterar a la siguiente vuelta del loop, en estos casos es mejor utilizar un Promise.all para resolverlas en paralelo y luego retornar un array de respuestas.

Ejemplo con Typescript y Axios.

import axios, { AxiosResponse } from "axios";

import { PokemonsResponseApi, PokemonApi } from "../models/pokemonApi.ts";
import { Pokemon } from "../models/pokemon.ts";
import { API_HOST } from "../utils/constants.ts";
import { getPokemonData } from "../utils/helpers.ts";

export const getPokemonsApi = async (
  limit: string | number | null = 20,
  offset: string | number | null = 0
): Promise<Pokemon[]> => {
  try {
    const url = `${API_HOST}/pokemon?limit=${limit}&offset=${offset}`;
    const response: AxiosResponse<PokemonsResponseApi> = await axios(url);
    const data: AxiosResponse<PokemonApi>[] = await Promise.all(
      response.data.results?.map((e) => axios.get(e.url))
    );
    const pokemonsApi: PokemonApi[] = [];
    data?.forEach((e) => pokemonsApi.push(e.data));

    const pokemons = pokemonsApi?.map((e) => getPokemonData(e));

    return pokemons;
  } catch (error) {
    throw error;
  }
};

import { PokemonApi } from "../models/pokemonApi";
import { Pokemon } from "../models/pokemon";

export const getPokemonData = (pokemon: PokemonApi): Pokemon => {
  return {
    id: pokemon.id,
    name: pokemon.name,
    hp: pokemon.stats[0].base_stat,
    strength: pokemon.stats[1].base_stat,
    defense: pokemon.stats[2].base_stat,
    speed: pokemon.stats[5].base_stat,
    height: pokemon.height,
    weight: pokemon.weight,
    img: pokemon.sprites.other["official-artwork"].front_default,
    types: pokemon.types.map((e) => e.type.name),
  };
};

Daniel Ochoa

Hace 3 años

Valido tu punto de vista, pero depende del enfoque no es una mala práctica, si tu quieres ir viendo conforme vas cargando, lo mejor es hacerlo como indica el mentor, si lo que buscas es tener toda la información lo más rápido posible y renderizar cuando ya lo tengas todo es mejor usar en paralelo, todo tiene su momento y su lugar.

Comentarios (20)20 comentarios

Daniel Alejandro Contreras Martinez

Hace 5 años

Juan Camilo Rivas Molina

Hace 4 años

Jaime David Burbano Montoya

Jorge Isaac Villa Lopez

Platzi Nauta

Alfonso Andres Zapata Guzman

Juan Valentin Perdomo Bonilla

David Alejandro Sequera Lievano

Raycris Maldonado

Odalis Dariel Abreu Mejia

Daniel Rodriguez Davila

Luis Fernando Pedroza Taborda

Erick Daniel Rivadeneira Obregon

Adolfo Sebastián Jara Gavilanes

Hace 2 años

Gustavo Pú

Stephano Apiolaza

Jhunior Eduardo Guevara Lázaro

CESAR AUGUSTO TOBON CUARTAS

jilma Jemimah Cavero de Arango

Francisco Antonio Rivera Viveros

Julian Andres Florez Rios

Jorge Arteaga

Agustín Navarro Galdon

Profesor

Tulio Junior Rangel Nuñez

María Antonia Lobato

Hans Trauwitz

Federico Noya

Kevin Parra Lopez

jose daniel corredor zambrano

Inicializando la app

Creación del proyecto: PokeDex

Configuración de React Navigation

Diseñando la Tab navigation con iconos

Stack de navegación para Pokedex

API y listado de Pokemon

Consumo de APIs con fetch: PokeApi

Información de todos los Pokemon

Lista de Pokemon con FlatList

Renderizando la PokemonCard

Clasificación por colores y utilidades de Lodash

Infinite scrolling con FlatList

Añadiendo StyleSheet a la lista

Detalles del Pokemon

Vista y navegación al detalle del Pokemon

Consultando la API de detalles del Pokemon

Maquetación del Pokemon: header

Maquetación del Pokemon: sección de tipos

Maquetación del Pokemon: estadísticas

Maquetación del Pokemon: barra de navegación

Información de todos los Pokemon

Progreso del curso

Inicializando la app

API y listado de Pokemon

Detalles del Pokemon