Angular 12中循环内异步函数的Await未等待问题

核心问题 #

你这段代码的关键问题是外层for循环没有等待内部异步操作完成，同时存在几处语法错误，导致异步获取的图片URL无法正确存入对象：

• 外层循环里的自执行异步函数未被await，循环会直接继续执行，不等getDownloadURL返回结果
• if条件用了赋值运算符=，应该是全等判断===
• 字符串引号不匹配（"IMAGE_NAME'和imageURL']）
• 错误使用this.o，应该用局部变量o（已声明let o = {}）

修复后的代码 #

// 将整个逻辑包裹在异步函数中
async function processData() {
  for (let x = 0; x < data.length; x++) {
    let o = {};
    for (let y = 0; y < headerRow.length; y++) {
      const titledata = headerRow[y].trim();
      const csvdata = data[x][y].trim();
      // 修正条件判断与引号格式
      if (titledata === "IMAGE_NAME") {
        o['imageName'] = csvdata;
        const path = `items/${o['imageName']}`;
        const storageRef = ref(this.storage, path);
        // 等待URL获取完成后再赋值
        o['imageURL'] = await getDownloadURL(storageRef);
      }
    }
    // 在此处添加保存o到数据库的逻辑，此时imageURL已存在
    // await saveToDatabase(o);
  }
}

// 调用异步函数执行逻辑
processData();

优化补充（并行处理） #

如果希望提高效率，可改用Promise.all并行处理所有条目：

async function processDataParallel() {
  // 生成所有异步处理的Promise实例
  const promises = data.map(async (row) => {
    let o = {};
    for (let y = 0; y < headerRow.length; y++) {
      const titledata = headerRow[y].trim();
      const csvdata = row[y].trim();
      if (titledata === "IMAGE_NAME") {
        o['imageName'] = csvdata;
        const path = `items/${o['imageName']}`;
        const storageRef = ref(this.storage, path);
        o['imageURL'] = await getDownloadURL(storageRef);
      }
    }
    return o;
  });
  
  // 等待所有异步操作完成
  const processedObjects = await Promise.all(promises);
  
  // 批量保存到数据库
  // await batchSaveToDatabase(processedObjects);
}

processDataParallel();

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