如何等待所有异步Http POST请求完成后仅对数组执行一次排序

实现方案 #

完全可以实现所有请求完成后仅执行一次排序，你当前用的是Angular的HttpClient，返回值是RxJS的Observable对象，直接用RxJS内置的forkJoin操作符即可，这是并行等待多个Observable全部执行完成的标准方案。

具体实现步骤

1. 先收集所有POST请求的Observable对象，不要提前调用subscribe：

import { forkJoin, of } from 'rxjs';
import { catchError } from 'rxjs/operators';

// 你的请求参数列表，按实际场景替换
const requestBodyList = [body1, body2, body3];
// 存储所有请求Observable的数组
const postObservers = [];

requestBodyList.forEach(body => {
  // 构造单个POST请求Observable，可按需加单个请求的错误捕获
  const singlePost$ = this.http.post(TGT_IP, body, {responseType: 'arraybuffer'}).pipe(
    // 可选：单个请求报错时捕获，避免影响其他请求的结果返回
    catchError(err => {
      console.log("单个POST请求报错", err);
      // 返回自定义的错误占位值，后续统一处理时过滤即可
      return of(null);
    })
  );
  postObservers.push(singlePost$);
});

2. 用forkJoin订阅所有请求，统一处理结果：

forkJoin(postObservers).subscribe({
  // 所有请求都完成后才会触发next回调
  next: (allResponseList) => {
    console.log("所有POST请求执行完成，返回结果列表：", allResponseList);
    // 1. 先统一处理所有返回值，比如过滤错误占位值、把数据存入目标数组
    const validResults = allResponseList.filter(item => item !== null);
    validResults.forEach(res => {
      // 把返回值插入你的目标数组，对应你原来单个请求success回调里的逻辑
      yourTargetArray.push(res);
    });
    // 2. 仅执行一次排序
    yourTargetArray.sort(/* 你的排序逻辑 */);
  },
  error: (globalErr) => {
    // 如果你没给单个请求加catchError，任意一个请求报错都会触发该回调，其余请求结果无法获取
    console.log("请求流程发生错误", globalErr);
  },
  complete: () => {
    console.log("整个请求流程处理完毕");
  }
});

注意事项

• 默认配置下forkJoin需要所有传入的Observable都正常complete才会返回结果，任意一个请求抛出未捕获的错误都会直接中断整个流程，拿不到其他请求的结果。如果需要兼容部分请求失败的场景，必须给单个请求加上catchError做容错处理。
• 最终返回的allResponseList顺序和你传入postObservers数组的请求顺序完全一致，和请求实际返回的先后顺序无关。

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