取消 flatMap 可观察调用链

我正在使用 Angular 5 和 rxjs。我正在拨打 2 次服务电话，其中一次取决于其他结果。我正在使用 flatMap 进行此操作。我还使用 takeUntil，以便我可以在任何给定点中止操作。我的代码如下所示：

this.myservice.api1(param1).pipe(takeUntil(this.destroyed$), finalize(() => {
//do something after both api calls are completed
},
flatMap((result1) => {
    //do some operation and create object x(this.objx)
    return this.myservice.api2(param1);
})
).subscribe((result2) => {
    //do something based on result2 and this.objx
})

这段代码在 for 循环中执行，循环执行了 200 次。因此进行了 400 次网络调用。我在 UI 上有一个按钮可以中止此操作，并且这个.destroyed$observable 在被点击时被执行。对于未进行第二次 API 调用的任何迭代（api2），我可以通过这种方式中止。如果仅调用第一个 API，则该请求将被取消。如果 api2 已被调用，需要 20-30 秒才能响应，则不会被取消。我希望两个 API 调用都被取消。是否可以？

你可以重组你的链条并把takeUntil在最后。

this.myservice.api1(param1).pipe(
  mergeMap((result1) => { // flatMap is just alias for `mergeMap` which is the recommended name you should use
    //do some operation and create object x(this.objx)
    return this.myservice.api2(param1);
  }),
  takeUntil(this.destroyed$),
  finalize(() => {
    //do something after both api calls are completed
  },
).subscribe((result2) => {
  //do something based on result2 and this.objx
});

你遇到的问题是如何mergeMap在内部工作（这是故意的）。mergeMap合并其源 Observable 和所有内部 Observable。所以如果你把takeUntil before mergeMap您刚刚完成源 Observable，而所有内部 Observable 仍处于活动状态。

如果你把它放在后面mergeMap它将让观察者完成哪些触发处理处理程序自下而上的顺序以及何时mergeMap取消订阅它会取消订阅其内部的 Observables。

这是相关行：https://github.com/ReactiveX/rxjs/blob/master/src/internal/operators/mergeMap.ts#L147 https://github.com/ReactiveX/rxjs/blob/master/src/internal/operators/mergeMap.ts#L147

另请参阅 RxJS 核心开发人员之一的这篇文章：https://ncjamieson.com/avoiding-takeuntil-leaks/ https://ncjamieson.com/avoiding-takeuntil-leaks/