Angular中使用RxJS订阅多个独立Observable并在全部完成时触发通知

要实现并行发起多个独立API请求，待所有请求完成后设置布尔变量的需求，RxJS的forkJoin操作符是最佳选择——它专门用于处理多个Observable并行执行，仅当所有Observable都完成时，才会一次性返回所有请求的结果。

实现步骤与代码示例 #

1. 导入依赖：需要导入HttpClient用于发起请求，以及RxJS的forkJoin操作符。
2. 定义请求集合：将所有API请求的Observable存入数组，无需提前订阅。
3. 订阅forkJoin结果：在回调中处理所有响应数据，最后设置标记变量。
4. 错误处理：捕获任意请求失败的情况，按需处理状态。

import { Component, OnInit } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { forkJoin } from 'rxjs';

@Component({
  selector: 'app-data-loader',
  templateUrl: './data-loader.component.html',
  styleUrls: ['./data-loader.component.css']
})
export class DataLoaderComponent implements OnInit {
  // 标记所有请求是否完成
  isAllRequestsCompleted = false;
  // 存储各请求返回的数据
  responseData1: any;
  responseData2: any;
  responseData3: any;
  responseData4: any;
  responseData5: any;

  constructor(private http: HttpClient) { }

  ngOnInit(): void {
    // 定义所有并行请求的Observable数组
    const apiRequests = [
      this.http.get('你的API地址1'),
      this.http.get('你的API地址2'),
      this.http.get('你的API地址3'),
      this.http.get('你的API地址4'),
      this.http.get('你的API地址5')
    ];

    // 并行执行所有请求，等待全部完成
    forkJoin(apiRequests).subscribe({
      next: (allResponses) => {
        // 按请求顺序取出每个响应的数据
        this.responseData1 = allResponses[0];
        this.responseData2 = allResponses[1];
        this.responseData3 = allResponses[2];
        this.responseData4 = allResponses[3];
        this.responseData5 = allResponses[4];

        // 所有请求完成后设置布尔变量
        this.isAllRequestsCompleted = true;
      },
      error: (error) => {
        // 处理任意请求失败的情况
        console.error('API请求出错:', error);
        // 可根据业务需求设置状态，比如失败时标记为false
        this.isAllRequestsCompleted = false;
      }
    });
  }
}

关键说明 #

• forkJoin会同时发起所有请求，完全符合你“无需等待第一个请求完成再发起第二个”的要求。
• 只有当所有HTTP请求都成功完成时，才会进入next回调；如果任何一个请求失败，会直接触发error回调。
• 对于HTTP GET这类“仅发射一次数据就完成”的请求，forkJoin是最匹配的操作符；如果你的请求会多次发射数据（如WebSocket），则需要改用combineLatest等其他操作符。

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