2

Estoy teniendo un problema estoy llamando a mi funcion getPokemons que trae información de una api, mi problema es que quiero hacer un array que al finalizar la segunda función createPokemons me retorne el arreglo generado. Pero no lo hace.

const getPokemons = async () => {
    const res = await fetch('https://pokeapi.co/api/v2/pokemon?limit=20');
    const data = await res.json();

    function createPokemon(results) {
      const pkArray = []; // Retornar este arreglo.

      results.forEach(async (pokemon) => {
        const pokeRes = await fetch(`https://pokeapi.co/api/v2/pokemon/${pokemon.name}`);
        const pokeData = await pokeRes.json();

        pkArray.push(pokeData);
      });
      
      return pkArray;
    }

    const pkData = createPokemon(data.results);
    console.log(pkData) // [];
  };
4
  • 1
    Que interesante, parece que el push se esta quedando en el scope de la callback de forEach, pues es una promesa async/await. El problema sería cómo sacar esa operación de ahí. Saludos
    – g.4
    Commented el 30 ago. 2021 a las 19:05
  • Funfact, copie tu código de ejemplo tal cual y lo probé en la consola de Chrome y me respondió, no sé si se pueda deber a un tema de latencia o de plano la petición no está siendo manejada de manera adecuada. Saludos
    – Malva
    Commented el 30 ago. 2021 a las 19:30
  • @MartinManriquez, es muy probable que el navegador te esté trolleando, sucede a menudo. El motor de JS del navegador no tiene el mismo comportamiento que puedes esperar del motor de Nodejs o de Firefox. Cada motor se comporta diferente, sobre todo en temas asíncronos. Commented el 30 ago. 2021 a las 19:37
  • En todo caso, para realizar operaciones asíncronas con iterables, existe el método Promise.all(). Commented el 30 ago. 2021 a las 19:43

1 respuesta 1

4

Cambia el forEach por un for

 for (let i = 0; i < results.length; i++) {
        const pokeRes = await fetch(`https://pokeapi.co/api/v2/pokemon/${pokemon.name}`);
        const pokeData = await pokeRes.json();
        pkArray.push(pokeData);
    }

La razón: el forEach ejecutará una función asíncrona para cada elemento del arreglo lo que hace más difícil hacer la espera con async/await. En cambio el for se ejecutará de forma secuencial haciendo la espera correspondiente a cada petición.


Quedaría así:

const getPokemons = async () => {
    const res = await fetch('https://pokeapi.co/api/v2/pokemon?limit=20');
    const data = await res.json();

    async function createPokemon(results) {
        const pkArray = []; // Retornar este arreglo.

        for (let i = 0; i < results.lenght; i++) {
            const pokeRes = await fetch(`https://pokeapi.co/api/v2/pokemon/${pokemon.name}`);
            const pokeData = await pokeRes.json();

            pkArray.push(pokeData);
        }

        return pkArray;
    }

    const pkData = await createPokemon(data.results);
    console.log(pkData) // [];
};
1
  • Entonces debemos evitar el uso de forEach en operaciones asincrónicas, parece un patrón complicado, saludos
    – g.4
    Commented el 31 ago. 2021 a las 2:10

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.