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 / 17

Ver clases

Información de todos los Pokemon

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

Clase 6 de 17

Clase 6 / 17

Información de todos los Pokemon

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

Clase 6 / 17

Ver clases

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

Se me hizo raro que el profe no usara map

Jaime David Burbano Montoya

Realmente para trabajar con bucles asíncronos es una mejor práctica y ayuda en performance hacer un for of, que usar un map

Jorge Isaac Villa Lopez

dure varias horas buscando un error, pero me di cuenta que utilizaba "result" y era "results" me di cuenta al revisar el documento de las API, por es importante leer las recomendaciones del fabricante de la API https://pokeapi.co/docs/v2

Platzi Nauta

Cierto, yo estoy realizando el proyecto con otra api y en ella listan cada result como 'items'.

Alfonso Andres Zapata Guzman

Estas cosas no pasan con typescript. :v

No, en serio no pasan, yo estoy realizando el proyecto de esta manera y todo bien, es magnifico ver los errores directamente en VSC.

~ Que tal Platzinauta, ya conectamos en LinkedIn? ~

¡Que estas esperando! Conectemos en LinkedIn, GitHub, Medium, Redes sociales o unete al mejor servidor de Discord sobre Python y ciencia de datos en español.

Juan Valentin Perdomo Bonilla

tuve un error bastante traumante ajajaja, en videos anteriores en pokedexNavegation, cambie el orden ,pokemon estaba de primero... asi que claro, la visualizacion era pokemon y no pokedex, no encontraba por que no me servia la consulta de api jajajaja es gracioso... y quizas alguien novato tambien le pase

David Alejandro Sequera Lievano

No se está usando las excepciones de manera correcta, solo es necesario hacer handeling de una excepción una vez, es mala práctica devolver el mismo error.


async function  funcionFetch(){
	try{
		// hacer fetch de algo
	}
	catch(e){
      		throw e
		// mala practica
	}
}

Codigo de juego para que prueben

const fetch = require('node-fetch');
// funcion que pide algo no necesita que devuelvea el error
async function  funcionFetch(){
    const promise = fetch('Soy una url que no existe');
    const response = await promise;
    const data = await response.json();
    console.log(data);
}

// funcion que realmente maneja el error
async function errorFunction(){
    try{
        await funcionFetch()
    }
    catch(error){
        console.log("Vamo a calmarno");
    }
}

errorFunction();

aqui les dejo el código en node para que lo prueben

Raycris Maldonado

Alguien tiene este error? undefined is not an object (evaluating 'o[Symbol.iterator]')

El error se soluciono poniendole una s que me faltaba en el for await.

Antes lo tenia asi for await (const pokemon of response.result)

Despues de corregir el error: for await (const pokemon of response.results)

Odalis Dariel Abreu Mejia

A mi me presenta este problema LOG Pokemons---> [] ERROR [TypeError: Cannot convert undefined value to object]

Con este bloque de codigo: const pokemonsArray = []; for await (const pokemon of response.result){ const pokemonDetails = await getPokemonsDetailsByUrlApi(pokemon.url); console.log(pokemonDetails);

Alguien me puede ayudar?

Daniel Rodriguez Davila

first commit, jejejeje

Luis Fernando Pedroza Taborda

Sip y la ventaja es que inicia git de manera automatica.

Interesante ejercicio, hay algunos conceptos que hay que repasar.

Erick Daniel Rivadeneira Obregon

Hago todo lo que esta aquí y no me sale anda en consola, no se si este curso ya es bastante antiguo porque ya estamos en al versión 7 de React y algunas cosas no me sirven o son innecesarias hacerlas o hice algo más, en todo caso copie literal el codigo de al repo y no me funcionó tampoco si alguien tiene alguna solución o comentario constructivo se lo agradecería :)

Adolfo Sebastián Jara Gavilanes

Hace 2 años

tenia el mismo porblema en mi caso fue el orden de los stack.screen en pokedexnavigation. orden correcto:

<Stack.Screen name="Pokedex" component={PokedexScreen} />
      <Stack.Screen name="Pokemon" component={Pokemon} />
