No tienes acceso a esta clase

隆Contin煤a aprendiendo! 脷nete y comienza a potenciar tu carrera

Informaci贸n de todos los Pokemon

6/17
Recursos

Aportes 13

Preguntas 7

Ordenar por:

驴Quieres ver m谩s aportes, preguntas y respuestas de la comunidad?

Otra manera que intente probar fue usando map, tuve algunos problemas pero con Promise.all se puede hacer de igual manera:

const pokemonsArray = await Promise.all(
        response.results.map(async (pokemon) => {
          const pokemonDetails = await getPokemonDetailsByUrlApi(pokemon.url);
          return {
            id: pokemonDetails.id,
            name: pokemonDetails.name,
            type: pokemonDetails.types[0].type.name,
            order: pokemonDetails.order,
            imagen:
              pokemonDetails.sprites.other["official-artwork"].front_default,
          };
        })
      );

dure varias horas buscando un error, pero me di cuenta que utilizaba 鈥渞esult鈥 y era 鈥渞esults鈥 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

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

first commit, jejejeje

Interesante ejercicio, hay algunos conceptos que hay que repasar.

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),
  };
};

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

podemos utilizar variables de entornos馃挌

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 馃槃

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鈥: (

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);
}

Con Promise.all funciona mejor

  const getPokemons = async (filters) => {
    setData({ loading: false, data: [], error: null });

    //Intentamos obtener todos los pokemones usando el filtro especificado
    try {
      const response = await api.pokemons.getAllPokemons(filters);

      //Creamos una promesa para obtener los detalles de cada pokemon
      const pokemonResults = await Promise.all(
        response.results.map(async (pokemon) => {
          const getPokemonsDetails = await api.pokemons.getOnePokemon(
            pokemon.name
          );

          //Retornamos los detalles del pokemon en un objeto con los campos necesarios
          return {
            id: getPokemonsDetails.id,
            name: getPokemonsDetails.name,
            types: getPokemonsDetails.types[0],
            order: getPokemonsDetails.order,
            image: getPokemonsDetails.sprites.other.home.front_default,
          };
        })
      );

      //Actualizamos el estado con los datos obtenidos y cambiamos el loading a false para indicar que ya se complet贸 la petici贸n
      setData({ loading: false, data: pokemonResults });
    } catch (error) {
      //En caso de error mostramos el mensaje en la consola y actualizamos el estado con el error ocurrido
      console.error(error);
      setData({ loading: false, error });
    }
  };

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