Angular中如何等待并发HTTP Put请求完成后发起后续请求？

要实现等待所有并发分片上传完成后再发起后续HTTP请求，你需要调整RxJS的流处理逻辑，确保能捕获到所有上传请求的完成状态，具体修改如下：

核心思路 #

• 先将每个上传请求的Observable过滤为仅关注最终响应事件（忽略进度事件），让每个请求仅在完成时发出一次值。
• 保留mergeAll(5)控制并发数，维持同时最多5个上传请求执行。
• 用toArray()收集所有上传请求的响应结果，当所有请求完成时，它会发出一个包含所有响应的数组。
• 最后通过concatMap发起后续HTTP请求（若不需要保留前序响应，也可使用switchMap）。

修改后的代码 #

const uploadObservables = requestData.map(x => 
  this.blobService.addNewVideo(x.uniqueName, x.chunk, x.base64BlockId)
    .pipe(
      // 单独处理进度更新，不影响后续完成逻辑
      tap(event => {
        if (event.type === HttpEventType.UploadProgress) {
          this.progress = Math.round((event.loaded / event.total!) * 100);
          console.log(`uploaded! ${this.progress}%`);
        }
      }),
      // 仅保留上传完成的响应事件
      filter(event => event.type === HttpEventType.Response),
      // 提取响应体简化后续处理
      map(event => event.body)
    )
);

from(uploadObservables).pipe(
  mergeAll(5), // 维持5个并发上传
  toArray(), // 等待所有上传完成，收集全部响应
  // 发起后续HTTP请求
  concatMap(allUploadResults => {
    // 替换为你的实际后续请求逻辑
    return this.yourHttpService.your后续请求方法();
  })
).subscribe({
  next: (finalResponse) => {
    console.log('所有上传完成，后续请求响应:', finalResponse);
  },
  error: (err) => {
    console.error('上传或后续请求出错:', err);
  },
  complete: () => {
    console.log('全流程执行完毕');
  }
});

补充说明 #

如果不需要收集所有上传的响应结果，也可以用reduce替代toArray()，仅跟踪完成数量，逻辑更轻量化：

from(uploadObservables).pipe(
  mergeAll(5),
  reduce((count) => count + 1, 0), // 统计完成的上传数量
  concatMap(completedCount => {
    console.log(`共完成${completedCount}个分片上传`);
    return this.yourHttpService.your后续请求方法();
  })
)

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