如何在TypeScript中实现含For循环与API的异步Promise函数并等待完成？

我正面临一个问题：无法让函数在完成所有API调用与for循环后才返回数据。以下是我的代码：

getListingsImages(sessionID, mlsSearchCriteria){

      this.http.get(this.laconiaBaseURL + "mls/search/" + sessionID + "?" +queryString).subscribe((data)=>{

        listings = data['data'];

         for (let listing of listings) {

          postData.listingImageURL = imageBaseURL + listing.firstImage;
          postData.listingPrice = this.formatter.format(listing.ListPrice).toString();
          postData.listingMLSID = listing.listingKey;
          postData.listingAddress = listing.FullAddress;

          this.http.post(this.imageParserBaseURL, postData, {responseType: 'text'}).subscribe((data)=>{

            this.slides.push({
              data: data,
              type: "image",
              slideHeader: null,
              duration: 10
            });

          });
        }
      });
  }

可以看到代码中有两次HTTP调用，我希望等待列表数据获取完成、for循环迭代完成以及所有POST请求执行完毕后再进行后续操作。目前this.slides是一个全局变量。我尝试过使用回调函数，但理解起来有困难，且现有示例与我的场景不匹配。请问如何修改代码，使其等待所有API调用与for循环完成？

在Angular场景下，利用RxJS操作符可以优雅地管理异步请求的依赖关系，解决嵌套订阅导致的时序问题。以下是具体修改方案：

修改后的代码 #

import { forkJoin, Observable, switchMap, tap, map } from 'rxjs';

// ...

getListingsImages(sessionID, mlsSearchCriteria): Observable<void> {
  return this.http.get(`${this.laconiaBaseURL}mls/search/${sessionID}?${queryString}`).pipe(
    // 拿到GET请求的列表数据后，生成所有POST请求的Observable数组
    switchMap((data: any) => {
      const listings = data['data'];
      const postRequests = listings.map(listing => {
        // 每次循环创建新的postData对象，避免引用覆盖
        const postData = {
          listingImageURL: `${imageBaseURL}${listing.firstImage}`,
          listingPrice: this.formatter.format(listing.ListPrice).toString(),
          listingMLSID: listing.listingKey,
          listingAddress: listing.FullAddress
        };
        return this.http.post(this.imageParserBaseURL, postData, {responseType: 'text'});
      });
      // 等待所有POST请求完成，返回结果数组
      return forkJoin(postRequests);
    }),
    // 所有POST请求完成后，统一更新this.slides
    tap((postResults: string[]) => {
      this.slides = postResults.map(result => ({
        data: result,
        type: "image",
        slideHeader: null,
        duration: 10
      }));
    }),
    // 转换为void类型，仅通知操作完成
    map(() => undefined)
  );
}

调用方式 #

通过订阅函数返回的Observable，即可在所有操作完成后执行后续逻辑：

this.getListingsImages(sessionID, mlsSearchCriteria).subscribe({
  next: () => {
    // 所有API调用、循环执行完毕，this.slides已更新，这里写后续操作
    console.log('所有操作完成，slides准备就绪');
  },
  error: (error) => {
    // 处理请求失败的情况
    console.error('请求出错:', error);
  }
});

关键要点 #

• 避免引用覆盖：循环中必须创建新的postData对象，否则所有POST请求会复用同一个对象的最终值
• forkJoin特性：只有当所有传入的Observable都成功完成时，才会返回结果数组；若任一请求失败，会直接触发错误回调
• RxJS操作符作用：
  • switchMap：将GET请求的结果流切换为POST请求的流集合
  • tap：执行副作用操作（如更新全局变量this.slides），不改变流的内容
  • forkJoin：等待多个Observable全部完成，适合处理并行请求

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