JavaScript for循环不等待.then执行完成的问题处理（Firebase场景）

你遇到的数组为空/填充不全问题本质是JavaScript的异步执行机制：getDownloadURL和getValueKey都是返回Promise的异步方法，你原来的同步循环不会等待这些异步操作执行完成，就直接运行了后续的打印逻辑，此时异步任务还在后台执行，自然拿不到完整的结果。

该方案会在每一轮循环等待当前文件的下载地址获取、内容解析全部完成后，再进入下一轮迭代，适合文件数量较少的场景。

async function loadUserProfileKeys(key) {
  try {
    const storageRef = firebase.storage().ref();
    const initialUserProfilesRef = storageRef.child('InitialUserProfiles');
    const keyResults = [];

    // 等待获取所有文件列表
    const res = await initialUserProfilesRef.listAll();
    for (const itemRef of res.items) {
      console.log("Start for loop");
      // 跳过带特殊符号的文件
      if (/,|&/.test(itemRef.name)) continue;
      
      const pathRef = initialUserProfilesRef.child(itemRef.name);
      // 阻塞等待下载地址获取完成
      const url = await pathRef.getDownloadURL();
      // 阻塞等待文件内容解析完成
      const value = await getValueKey(url, key);
      keyResults.push(value);
    }

    console.log("End for loop");
    console.log(keyResults);
    return keyResults;
  } catch (error) {
    console.log("ERROR");
    console.log(error);
  }
}

// 优化后的getValueKey，async函数不需要手动包装Promise.resolve
async function getValueKey(fileURL, key) {
  try {
    const response = await fetch(fileURL);
    if (response.status !== 200) return undefined;
    const text = await response.text();
    const lines = text.split("\n");
    for (const line of lines) {
      const pairs = line.split(":");
      if (pairs.length === 2 && pairs[0].trim() === key) {
        return pairs[1].trim();
      }
    }
    return undefined;
  } catch (err) {
    console.log('文件解析失败', err);
    return undefined;
  }
}

该方案会同时发起所有文件的异步处理请求，全部执行完成后统一返回结果，整体速度远高于串行方案。你之前尝试的Promise.all写法的问题是没有等待Promise执行完成就直接打印，同时没有过滤掉被忽略的文件，会导致数组出现空项。

async function loadUserProfileKeys(key) {
  try {
    const storageRef = firebase.storage().ref();
    const initialUserProfilesRef = storageRef.child('InitialUserProfiles');
    const res = await initialUserProfilesRef.listAll();

    // 生成所有需要处理的文件的异步任务列表
    const taskList = res.items
      .filter(itemRef => !/,|&/.test(itemRef.name)) // 先过滤掉不需要处理的文件
      .map(async itemRef => {
        const pathRef = initialUserProfilesRef.child(itemRef.name);
        const url = await pathRef.getDownloadURL();
        return getValueKey(url, key);
      });
    
    // 等待所有异步任务执行完成
    const keyResults = await Promise.all(taskList);
    // 可选：过滤掉解析失败/未找到key的空结果
    // const validResults = keyResults.filter(Boolean);

    console.log("所有文件处理完成");
    console.log(keyResults);
    return keyResults;
  } catch (error) {
    console.log("ERROR");
    console.log(error);
  }
}

因为loadUserProfileKeys是async函数，外部调用时也需要用await或者.then()才能拿到最终结果：

// 调用示例
loadUserProfileKeys('userAge').then(results => {
  // 这里处理拿到的最终结果
  console.log('所有查询结果：', results);
})

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