JavaScript使用Fetch API调用SWAPI时无法读取数组数据如何解决

• 核心是异步代码执行顺序问题：fetch 属于异步API，循环触发10次请求后，JS引擎不会等待请求返回就会立即执行后续的console.log(data[0])，此时所有请求都未完成，data 数组仍为空，自然读取不到成员。
• 直接打印data能看到内容是浏览器控制台的特性：控制台对引用类型的打印会做延迟求值，你点开控制台里的数组时，请求已经完成、数组已经被填充，所以能看到完整内容，但代码执行打印语句的瞬间数组确实是空的。
• 你的原始代码还存在冗余请求问题：https://swapi.boom.dev/api/planets/ 接口单次请求就会返回第一页共10个行星的结果，不需要循环发起10次相同请求。

优化版（单次请求拿全部10个行星数据） #

async function getPlanetNames() {
  const url = 'https://swapi.boom.dev/api/planets/';
  const response = await fetch(url);
  const json = await response.json();
  // 提取所有行星名称
  const data = json.results.map(item => item.name);
  // 所有请求完成后再操作数组，可正常读取成员
  console.log(data);
  console.log(data[0]);
  return data;
}

getPlanetNames();

多并行请求通用方案 #

如果你确实有需要发起多个请求的场景（比如拉取多页数据），使用Promise.all等待所有请求完成后再操作数据：

async function getMultiPagePlanets() {
  const baseUrl = 'https://swapi.boom.dev/api/planets/?page=';
  const requestPromises = [];
  // 示例：拉取前3页的行星数据
  for (let page = 1; page <= 3; page++) {
    const request = fetch(`${baseUrl}${page}`)
      .then(response => response.json());
    requestPromises.push(request);
  }
  // 等待所有请求全部执行完成
  const pageResults = await Promise.all(requestPromises);
  // 整合所有页的行星名称
  const data = pageResults.flatMap(page => page.results.map(item => item.name));
  console.log(data);
  console.log(data[0]);
  return data;
}

getMultiPagePlanets();

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