Angular7：如何重写嵌套订阅？

Question

我有一个显示过滤后的项目列表的组件。它订阅了两个可观察对象——第一个是用于（过滤器）参数，需要传递给第二个可观察对象以获得过滤后的项目列表。

public filteredItems = [];

this.myService.getFilterParams()
   .subscribe(params => {
       this.myService.getFilteredItems(params)
         .subscribe(items => { this.filteredItems = items});
   });

我了解到链接订阅不是最佳实践（否则代码工作正常），那么我该如何重写它？

Answer 1

您可以使用 mergeMap 或 switchMap 来实现此目的。不同之处在于，如果外部订阅发出新值，switchMap 将取消内部订阅，mergeMap 不会。

this.myService
    .getFilterParams()
    .pipe(mergeMap(params => this.myService.getFilteredItems(params)))
    .subscribe(items => {
        this.filteredItems = items;
    });

Answer 2

您可以在此处使用switchMap、mergeMap、concatMap 高阶运算符。

如果您的第一个 observable 将发出多个值并且您希望从订阅函数中的所有内部 observable 收集响应，请使用 mergeMap。它还将并行发送请求，并且在订阅中获得响应时不会维护顺序。
您还可以使用 concatMap，它将发送第一个请求并收集响应，然后为您的内部可观察对象发送第二个请求。

查看您的代码，我建议使用 switchMap，它将取消从您的第一个可观察对象发出的任何新值，并且您的订阅中只会收到最后一个内部可观察值。

如果需要，还可以点按响应以执行任何中间步骤。

希望对您有所帮助。

this.myService
    .getFilterParams()
    .pipe(
         tap( (res) => {
           // do any intermediate steps 
           console.log(res);
         }),
         switchMap(params => this.myService.getFilteredItems(params))
     )
     .subscribe(items => {
         this.filteredItems = items;
     });

Angular7：如何重写嵌套订阅？

Angular 7: How to re-write nested subscribtions?

observable

rxjs

angular

angular7