I'm trying to fiddle with fetching data from public APIs and then showing that data in a React component, the react part is not important tho, this is primarly a js issue. I'm using

In fact if I try to console log pokemons.length I get 0

What could cause this? Am I doing something wrong in my fetch request?

CodePudding user response：

So, you create an empty array.

You loop through you loop through the array, firing-off a bunch of asynchronous requests that will, as a side-effect, populate the empty array when the promises complete.

You immediately return the array without waiting for the promises to complete.

The requests probably have not even left your machine by the time this happens.

The array is empty at this point.

If instead, you declare your function as async and you map your IDs to a new array of promises, then await them all with Promise.all, then the promises will be able to complete before the function returns, and the resolved value of Promise.all will be an array containing your pokemons.

async function getSomePokemons(IDs) { // note, this is an async function
    const promises = IDs.map((id) =>
        fetch(`https://pokeapi.co/api/v2/pokemon/${id}`)
            .then((res) => {
                if (!res.ok) {
                    console.log(`${id} not found`)
                    // implicitly resolves as undefined
                } else {
                    return res.json()
                }
            })
            .then((data) => (data ? { // data might be undefined
                id: data.id,
                name: data.name,
                image: data.sprites.other.dream_world.front_default
            } : undefined))
    )
    const pokemons = await Promise.all(promises);
    return pokemons;
}