0
let urlPokemon = []; // variable donde quiero almacenar los nombres para usarlos despues

// funcion que agrega los nombres al array urlPokemon

const getPokemonURL=async()=>{

    const req = await fetch('https://pokeapi.co/api/v2/pokemon');
    const data = await req.json();

    const {results} = data // uso desestructuración para acceder a results directamente

    
    results.forEach(element => {
        
        urlPokemon.push(element.name) //en cada vuelta, almaceno el nombre en urlPokemon
        console.log(element.name) //aparece en la consola
    });


}

getPokemonURL();

console.log(urlPokemon) //hasta aquí todo bien, se muestra el array

// PROBLEMAS

console.log(urlPokemon[0]) //muestra undefined

console.log(urlPokemon.length) //muestra 0

La funcion getPokemonURL() debe almacenar los resultados (nombres) que obtiene de la API pokemon en el array urlPokemons, lo cual "no hace" y lo pongo entre comillas porque en la consola me muestra los datos del array urlPokemons, pero no me deja recorrer, todas sus posiciones tienen undefined, y su length es 0, pero en la consola me muestra datos

Máquina el que me de una mano

0

2 respuestas 2

0

const getData = async () => {
  const url = "https://pokeapi.co/api/v2/pokemon";
  const resp = await fetch(url);
  const data = await resp.json();

  return data;
};

let urlPokemon = getData().then((res) => {
  console.log(res.results);
});

0

let urlPokemon no es parte del scope en la función getPokemonURL() y al resolver la promesa devuelta (que no se hace), siempre será undefined. ❌

Se puede entender esto si hace console.log(urlPokemon) a su código luego del push de nombres, pues ahí tiene acceso a urlPokemon dentro de la función por lo cual por fuera será undefined.

...
    results.forEach(element => {
            
             urlPokemon.push(element.name) 
        });
         console.log(urlPokemon) 
...

Entendiendo esto, puede pasar urlPokemon al scope de la función y ser retornada.✔️

const getPokemonURL = async () => {
 // try catch para el manejo de errores
  try {
    let urlPokemon = [];
    const req = await fetch("https://pokeapi.co/api/v2/pokemon");
    const data = await req.json();

    const { results } = data;

    results.forEach((element) => {
      urlPokemon.push(element.name);
    });
    return urlPokemon;
  } catch (error) {
    console.log(error);
  }
};

Debe señalarse que por ser función asíncrona devolverá un promesa. Entonces puede ser resulta con una Closure asíncrona o marcará Promise { pending }. Podría también resolver con: then() u otra función.

(async () => {
  console.log(await getPokemonURL());
})();
1
  • Gracias por responder. ¿Entonces las promesas deben ser "consumidas" con then o clausuras asíncronas, pero no puedo almacenar el valor de una promesa que viene de un código sincrono en un código asíncrono?? Commented el 28 ago. 2022 a las 11:50

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