Angular异步API调用后数组填充完成触发后续操作的问题

异步API调用的执行时序问题：循环中发起的API请求是异步操作，subscribe的回调函数要等API返回数据后才会执行，而循环后的if判断是同步执行的，此时newProducts还没有被填充，自然无法进入判断分支。

使用RxJS的forkJoin操作符，它可以等待所有传入的Observable都完成后，一次性返回所有结果，确保所有产品信息都获取并处理完成后再执行后续逻辑。

修改后的代码示例：

newProducts: any = [];

loadOfferRelated(offer) {
  const products = offer.products;
  // 生成所有API请求的Observable数组，绑定API返回数据与对应产品
  const apiObservables = products.map(product => {
    return this.offerService.apiCall(product.id, product.catalogId)
      .pipe(
        untilDestroyed(this),
        map(data => ({ data, product }))
      );
  });

  // 等待所有API请求完成后统一处理
  forkJoin(apiObservables).subscribe(results => {
    // 批量处理结果并填充数组
    results.forEach(({ data, product }) => {
      this.operationOnArray(data, product);
    });
    
    // 此时数组已填充完成，执行后续逻辑
    if (this.newProducts.length > 0) {
      // 调用你需要执行的后续函数
      // yourNextFunction();
    }
  });
}

operationOnArray(data, product) {
  // 这里编写产品与API数据的合并/处理逻辑
  const processedProduct = { ...product, ...data };
  // 修正原代码错误：推入单个处理后的产品而非原products数组
  this.newProducts.push(processedProduct);
  console.log("this.newProducts", this.newProducts);
}

• forkJoin适合处理多个独立的Observable任务，只有当所有任务都完成时才会触发回调，完美匹配批量获取数据后统一处理的场景。
• 原代码存在两处变量错误：循环内的product.catalogId应为当前遍历的产品属性，operationOnArray中push(products)应改为推入单个处理后的产品，这些错误也会导致数组填充异常，需一并修正。

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