Angular中如何在循环内等待API响应完成后再进入下一次迭代

你当前的代码里，API调用是异步订阅的，循环不会等待请求完成就直接进入下一次迭代。要实现“等两次API完成并处理Blob后再走下一次循环”的逻辑，可以用async/await配合RxJS的Promise转换工具来改造：

1. 先引入RxJS的转换工具 #

确保在文件顶部导入firstValueFrom（RxJS 7+推荐用这个替代旧的toPromise）：

import { firstValueFrom } from 'rxjs';

2. 改造循环为异步函数内的顺序执行 #

把循环放到一个异步函数里，用for...of遍历数据，每次迭代等待两个API请求完成：

async processWGCNAData() {
  for (const item of data) {
    const study = item.Study;
    const w = new WGCNAData(item.DendroFile, item.CorFile);
    this.exprWGCNAData.set(study, w);

    try {
      // 同时发起两个请求，等待两者都完成
      const [corImgBlob, dendroImgBlob] = await Promise.all([
        firstValueFrom(this.imgService.getWGCNAImgByPath(w.CorImgFile, "png")),
        firstValueFrom(this.imgService.getWGCNAImgByPath(w.DendroImgFile, "png"))
      ]);

      // 保存获取到的Blob
      this.exprWGCNAData.get(study).CorImgBlob = corImgBlob;
      this.exprWGCNAData.get(study).DendroImgBlob = dendroImgBlob;

      // 在这里写对Blob的处理逻辑，此时两个Blob都已就绪
      // do something with the image blobs here
    } catch (error) {
      console.error("图片加载失败:", error);
    }
  }
}

可选：单独处理每个请求的错误 #

如果需要允许单个请求失败、不影响另一个请求的执行，可以拆分await并分别捕获错误：

async processWGCNAData() {
  for (const item of data) {
    const study = item.Study;
    const w = new WGCNAData(item.DendroFile, item.CorFile);
    this.exprWGCNAData.set(study, w);

    // 单独处理相关性图片请求
    try {
      const corImgBlob = await firstValueFrom(this.imgService.getWGCNAImgByPath(w.CorImgFile, "png"));
      this.exprWGCNAData.get(study).CorImgBlob = corImgBlob;
    } catch (error) {
      console.log("Fail to load cor img");
    }

    // 单独处理树状图请求
    try {
      const dendroImgBlob = await firstValueFrom(this.imgService.getWGCNAImgByPath(w.DendroImgFile, "png"));
      this.exprWGCNAData.get(study).DendroImgBlob = dendroImgBlob;
    } catch (error) {
      console.log("Fail to load dendrogram image");
    }

    // 处理Blob的逻辑，即使某个请求失败，也能基于已获取的Blob操作
    // do something with the image blobs here
  }
}

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