for循环中使用await关键字拉取应用填充二维数组失效问题咨询

核心触发原因 #

本质是await关键字作用域限制、循环逻辑异常两类问题导致，常见场景如下：

• 场景1：带for循环的代码未放在被async关键字修饰的函数内部。await只能在async函数、或支持顶层await的ES模块环境中使用，若在普通脚本/普通函数中编写该循环代码，运行时会直接抛出语法错误。

  补充：单独执行单次逻辑正常，大概率是测试用的单次代码刚好放在了async函数作用域内，或在浏览器控制台/Node.js REPL这类默认支持顶层await的环境中运行。

• 场景2：若已确认外层加了async修饰，但出现返回结果错乱/数据缺失，是因为普通for循环为串行执行异步请求，只要某一次getSuggestedGameAppsById请求失败抛出异常，整个循环就会直接中断，不会执行后续请求。单独测试时刚好对应请求成功，所以未触发异常。
• 场景3：原循环代码中的length变量未正确赋值，值为undefined或0，导致for循环完全没有执行，自然无结果输出，而单次执行的代码跳过了循环判断直接执行，因此能拿到结果。

修复方案 #

方案1：修正作用域和循环逻辑（解决基础报错问题） #

给外层函数添加async修饰，同时补充异常捕获逻辑避免单条请求失败中断全局，同时确认循环的长度变量取值正确：

// 外层函数添加async修饰
async function fetchFilteredApps() {
  const filteredGameApps: InstalledApp[][] = []; 
  // 直接用数组本身的长度作为循环边界，避免length变量未赋值的问题
  for (let i = 0; i < suggestedGameAppIds.length; i++) {
    try {
      const apps = await getSuggestedGameAppsById(suggestedGameAppIds[i]);
      let filteredApps = apps.filter(
        app => highlyRecommendations.some(highlyRecommendation => highlyRecommendation.id === app.id)
      );
      filteredApps = filteredApps.slice(0,6);
      filteredGameApps[i] = filteredApps;
    } catch (err) {
      // 捕获单条请求异常，按需做降级处理
      console.error(`获取第${i}个推荐应用失败`, err);
      filteredGameApps[i] = [];
    }
  }
  return filteredGameApps;
}

// 调用函数获取最终结果
const appList = await fetchFilteredApps();

方案2：并行请求优化（可选，提升执行效率） #

如果对请求顺序没有要求，可以使用Promise.all一次性发起所有请求，比循环串行await执行速度更快：

async function fetchFilteredApps() {
  // 批量生成所有请求的Promise实例
  const requestPromises = suggestedGameAppIds.map(id => getSuggestedGameAppsById(id));
  // 并行等待所有请求完成
  const allApps = await Promise.all(requestPromises);
  // 统一做过滤裁剪处理
  return allApps.map(apps => {
    const filtered = apps.filter(app => highlyRecommendations.some(item => item.id === app.id));
    return filtered.slice(0,6);
  })
}

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