Question

我正在寻找一种更具可读性的解决方案。

我需要： 1）从API检索产品。它们是objs数组。 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;
                                  });
        });
      });
    });
  }

排序器和分页是BehaviorSubjects，因此我可以注入next（），但我对它们并不满意... 您可以看到缩进程度很高，我想知道RxJS是否有一种方法可以以更可读的方式获得相同的结果。

Answer 1

您应该能够使用运算符将它们组合在一起。我相信以下应该可行。

combineLatest大致类似于-replace-仅当观察到的任何一个发射时，其他对象的先前值才发射。

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

https://www.learnrxjs.io/operators/combination/combinelatest.html https://www.learnrxjs.io/operators/transformation/switchmap.html

例如：

Rename-Item

Answer 2

通常，subscribe中的subscribe是一种“代码气味”，它隐藏了需要使用诸如mergeMap之类的扁平化运算符（又称为{ {1}}，flatMap，switchMap，exaustMap（这是concatMap，并发设置为1）。

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

mergeMap

}

RxJS：解开嵌套的可观察对象

2 个答案: