根据先前的结果订阅多个 http 请求的 Angular RxJS 最佳实践

Question

我想知道使用 RxJS 库执行 3 个取决于先前结果的 http 请求的最佳方法是什么。

假设我的 Angular 应用程序中有 3 个服务，每个服务都有一个函数 get(id: number) 用于订阅请求实体的可观察对象。

我需要对第一个服务进行调用排序，以获取一个实体，该实体包含使用第二个服务进行下一次调用所需的标识符，该实体还包含使用第三个服务进行下一次调用所需的标识符。

---

方法一:使用三个订阅并将每个结果设置为全局变量

const firstEntityId = 1;

this.firstService.get(firstEntityId)
  .subscribe((firstEntity: FirstEntity) => {
    this.firstEntity = firstEntity;

    this.secondService.get(firstEntity.secondEntityId)
      .subscribe((secondEntity: SecondEntity) => {
        this.secondEntity = secondEntity;

        this.thirdService.get(secondEntity.thirdEntityId)
          .subscribe((thirdEntity: ThirdEntity) => {
            this.thirdEntity = thirdEntity;

          });
      });
  });

方法二:使用function with stream和一个订阅来设置所有全局变量

const firstEntityId = 1;

this.getFirstSecondThird(firstEntityId)
  .subscribe(([firstEntity, secondEntity, thirdEntity]: [FirstEntity, SecondEntity, ThirdEntity]) => {
    this.firstEntity = firstEntity;
    this.secondEntity = secondEntity;
    this.thirdEntity = thirdEntity;
  });

getFirstSecondThird(id: number): Observable<[FirstEntity, SecondEntity, ThirdEntity]> {
  return this.firstService.get(id).pipe(
    switchMap((firstEntity: FirstEntity) => forkJoin(
      of(firstEntity),
      this.secondService.get(firstEntity.secondEntityId)
    )),
    switchMap(([firstEntity, secondEntity]: [FirstEntity, SecondEntity]) => forkJoin(
      of(firstEntity),
      of(secondEntity),
      this.thirdService.get(secondEntity.thirdEntityId)
    ))
  );
}

在这种情况下，使用流的方法是否最快？

是否有其他方法来编写我的函数 getFirstSecondThird 而不是使用 switchMap 和 forkJoin 方法？

(我看过 combineLatest 但我没有找到如何从之前的结果中传递一个参数)

Answer 1

也许在方法 1 中使用 map 而不是 subscribe？

请注意，您需要在所有嵌套级别返回。在示例中，我删除了括号，因此隐含返回。

getFirstSecondThird(id: number): Observable<[FirstEntity, SecondEntity, ThirdEntity]> {
  return this.firstService.get(id).pipe(
    mergeMap((first: FirstEntity) => 
      this.secondService.get(first.secondEntityId).pipe(
        mergeMap((second: SecondEntity) => 
          this.thirdService.get(second.thirdEntityId).pipe(
            map((third: ThirdEntity) => [first, second, third])
          )
        )
      )
    )
  )
}

---

这是一个测试片段，

console.clear()
const { interval, of, fromEvent } = rxjs;
const { expand, take, map, mergeMap, tap, throttleTime } = rxjs.operators;

const firstService = (id) => of(1)
const secondService = (id) => of(2)
const thirdService = (id) => of(3)

const getFirstSecondThird = (id) => {
  return firstService(id).pipe(
    mergeMap(first => 
      secondService(first.secondEntityId).pipe(
        mergeMap(second => 
          thirdService(second.thirdEntityId).pipe(
            map(third => [first, second, third])
          )
        )
      )
    )
  )
}

getFirstSecondThird(0)
  .subscribe(result => console.log('result', result))

<script src="https://cdnjs.cloudflare.com/ajax/libs/rxjs/6.3.3/rxjs.umd.js"></script>

---

如果 getFirstSecondThird() 有可能被第二次调用，您可以使用 switchMap() 而不是 mergeMap() 但是在第一次调用的所有提取完成之前，并且您想放弃第一次调用 - 例如在增量搜索场景中。