Angular中forkJoin完成每个Observable后如何实时更新UI？

我参考了一篇关于forkJoin多请求调用的内容，写了如下API请求方法：

postdata1(body: any): Observable<any> {
  // 接收body参数
  // 若该请求需要特殊请求头则在此声明，否则用全局请求头
  return this.http.post(this.baseUrl + 'dictionary/getrae', body, {
    headers: headers,
    responseType: 'text',
    withCredentials: true,
  });
}

现在需要发起约20个这类请求，希望实时刷新状态栏，显示完成百分比和已完成的请求。原本计划每个请求完成后增加百分比并更新提示信息，但因为用了service，UI无法实时更新——状态栏会一直停在0%，直到所有请求完成后直接跳至100%。

需求：如何在service中实现每个post请求完成时立即更新UI，而非等所有请求完成后再统一更新？

期望的UI更新效果（步骤顺序无关，finish!必须在最后）：

step 1 done
step 5 done
step 2 done
step 3 done
step 6 done
step 4 done
finish!

当前使用的forkJoin代码：

nuevoenviar() {
    this.palabrabuscada = $("#inputword").val();
    const body = JSON.stringify(this.palabrabuscada);

    let data1$ = this.dataService.get1(body);
    let data2$ = this.dataService.get2(body);
    let data3$ = this.dataService.get3(body);
    let data4$ = this.dataService.get4(body);
    let data5$ = this.dataService.get5(body);
    let data6$ = this.dataService.get6(body);

    return forkJoin([data1$, data2$, data3$, data4$, data5$, data6$]).subscribe((responses) => {

      this.statusfinish = "step 1...";
      this.result1 = responses[0];
      this.porcentaje += this.porcentajeparte;

      this.statusfinish = "step 2...";
      this.result2 = responses[1];
      this.porcentaje += this.porcentajeparte;

      this.statusfinish = "step 3...";
      this.result3 = responses[2];
      this.porcentaje += this.porcentajeparte;

      this.statusfinish = "step 4...";
      this.result4 = responses[3];
      this.porcentaje += this.porcentajeparte;

      this.statusfinish = "step 5...";
      this.result5 = responses[4];
      this.porcentaje += this.porcentajeparte;

      this.statusfinish = "step 5...";
      this.result6 = responses[5];
      this.porcentaje += this.porcentajeparte;

      this.finalizar(); // 在这里调用收尾方法
    });
}

问题核心是forkJoin的特性：它只会在所有Observable都完成后才一次性返回所有结果，你的UI更新逻辑都堆在这个回调里，自然没法实时响应单个请求的完成状态。

要实现实时更新，得让每个请求完成时单独通知UI，同时跟踪所有请求的完成状态，最后统一触发收尾逻辑。具体步骤如下：

1. 给每个请求绑定步骤标识 #

在每个请求的Observable中，用map操作符把返回结果和对应的步骤编号绑定，订阅时就能明确知道是哪个步骤完成了。

2. 用merge合并所有请求Observable #

merge会同时订阅所有传入的Observable，每个Observable完成时都会立即发出值，正好满足实时更新的需求。

3. 实时统计完成数与百分比 #

在订阅回调中，每收到一个完成的请求，就更新状态栏、累计完成数、计算百分比。

4. 跟踪所有请求完成状态 #

用count操作符统计总完成数，当完成数等于请求总数时，显示finish!并调用收尾方法。

nuevoenviar() {
  this.palabrabuscada = $("#inputword").val();
  const body = JSON.stringify(this.palabrabuscada);
  const totalRequests = 6; // 对应你的6个请求，20个的话改成20
  this.porcentaje = 0;
  this.porcentajeparte = 100 / totalRequests;

  // 给每个请求绑定步骤编号
  const requests = [
    { obs: this.dataService.get1(body), step: 1 },
    { obs: this.dataService.get2(body), step: 2 },
    { obs: this.dataService.get3(body), step: 3 },
    { obs: this.dataService.get4(body), step: 4 },
    { obs: this.dataService.get5(body), step: 5 },
    { obs: this.dataService.get6(body), step: 6 },
  ];

  // 把每个请求Observable转换为包含步骤信息的Observable
  const mappedRequests = requests.map(item => 
    item.obs.pipe(
      map(response => ({ step: item.step, response }))
    )
  );

  // 合并所有Observable，实时处理每个请求的完成事件
  merge(...mappedRequests)
    .pipe(
      // 统计完成的请求数量
      count(),
      // 当所有请求完成时，触发收尾逻辑
      tap(completedCount => {
        if (completedCount === totalRequests) {
          this.statusfinish = "finish!";
          this.finalizar();
        }
      })
    )
    .subscribe(({ step, response }) => {
      // 实时更新UI：标记对应步骤完成，更新百分比
      this.statusfinish = `step ${step} done`;
      this.porcentaje += this.porcentajeparte;
      
      // 把结果存到对应变量（比如result1、result2...）
      this[`result${step}`] = response;
    });
}

补充说明 #

• 如果需要控制并发请求数量（比如20个请求同时发起可能有性能问题），可以用mergeMap并指定并发数，比如mergeMap(item => item.obs.pipe(map(...)), 5)表示同时最多发起5个请求。
• 确保porcentaje和statusfinish是组件的公共属性，能被模板正确绑定（比如用{{ porcentaje | number:'1.0-0' }}%和{{ statusfinish }}显示）。
• 如果请求可能失败，需要添加错误处理，可以在每个请求的pipe里加catchError，避免单个请求失败导致整个流程中断。

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