Question

仅在第二次点击时获取

2022-06-22

149

javascript frontend fetch-api

我在抓取时遇到了问题。我抓取了 API 到我的项目中，当我尝试使用值显示时，第一次点击时它不起作用。第二次点击时，该函数将运行良好，一切正常。

当我尝试登录抓取函数时，一切正常，但是在显示函数中我收到一个错误：

此外，如果我写入要搜索的 Pokemon 数量并单击进行搜索，它不起作用，但如果我更改它并再次单击，我将获得第一个 Pokemon 值。

Uncaught TypeError: Cannot read properties of undefined (reading 'name')

我正在添加抓取函数和显示函数。如果有人想帮忙，我也可以发送 git 存储库。

let fetetchPokemon = function (inputNum) {
      fetch(`${pokemonApi}` + `${inputNum}`)
        .then((response) => response.json())
    
        // .then((response) => console.log(response))
        .then(
          (response) =>
            (pokemon = new Pokemon(
              response.name,
              response.sprites,
              response.moves,
              response.types,
              response.abilities
            ))
        )
        // .then((pokemon) => console.log(pokemon.name));
        // .then((pokemon) => console.log(pokemon.name))
        .then(displayPokemon());
    };
   
    let displayPokemon = function () {
      pokemonName.innerText = pokemon.name;
      console.log(pokemon.name);
      pokemonImg.src = pokemon.image.front_default;
      displayMoves(pokemon.moves);
      displayType(pokemon.types);
      displayAbilities(pokemon.abilities);
    };

还有一个 bin 可以查看代码： https://jsbin.com/puvotid/edit?html,css,js,output

Answer 1

显示方法必须与变量赋值放在相同的作用域中。因此该方法将如下所示

const fetetchPokemon = function (inputNum) {
  fetch(`${pokemonApi}` + `${inputNum}`)
    .then((response) => response.json())
    .then(
      (response) => {
        pokemon = new Pokemon(
          response.name,
          response.sprites,
          response.moves,
          response.types,
          response.abilities
        );
        
        displayPokemon();
      }
    );
};

正如@Mamoud 在下面回答的那样，您应该单独使用 async/await 或回调，而不是同时使用两者

Answer 2

使用 async 和 await 等待结果。

const fetchPokemon = async function(){
    await fetch(...).then(...)
}

Mahmoud Ibrahiam

2022-06-22