Rxjs如何在多个HTTP服务请求全部完成后仅触发一次订阅

你需要通过RxJS组合操作符将多个请求的结果汇总后再下发给订阅者，以下是两种常用实现方案：

方案1：并行请求（性能最优，推荐） #

所有请求同时发起，全部完成后一次性返回结果数组，适合无严格并发限制的场景：

import { forkJoin } from 'rxjs';
import { concatMap } from 'rxjs/operators';

// 函数实现
getDetails() {
  this.role$.pipe(
    concatMap(roles => {
      // 遍历角色数组，生成单个请求的Observable数组
      const requestArr = roles.map(role => this.myService.getDetails(role));
      // 等待所有请求完成，合并结果为数组返回
      return forkJoin(requestArr);
    })
  ).subscribe(resultList => {
    // 此处仅触发一次，resultList为所有请求返回结果组成的数组
    console.log(resultList);
    // 后续业务逻辑
  })
}

说明：forkJoin操作符接收Observable数组作为入参，会等所有内部Observable全部完成后，按请求顺序把结果组合为数组返回。Angular HttpClient返回的请求Observable会在请求结束后自动complete，完全适配forkJoin的触发规则。

方案2：串行请求（可控并发） #

按顺序逐个发起请求，全部完成后返回结果数组，适合需要控制并发、避免请求拥挤的场景：

import { map, concatAll, toArray } from 'rxjs/operators';

// 函数实现
getDetails() {
  this.role$.pipe(
    // 遍历生成请求Observable数组
    map(roles => roles.map(role => this.myService.getDetails(role))),
    // 按顺序串行执行所有请求
    concatAll(),
    // 收集所有单个请求结果，合并为数组后返回
    toArray()
  ).subscribe(resultList => {
    // 此处仅触发一次，resultList为所有请求返回结果组成的数组
    console.log(resultList);
    // 后续业务逻辑
  })
}

原代码问题说明 #

你原有代码存在两处问题：

1. role$发出的是字符串数组，你直接将整个数组作为参数传给getDetails，没有实现遍历每个元素调用接口的逻辑
2. 没有做结果汇总逻辑，直接将单个请求的结果下发给订阅者，所以每次请求完成都会触发一次subscribe回调

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