fetch异步存数组后控制台显空但含对象，索引访问返回undefined问题

核心原因：异步操作的执行时序问题 #

你遇到的所有异常都源于fetch是异步操作——循环里发起的20个请求并不会阻塞后续代码执行，当你调用console.log打印数组时，所有请求都还没返回数据，数组自然是空的。

为什么控制台显示空但展开后有内容？

浏览器控制台针对引用类型（比如数组）有特殊的“快照延迟更新”机制：打印瞬间它会显示当时的空数组状态，但实际保存的是数组的内存引用。等异步请求完成、数组被填充后，你展开控制台的数组项时，它会读取内存里的最新值，所以能看到内容，但打印那一刻数组确实是空的。

为什么通过索引访问元素返回undefined？

当你执行console.log(pokeName[0])这类操作时，异步请求还没完成，数组里根本没有任何元素，自然返回undefined。

解决方案 #

下面提供两种常用的修复方式，确保所有数据加载完成后再处理和打印：

方案1：用async/await配合顺序请求（逻辑更直观）

把请求逻辑放在async函数里，每次等待单个请求完成后再继续循环，保证数组在打印前已被完全填充：

let pokeName = [];
let pokeId = [];
let pokeImg = [];
let pokeType = [];
let pokeMove = [];

async function fetchPokemons() {
  for (let i=1; i<21; i++) {
    const response = await fetch(`https://pokeapi.co/api/v2/pokemon/${i}/`);
    const data = await response.json();
    
    pokeId.push(data.id);
    pokeName.push(data.name);
    pokeType.push(data.types[0].type.name);
    pokeMove.push(data.moves[0].move.name);
    pokeImg.push(data.sprites.front_default);
  }
  
  // 所有请求完成后再执行打印
  console.log(pokeName);
  console.log(pokeId);
  console.log(pokeImg);
  console.log(pokeMove);
  console.log(pokeType);
  
  // 此时通过索引访问也能拿到正确值
  console.log(pokeName[0]); // 输出bulbasaur
}

fetchPokemons();

方案2：用Promise.all并行请求（效率更高）

如果不想逐个等待请求，可以同时发起所有请求，用Promise.all等待全部完成后统一处理数据：

async function fetchPokemons() {
  // 生成包含所有请求Promise的数组
  const pokemonPromises = Array.from({length:20}, (_, index) => 
    fetch(`https://pokeapi.co/api/v2/pokemon/${index+1}/`).then(res => res.json())
  );
  
  // 等待所有请求完成，拿到所有数据
  const allPokemonData = await Promise.all(pokemonPromises);
  
  // 统一提取数据到对应数组
  const pokeName = allPokemonData.map(data => data.name);
  const pokeId = allPokemonData.map(data => data.id);
  const pokeType = allPokemonData.map(data => data.types[0].type.name);
  const pokeMove = allPokemonData.map(data => data.moves[0].move.name);
  const pokeImg = allPokemonData.map(data => data.sprites.front_default);
  
  // 打印处理后的结果
  console.log(pokeName);
  console.log(pokeId);
  console.log(pokeImg);
  console.log(pokeMove);
  console.log(pokeType);
}

fetchPokemons();

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