```\<Stack.Screen name="Pokedex" component={PokedexScreen} />      \<Stack.Screen name="Pokemon" component={Pokemon} />

Gustavo Pú

podemos utilizar variables de entornos💚

Stephano Apiolaza

Buenas tardes, realice todo el codigo y lo revise con los recursos, y me arroja el siguiente error: ERROR [TypeError: undefined is not an object (evaluating 'pokemonDetails.type[0]')]

Espero poder tener alguna respuesta, gracias

Jhunior Eduardo Guevara Lázaro

pusiste : ‘pokemonDetails.type[0]’ pero es en prural: ‘pokemonDetails.types[0]’

CESAR AUGUSTO TOBON CUARTAS

[TypeError: Cannot convert undefined value to object]

Porque me sale este error al correr la app, y no me arroja la informacion de los pokemon.

jilma Jemimah Cavero de Arango

Hola, tengo un problema, no logro visualizar con el console.log nada en la pantalla de la consola, a pesar de que no sale ningún error, limpia la solución, volví a cargar y nada. Alguién puede apoyarme con alguna otra opción ?

Francisco Antonio Rivera Viveros

Hola jecma puede que haya un error en tú código te recomiendo usar la técnica del patito de hule !

Julian Andres Florez Rios

Hola, es posible que tengas configurada tu consola para que no aparezca toda la información. Esto lo puedes cambiar dando click en esta opción y colocar predeterminado o información.

Sino, puede ser un error en tu código, coloca un alert en tu archivo JS para saber si está enlazado correctamente.

Jorge Arteaga

En vez de "for" se podria usar "map" o es para usos distintos?

Agustín Navarro Galdon

Profesor

Un for no tiene por qué devolver nada, pero el map siempre debe devolver algo.

Tulio Junior Rangel Nuñez

Para los que son fanáticos de Pokémon, sabrán que hay pokémon que tienen 2 tipos y lo lógico sería hacer esto:

types: [
				pokemonDetails.types[0].type.name,
				pokemonDetails.types[1].type.name,
]

Sin embargo, al haber pokémon que solo tienen un tipo la aplicación arrojará un error. Mi solución fue la siguiente:


types: [
            pokemonDetails.types[0].type.name,
            pokemonDetails.types.length > 1
              ? pokemonDetails.types[1].type.name
              : null,
          ],

Aunque esto hace los pokémon que tienen un solo tipo tengan un segundo tipo null. Si a alguien se le ocurre una mejor forma sería genial :D

María Antonia Lobato

Hola, no salgo de ahí. He revisado y comparado el código con el del profe pero, me sigue saliendo ese error y no puedo avanzar. Ayuda porfa...: (

Hans Trauwitz

sin ver tu codigo se me ocurre que el problema esta en el api => pokemon ahi en la función getPokemonApi declaramos url asi: const url = ${API_HOST}pokemon?limit=20&offset=0; por ahi deberia estar el problema , por que en tui liena 14 que es la otra funcion, estas usando url y es donde rompe espero te sirva

no está bien estructurado tu url, tendrias que hacer un console.log(url) para ver que tiene dentro y así construirlo bien.

Federico Noya

Se puede unificar el archivo de la API para hacerlo mas reutilizable.

export async function callApi(url) {
  try {
    const response = await fetch(url);
    const result = await response.json();
    return result;
  } catch (error) {
    throw error;
  }
}

export async function getPokemonsApi() {
  const url = `${API_HOST}/pokemon?limit=20&offset=0`;
  return fetchApi(url);
}

export async function getPokemonDetailsByUrlApi(url) {
  return fetchApi(url);
}

Kevin Parra Lopez

Hola buenas, tengo todo el codigo como muestra el profesor, pero me arroja error; no puede encontrar la variable url.

jose daniel corredor zambrano

Hola Stephano, esta funcion esla que esta en el archivo de la carpeta api, la que el profesor tienen nombrada como getPokemonsApi() fijate bien que este recibiendo la url bien en la tercera linea, y que estes usando las comillas francesas creo se llaman para poder concatenar los strings

export const getAllCharacters = async(page: number = 1): Promise<AllCHaracters | Error> => {
    try {
        const url = `${apiInfoUrl}/people/?page=${page}`
        const response = await fetch(url);
        const result = await response.json();
        return result;
    } catch (error) {
        throw error;
    }
}

Información de todos los Pokemon

Información de todos los Pokemon

Información de todos los Pokemon

Progreso del curso

Inicializando la app

API y listado de Pokemon

Detalles del Pokemon

Información de todos los Pokemon

Información de todos los Pokemon

Comentarios

Comentarios