本文详解为何使用多个并行 fetch 请求会导致 Pokémon 列表显示顺序随机，并提供基于 async/await 的同步化加载方案，确保 ID 1→1016 严格有序渲染，无需额外排序。
本文详解为何使用多个并行 `fetch` 请求会导致 pokémon 列表显示顺序随机，并提供基于 `async/await` 的同步化加载方案，确保 id 1→1016 严格有序渲染，无需额外排序。
在构建基于 PokeAPI 的 Pokédex 时，你可能会遇到一个看似“神秘”的现象：每次刷新页面，精灵列表的顺序都不同——有时皮卡丘在妙蛙种子前面，有时却排在后面。这并非数据源问题（PokeAPI 的 /pokemon/{id} 接口本身是确定性的），而是由 JavaScript 异步执行机制引发的经典竞态条件（race condition）。
根本原因在于：你当前使用的是 并行发起 1016 个 fetch 请求（for 循环中无等待），而每个 HTTP 请求的网络延迟、服务器响应时间、客户端解析速度均不一致。即使 i=1 的请求先发出，它也可能比 i=500 的请求更晚返回 JSON 数据。因此 displayPokemon(data) 被调用的顺序完全取决于响应到达的先后，而非 ID 大小——最终 DOM 中的元素插入顺序自然杂乱无章。
✅ 正确解法是将并行请求改为串行可控加载，利用 async/await 确保前一个 Pokémon 数据渲染完成后再请求下一个：
document.addEventListener('DOMContentLoaded', async function () {
const pokemonList = document.querySelector('.pokemon-list');
const pokemonDetails = document.querySelector('.pokemon-details');
// ... [displayPokemon 和 fetchPokemonDetails 函数保持不变] ...
// ✅ 关键修改：使用 async/await 顺序加载
try {
for (let i = 1; i <= 1016; i++) {
const response = await fetch(`https://pokeapi.co/api/v2/pokemon/${i}`);
if (!response.ok) throw new Error(`HTTP ${response.status} for ID ${i}`);
const data = await response.json();
displayPokemon(data);
}
} catch (err) {
console.error('Failed to load Pokémon:', err);
pokemonList.innerHTML = '<p class="error">⚠️ 加载失败，请检查网络或重试</p>';
}
});? 重要说明与最佳实践：
-
无需 .sort()：原代码末尾的 pokemonList.sort(...) 是无效的——pokemonList 是 DOM 元素（），不是数组，该调用会直接报错（且即使修正为 Array.from(...).sort()，也属于“事后补救”，违背了数据驱动原则）。
- 性能权衡提醒：串行加载 1016 个请求会显著延长总加载时间（可能数分钟）。生产环境推荐分页（如每次加载 20 个）或使用 /pokemon?limit=1016 批量获取 ID 列表后并发请求（需配合 Promise.allSettled() + sort() 预处理）。但对学习项目而言，串行方案逻辑最清晰、结果最可靠。
- 错误处理增强：示例中加入了 try/catch 和 HTTP 状态校验，避免单个失败中断全部加载。
通过此重构，你的 Pokédex 每次刷新都将严格按 #1 妙蛙种子 → #2 妙蛙草 → … → #1016 萤光樱 的顺序呈现，既符合用户预期，也为后续功能（如搜索、筛选）奠定稳定的数据基础。
