PokeAPI图片展示异常求助：名称查询报错、编号查询及切换问题

问题1：输入宝可梦名称时报错 #

• 核心原因：PokeAPI要求宝可梦名称必须为小写英文，输入大写、中文或不存在的名称会返回404；同时未处理请求失败的异常场景。
• 修复方案：
  1. 自动将输入内容转为小写：const query = input.value.trim().toLowerCase();
  2. 添加异常捕获逻辑，处理请求失败的情况。

问题2：输入编号时需点击两次才显示图片 #

• 核心原因：事件处理中未及时获取最新输入值，或DOM更新顺序错误（比如先读取旧值再执行请求）。
• 修复方案：每次点击查询按钮时，立即读取当前输入框的最新值，请求成功后直接更新DOM，不依赖中间变量的延迟同步。

问题3：切换查询时显示前一个宝可梦的编号 #

• 核心原因：异步请求的竞态问题——快速切换查询时，旧请求可能晚于新请求返回，导致旧数据覆盖新数据。
• 修复方案：用AbortController在发起新请求前取消旧请求，确保只有最新请求的结果生效。

完整修复代码示例 #

HTML代码

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>宝可梦查询</title>
</head>
<body>
    <div>
        <input type="text" id="pokeInput" placeholder="输入名称或编号">
        <button id="searchBtn">查询</button>
    </div>
    <div id="pokeInfo">
        <p>编号: <span id="pokeId"></span></p>
        <img id="pokeImg" alt="宝可梦图片" style="width: 200px;">
    </div>

    <script src="app.js"></script>
</body>
</html>

JavaScript代码

const input = document.getElementById('pokeInput');
const searchBtn = document.getElementById('searchBtn');
const pokeIdSpan = document.getElementById('pokeId');
const pokeImg = document.getElementById('pokeImg');
let abortController = null;

searchBtn.addEventListener('click', async () => {
    const query = input.value.trim().toLowerCase();
    if (!query) {
        alert('请输入宝可梦名称或编号');
        return;
    }

    // 取消旧请求，避免竞态问题
    if (abortController) abortController.abort();
    abortController = new AbortController();

    try {
        const response = await fetch(`https://pokeapi.co/api/v2/pokemon/${query}`, {
            signal: abortController.signal
        });

        if (!response.ok) throw new Error('找不到该宝可梦');

        const data = await response.json();
        // 同步更新DOM
        pokeIdSpan.textContent = data.id;
        pokeImg.src = data.sprites.front_default;
        pokeImg.alt = data.name;
    } catch (error) {
        // 忽略请求被主动取消的情况
        if (error.name !== 'AbortError') {
            alert(error.message);
            // 清空旧数据
            pokeIdSpan.textContent = '';
            pokeImg.src = '';
            pokeImg.alt = '';
        }
    }
});

// 可选：支持回车触发查询
input.addEventListener('keydown', e => {
    if (e.key === 'Enter') searchBtn.click();
});

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