JS模块导出async函数后前端无内容显示问题求助

你的代码核心问题出在fetchPokemon函数的错误处理逻辑上：当函数内部抛出错误时，catch块只做了console.error(error)，但没有重新抛出错误，也没有返回有效内容。这会导致两个关键问题：

• 错误无法传递到main.js的try/catch块，你在main.js里的错误处理完全起不到作用
• 函数出错时会返回一个状态为resolved的Promise，值为undefined，后续main.js里访问data.sprites会触发TypeError，但这个错误可能被浏览器静默处理，或者你没注意到控制台的错误提示

修复步骤 #

1. 修正pokeUtils.js的错误处理 #

移除内部的catch块，或者在捕获错误后重新抛出，让错误能传递到调用方处理：

export async function fetchPokemon(){
    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;
}

如果想在fetchPokemon里先记录错误再抛出，也可以这么写：

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);
        throw error; // 重新抛出错误，让调用方捕获处理
    }
}

2. 在main.js增加空值检查 #

避免data为undefined时访问属性引发报错：

import { fetchPokemon } from "./pokeUtils";

document.getElementById("fetchButton").addEventListener("click", async () => {
    try {
        const data = await fetchPokemon();
        if (!data) return; // 增加空值检查，提前终止逻辑
        const pokemonSprite = data.sprites.front_default;
        const imgElement = document.getElementById("pokemonImg");
        imgElement.src = pokemonSprite;
        imgElement.style.display = "block";
    }
    catch (error) {
        console.log(error);
        // 这里可以添加前端错误提示，比如把错误信息显示给用户
    }
});

为什么之前控制台无输出？ #

• 当你输入空值或无效名称时，fetchPokemon内部的catch已经捕获错误并执行console.error，但如果你没打开控制台或没注意到这条错误，就会误以为控制台为空
• 后续main.js访问data.sprites时，data是undefined，会抛出TypeError，但这个错误可能被浏览器的Promise错误处理机制静默掉

修改后，错误会正确传递到main.js的catch块，控制台会输出清晰的错误信息，你能根据提示调试问题，同时空值检查避免了不必要的报错。

内容的提问来源于stack exchange，提问作者user22975319