Información de todos los Pokemon

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 “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

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

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

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

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.