使用async/await时函数提前返回，forEach外部无法获取API数据

嘿，我来帮你搞定这两个异步处理的坑！咱先拆解下问题根源，再给你实用的解决方案～

问题根源：为啥forEach和async/await合不来？ #

1. 无法阻止函数提前返回：forEach是个“急性子”，它会立刻遍历完所有元素，根本不会等每个async回调里的await fetch完成。外层函数会直接往下走，导致你还没拿到API数据，函数就已经返回了。
2. forEach外部拿不到收集的数据：async回调里的代码都是异步执行的，当你在forEach之后直接访问startingPlayers时，那些API请求还在排队呢，数组自然是空的。

解决方案1：用for...of循环（顺序执行） #

这个方法最直观，for...of能和await完美配合，每次循环都会等当前的API请求完成后再进行下一次，保证顺序执行，数据也能正确收集：

const gameStrings = ['LAA-NYM', 'LAA-TB', 'NYY-HOU'];
const startingPlayers = [];

// 把逻辑包在async函数里
async function fetchStartingPlayers() {
  // 用for...of遍历gameStrings
  for (const element of gameStrings) {
    // 等待API请求完成，注意这里要正确传递参数到API
    const response = await fetch(`fakeapi.com?game=${element}`);
    // 别忘了解析响应成JSON
    const query = await response.json();
    
    // 遍历多层结构收集数据
    query.gamestartinglineup.teamLineup.forEach(team => {
      team.actual.starter.forEach(player => {
        startingPlayers.push(player); // 把需要的球员数据push进去
      });
    });
  }
  
  // 这里所有请求都完成了，startingPlayers已经填满
  console.log('收集到的首发球员:', startingPlayers);
  return startingPlayers;
}

// 调用函数，在then里处理最终结果
fetchStartingPlayers().then(players => {
  // 这里可以放心使用收集到的数据
  console.log('最终结果:', players);
});

解决方案2：用Promise.all+map（并行执行） #

如果你的API请求不需要按顺序执行，这个方法效率更高——所有请求同时发起，等全部完成后再合并结果：

const gameStrings = ['LAA-NYM', 'LAA-TB', 'NYY-HOU'];

async function fetchStartingPlayers() {
  // 用map把每个gameString转换成一个异步Promise
  const playerPromises = gameStrings.map(async element => {
    const response = await fetch(`fakeapi.com?game=${element}`);
    const query = await response.json();
    
    // 收集当前比赛的所有首发球员
    const currentGamePlayers = [];
    query.gamestartinglineup.teamLineup.forEach(team => {
      team.actual.starter.forEach(player => {
        currentGamePlayers.push(player);
      });
    });
    return currentGamePlayers;
  });
  
  // 等待所有Promise完成，得到一个二维数组
  const allPlayersArrays = await Promise.all(playerPromises);
  // 把二维数组转成一维，得到所有首发球员
  const startingPlayers = allPlayersArrays.flat();
  
  console.log('收集到的首发球员:', startingPlayers);
  return startingPlayers;
}

fetchStartingPlayers().then(players => {
  console.log('最终结果:', players);
});

关键总结 #

• 绝对别在forEach里用async函数！它完全不处理异步等待，只会让你踩坑。
• 优先选for...of（需要顺序执行）或者Promise.all+map（需要并行提升效率）。
• 一定要在async函数内部、或者then回调里访问收集到的数据，确保所有异步操作都完成了。

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