1

Este codigo funciona:

async function pokemons(){
   let pokemons = []
   let res = await fetch("https://pokeapi.co/api/v2/pokemon")
   let json = await res.json()
   
   for (let i = 0; i < json.results.length; i++) {
    let res = await fetch(json.results[i].url)
    pokemon = await res.json()
    
    pokemons.push(pokemon)
   }
   console.log(pokemons);

   let Final = pokemons.map(el => 
    [el.name, el.sprites.front_default])
    console.log(Final);
   }
  pokemons()

Como deberia hacer para obtener el resultado sin usar el settimeout, no logro darme cuenta donde poner asyn/await, o porque el ultimo then no espera al resultado de los anidados...

let pokemons = []
  fetch("https://pokeapi.co/api/v2/pokemon")

   .then(res => res.json())

   .then(json => {
    json.results.forEach(el => {
     fetch(el.url)
      .then(res => res.json())
      .then(json => {
       let pokemon = {
        nombre: json.name,
        imagen: json.sprites.front_default
       };
       pokemons = [...pokemons, pokemon]
      })
    })
   })

   .then(pokemons => console.log(pokemons))

   setTimeout(() => {
   console.log(pokemons);
  }, 1000);

1 respuesta 1

2

Tu primer código funciona, pero no es óptimo. El el fetch con el await dentro del ciclo for se puede mejorar mucho con el Promise.all.

El problema con el fetch y el await dentro del ciclo for es que, cada petición tendrá que esperar a que la anterior se complete para comenzar una nueva. Pides un pokemon, cuando lo recibes, pides otro, cuando lo recibes, pides otro y así sucesivamente. Tienes siempre que estar esperando que la anterior se complete para iniciar la nueva petición.

Con Promise.all inicias TODAS las peticiones de un golpe, y las vas atendiendo a medidas de que cada una se vaya resolviendo. Fíjate que en este caso si la séptima petición se resuelve antes de que la primera, ganas un montón de tiempo, porque no tienes que esperar a que una se complete para que iniciar la otra. Las inicias todas "al mismo tiempo".

Puedes utilizar Promise.all tanto si estás usando la sintaxis clásica como la más moderna, o incluso con una combinación de las dos.

Si lo vas a hacer utilizando la sintaxis básica de promesas no necesitas el async y el await:

fetch("https://pokeapi.co/api/v2/pokemon")
    .then(res => res.json())
    .then(json => Promise.all(json.results.map(el => fetch(el.url))))
    .then(res => Promise.all(res.map(el => el.json())))
    .then(res => {
        let pokemons = res.map(json => {
            return {
                name: json.name,
                url: json.sprites.front_default
            }
        })
        console.log(pokemons)
    })

Alternativamente usando async y await:

const getPokemons = async () => {
    const res = await fetch("https://pokeapi.co/api/v2/pokemon")
    const json = await res.json()
    const pokemonsRequest = json.results.map(el => fetch(el.url))
    const pokemonsResponse = await Promise.all(pokemonsRequest)
    const pokemonsList = await Promise.all(pokemonsResponse.map(el => el.json()))
    const pokemons = pokemonsList.map(json => {
        return {
            name: json.name,
            url: json.sprites.front_default
        }
    })
    console.log(pokemons)
}
getPokemons()

8
  • el tema es que no resuelve mi necesidad de asignar el resultado final a una variable global, ya que fuera del then sigo obteniendo un array vacio. De todos modos no conocia el Promise.all(), aunque mi codigo y tu codigo basado en promesas hacen lo mismo, llenan el array con los datos, el tema es que ninguno de los 2 se puede usar con variables globales Commented el 12 abr. 2022 a las 21:45
  • 1
    Tú puedes dentro del then asignar el valor a una variable global. Si lo que quieres es que una función asincrónica o una promesa te devuelva algo que no sea una promesa, me temo que no es posible.
    – Jaime
    Commented el 12 abr. 2022 a las 21:52
  • 1
    Lectura Recomendada.
    – Jaime
    Commented el 12 abr. 2022 a las 21:59
  • 1
    @HernánGarcia una función asíncrona SIEMPRE devuelve una promesa. Lo que sugeriste en la edición no es válido. Pruébalo tu mismo para que veas lo que te imprime. Obtendrás en la consola una Promise. Tienes que aprender a pensar de manera asíncrona. Haz una función donde pongas todo lo que quieres hacer cuando los datos estén listos, y llámala dentro del .then. Esa es la manera correcta de consumilo.
    – Jaime
    Commented el 12 abr. 2022 a las 22:22
  • 1
    Hernan, la petición puede demorar 0.5 segundos, o puede demorar 2 segundos o puede demorar 20 segundos. Tu no aplicación no debe depender del tiempo que se resuelva algo.
    – Jaime
    Commented el 12 abr. 2022 a las 22:56

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.