Javascript RxJS：解开嵌套的观测值

我正在寻找一个比我现有的更具可读性的解决方案

我需要： 1） 从API检索产品。它们是一个OBJ数组。 2） 根据类别等筛选这些产品。。。 3） 对产品进行分页并返回这些产品的分页版本

ngOnInit() {

//This gets the products from the API 
    this.drinkSubscription = this.drinkService.getAllDrinks().subscribe(drinks => {

//Save products without pagination for other purposes
      this.allDrinks = drinks;

//Get the parameter to filter products
      this.paramSubscription =  this.route.params.subscribe((params: Params) => {

//Filter the products and return a filtered array
        const filteredDrinks = this.filterService.filter(drinks, params['filter'], params['name']);

//Sort products based on the selection
        this.sorterSubscription = this.sorter.initialize(filteredDrinks).subscribe(sortedDrinks => {

//Create a pager that holds the paginated drinks in a property
          this.pagerSubscription = this.pagerService.initializePaginatedItems(sortedDrinks, 10, 5)
                                  .subscribe(pager => {
                                    this.pager = pager;
                                    this.paginatedDrinks = pager.paginatedItems;
                                  });
        });
      });
    });
  }

排序器和分页是行为主体，因此我可以注入next（），但我对它们没有把握。。。

---

您可以看到缩进的级别非常高，我想知道RxJS是否有一种方法可以以更可读的方式获得相同的结果。

您应该能够使用运算符组合这些结果。我认为以下措施应该有效

CombineTest大致类似于Promise.all（[p1，p2]）——只有当任何一个可观测对象发射时，它才会发射，使用其他对象的先前值

switchMap允许您获取从一个可观察对象发出的值，并将其映射到另一个可观察对象

例如：

---

通常，

subscribe

中的

subscribe

是一种“代码气味”，它隐藏了使用一个扁平化操作符来实现“扁平化”策略的需要，例如

mergeMap

（aka

flatMap

）、

switchMap

、

exaustMap

、

concatMap

（即并发设置为1的

mergeMap

）

在您特定的情况下，代码可能会变成

ngOnInit() {

//This gets the products from the API 
    this.drinkSubscription = this.drinkService.getAllDrinks().switchMap(drinks => {
      this.allDrinks = drinks;
      return this.route.params)
    })
    .switchMap((params: Params) => {
        const filteredDrinks = this.filterService.filter(drinks, params['filter'], params['name']);
        return this.sorter.initialize(filteredDrinks)
    })
    .switchMap(sortedDrinks => this.pagerService.initializePaginatedItems(sortedDrinks, 10, 5))
    .subscribe(pager => {
        this.pager = pager;
        this.paginatedDrinks = pager.paginatedItems;
     });
    });
  });
});

}

ngOnInit() {

//This gets the products from the API 
    this.drinkSubscription = this.drinkService.getAllDrinks().switchMap(drinks => {
      this.allDrinks = drinks;
      return this.route.params)
    })
    .switchMap((params: Params) => {
        const filteredDrinks = this.filterService.filter(drinks, params['filter'], params['name']);
        return this.sorter.initialize(filteredDrinks)
    })
    .switchMap(sortedDrinks => this.pagerService.initializePaginatedItems(sortedDrinks, 10, 5))
    .subscribe(pager => {
        this.pager = pager;
        this.paginatedDrinks = pager.paginatedItems;
     });
    });
  });
});