for of循环内使用await关键字不生效该如何解决？

你写的for...of循环本身支持串行执行await逻辑，单独执行正常、放在循环里异常通常是以下几个原因导致的：

• 循环内部某一次getGameAppsById请求抛出异常，没有被捕获导致整个逻辑中断。你单独测试只执行了i=0的请求，刚好没有触发错误，而循环执行到i=1/3/4时触发了异常。
• suggestedGameAppIds数组长度不足，比如indexes里包含3/4索引，但suggestedGameAppIds实际没有对应下标的值，传入undefined调用接口返回了不符合预期的结果。
• 你在循环结束后同步访问了gameApps数组，没有等待整个异步逻辑执行完成，拿到的还是初始的空数组。

排查步骤 #

1. 给循环添加异常捕获，打印每个请求的入参和返回结果，确认是否有请求出错：

const gameApps: InstalledApp[][] = [];
const indexes = [0, 1, 3, 4];

for (const i of indexes) {
  try {
    // 打印入参确认是否正确
    console.log(`处理索引${i}，请求ID：${suggestedGameAppIds[i]}`)
    const apps = await getGameAppsById(
      suggestedGameAppIds[i]
    );
    // 打印返回结果确认是否符合预期
    console.log(`索引${i}返回应用数：${apps?.length}`)

    let filteredApps = apps.filter(
      app =>
        !highlyRecommandations.some(highlyRecommandation=> highlyRecommandation.id === app.id)
    );

    filteredApps = filteredApps.slice(0,6);

    if (filteredApps.length < 3) {
      filteredApps = [];
    }
    gameApps[i] = filteredApps;
  } catch (err) {
    console.error(`索引${i}处理失败：`, err)
  }
}

2. 确认你在使用gameApps的位置，是等待整个异步函数执行完成后再访问的，比如如果这段逻辑封装在async function fetchApps()中，调用时需要写await fetchApps()后再读gameApps的值。
3. 如果你不需要按顺序请求接口，可以改用Promise.all并行处理，性能更好，同时避免索引赋值导致的数组空位问题：

// 注意这个写法返回的数组顺序和indexes顺序一致，原写法gameApps[2]会是undefined
const gameApps = await Promise.all(indexes.map(async (i) => {
  const apps = await getGameAppsById(suggestedGameAppIds[i])
  const filteredApps = apps.filter(app => !highlyRecommandations.some(item => item.id === app.id)).slice(0,6)
  return filteredApps.length < 3 ? [] : filteredApps
}))

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