调用PokeAPI获取宝可梦图片与名称失败，求助排查问题

核心问题分析 #

结合你提供的代码截图和仓库，主要问题集中在API请求逻辑和数据处理/错误捕获两方面：

1. API请求与数据解析错误 #

• 请求URL未统一转小写：PokeAPI要求宝可梦名称必须是小写格式，输入大写字母会直接返回404错误。
• 图片路径提取有误：PokeAPI的官方展示图路径为data.sprites.other["official-artwork"].front_default，若代码里取了不存在的路径，会导致图片加载失败。

2. 搜索函数的异步与错误处理缺失 #

搜索逻辑未正确处理API请求的异步结果，也未捕获请求失败的情况（比如输入不存在的宝可梦名称时，API返回404），导致控制台报错且无用户友好提示。

具体修复代码 #

数据服务文件（如services/pokemonService.js） #

修正请求和数据提取逻辑：

export async function getPokemon(name) {
  try {
    // 统一转小写，匹配API要求
    const response = await fetch(`https://pokeapi.co/api/v2/pokemon/${name.toLowerCase()}`);
    // 捕获HTTP错误状态
    if (!response.ok) throw new Error("找不到对应的宝可梦");
    const data = await response.json();
    return {
      name: data.name,
      // 优先取官方展示图， fallback到普通 sprite
      image: data.sprites.other["official-artwork"].front_default || data.sprites.front_default
    };
  } catch (error) {
    throw error;
  }
}

搜索函数（组件内逻辑） #

完善异步处理和错误提示：

async function handleSearch() {
  const searchValue = searchInput.value.trim();
  if (!searchValue) return;

  try {
    const pokemon = await getPokemon(searchValue);
    // 更新DOM展示数据
    pokemonNameElement.textContent = pokemon.name;
    pokemonImageElement.src = pokemon.image;
    pokemonImageElement.alt = pokemon.name;
  } catch (error) {
    // 给用户明确错误提示
    alert(error.message);
    // 清空错误状态下的展示内容
    pokemonNameElement.textContent = "";
    pokemonImageElement.src = "";
  }
}

额外检查点 #

• 确认DOM元素选择正确：比如pokemonNameElement和pokemonImageElement是否准确获取了页面中的对应元素。
• 跨域问题无需担心：PokeAPI支持CORS，本地开发不会有跨域拦截问题。

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