Почему я не могу console.log этой функции?

Question

let fetchPokemons = async() =>{
    for(let i = 0; i < 50; i++){
        await getPokemon(i);
    }
}


let getPokemon= async id => {
    let response1 = await fetch(`https://pokeapi.co/api/v2/pokemon/${id}`);
    let pokemon = await response1.json();
    pokedex(pokemon);
}

function pokedex(pokemon){
    console.log(pokemon.types)
}

fetchPokemons();

Я пытаюсь создать Pokedex. Насколько я понимаю, этот код выполняет следующее:

Функция FetchPokemon будет запускаться первой. Внутри него будет запускаться getPokemon.

После получения ответа от API будет запущена функция Pokedex.

Поэтому я проверяю, возвращаются ли данные покемонов или нет, с помощью console.logging pokemon.types внутри функции Pokedex.

Так я правильно понял?

Answer 1

API 404, если вы попросите 0-го покемона. 404 вызывает исключение, которое убивает ваш цикл for. Попробуйте с этим:

function pokedex(pokemon) {
  console.log(pokemon.types)
}

async function getPokemon(id) {
  let response1 = await fetch(`https://pokeapi.co/api/v2/pokemon/${id}`);
  let pokemon;
  try { // Catch the 404 or response error if it happens so loop doesn't die
    pokemon = await response1.json();
  } catch (err) {
    console.error(err);
  }
  pokedex(pokemon);
}

async function fetchPokemons() {
  for (let i = 1; i < 5; i++) { // Start at 1 instead of 0
    await getPokemon(i);
  }
}

fetchPokemons();

Answer 2

Это происходит потому, что вы начинаете с индекса 0, а https://pokeapi.co/api/v2/pokemon/0 возвращает 404. Вам нужно изменить 0 на 1:

for(let i = 1; i < 50; i++)

Answer 3

Основная причина вашей проблемы заключается в том, что вы пытаетесь выполнить итерацию несуществующего индекса.

измените его на: let i = 1; i <= 50; i++

Кроме того, нежелание получать обещания не является хорошей практикой. Вы должны добавить await к вашему вызову метода.

await fetchPokemons();