我是 JavaScript async/await 的新手，似乎无法理解为什么当我使用 async 和 await 与 JS 模块时我的浏览器不会显示任何内容 - 请提出建议！
export async function fetchPokemon(){
try{
const pokeName = document.getElementById("pokemonName").value.toLowerCase();
if (!pokeName) {
throw new Error("Please enter a Pokemon name!");
}
const response = await fetch(`https://pokeapi.co/api/v2/pokemon/${pokeName}`);
if(!response.ok || response.status === 404){
throw new Error("Could not fetch Pokemon! - " + response.status)
}
const data = await response.json();
return data;
}
catch(error){
console.error(error)
}
}
import { fetchPokemon } from "./pokeUtils";
document.getElementById("fetchButton").addEventListener("click", async () => {
try {
const data = await fetchPokemon();
const pokemonSprite = data.sprites.front_default;
const imgElement = document.getElementById("pokemonImg");
imgElement.src = pokemonSprite;
imgElement.style.display = "block";
}
catch (error) {
console.log(error);
}
});
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Fetch a Pokemon!</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<input type="text" id="pokemonName" placeholder="Enter Pokemon Name?">
<button id="fetchButton">Fetch Pokemon!</button>
<img src="" alt="Pokemon Sprite" id="pokemonImg" style="display: none;">
<script type="module" src="main.js"></script>
</body>
</html>
期望看到 Pokemon Sprite 显示在前端，但它没有显示任何内容，并且控制台是空白的
在
main.js更改第一行
import { fetchPokemon } from "./pokeUtils";
进入
import { fetchPokemon } from "./pokeUtils.js";
它会起作用的！