只在第二次点击中抓取

Question

我的抓取有一个问题。我获取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、输出

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或callback，而不是两者都使用

Answer 2

使用async和await等待结果

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