Angular4 如何使用 flatMap 链接 forkJoin

Question

我现在的情况是我需要进行 5 个可以并行执行的 http 调用 + 另一个需要在这五个之后执行的 http 调用。

我在前 5 个中使用了 forkJoin，但我不知道如何链接 flatMap（或其他函数）。

forkJoin(
      firstObservable,
      secondObservable,
      thirdObservable,
      ..)
      .subscribe(results => {

        this.myComposedObject = results[0];
        let secondResult = results[1];
        let thirdResult = results[2];
        [...]


        // !!! AT THIS POINT I WOULD NEED TO MAKE AN EXTRA CALL!
        // results[1] contains data I need to make the extra call


        // 
        this.myComposedObject.second = secondResult;
        this.myComposedObject.third = thirdResult;
});

我在一个组件中执行此操作，所以最后我将数据分配给 myComposedObject。

Answer 1

正如您所说的，您可以使用 forkJoin 提出 5 个并行请求。然后你想在前 5 个完成时发出另一个请求，所以你将它与 concatMap 运算符链接起来（或者 mergeMap 也可以在这里工作）。

然后您需要合并所有结果，这样您就可以使用 map 将最后一个结果添加到与前五个结果相同的数组中。

forkJoin(
    firstObservable,
    secondObservable,
    thirdObservable,
    ...
  )
  .concatMap(firstFiveResults => makeAnotherCall(firstFiveResults[1])
    .map(anotherResult => [...firstFiveResults, anotherResult])
  )
  .subscribe(allResults => {
    this.myComposedObject.second = allResults[1];
    this.myComposedObject.third = allResults[2];
    // allResults[5] - response from `makeAnotherCall`
    ....
  });

Answer 2

谢谢，这为我指明了正确的方向。我在结果类型方面遇到了一些问题。当我试图分配

this.myComposedObject.second = allResults[1];

编译器抱怨类型转换，所以我会在这里为其他人报告我的解决方案。

为了摆脱这个问题，您可以利用 "destructuring"（更多信息在这里：https://developer.mozilla.org/it/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment）

forkJoin(
    firstObservable,
    secondObservable,
    thirdObservable,
    ...
  )
  .concatMap(firstFiveResults => makeAnotherCall(firstFiveResults[1])
    .map(anotherResult => [...firstFiveResults, anotherResult])
  )
  .subscribe((allResults: [
     TypeA, <-- type returned from firstObservable
     TypeB, 
     TypeC, 
     TypeD, 
     TypeE
   ]) => {
    this.myComposedObject.second = allResults[1];
    this.myComposedObject.third = allResults[2];
    // allResults[5] - response from `makeAnotherCall`
    ....
  });

Angular4 如何使用 flatMap 链接 forkJoin

Angular4 how to chain forkJoin with flatMap

angular

http

rxjs

chaining