Order Pokémons from 1 to 20 not a random order

Question

When I run this code it give me a random order of Pokémons. I don't know where is the problem.

Thank you so much.

for (var i = 1; i <= 20; i++) {

    apiPokemon("https://pokeapi.co/api/v2/pokemon/"+i);

    async function apiPokemon(urlPokemon) {

        const response = await fetch(urlPokemon);
        const dataPokemon = await response.json();

        var id = dataPokemon.id;
        var name = dataPokemon.name;

        console.log(id, name);
    }

}

Answer 1

First thing's first: "Why are they coming back in random order?" - Because you are not awaiting each response. Instead you are firing off all 20 async calls which can come back in any order, so that's why they are logging in a random order.

In order to fix this, there are a few changes I'd recommend:

1. Extract your apiPokemon function out of your loop so it doesn't get recreated for each loop iteration
2. Return the entire data object from your apiPokemon function
3. Add all of the apiPokemon requests to an array and await them with Promise.all()
4. Log the output of the Promise.all() and you'll see that they will now always be in correct order

async function apiPokemon(urlPokemon) {
  const response = await fetch(urlPokemon);
  const dataPokemon = await response.json();

  return dataPokemon;
}

async function getPokemon(startIndex, stopIndex) {
  let requests = [];
  for (let i = startIndex; i <= stopIndex; i++) {
    requests.push(apiPokemon("https://pokeapi.co/api/v2/pokemon/"+i)); 
  }
  let pokemonList = await Promise.all(requests);
  for (let pokemon of pokemonList) {
    console.log(pokemon.id, pokemon.name);
  }
}

getPokemon(1, 20)