如何简化 Angular 6 的嵌套 ajax 订阅调用

Question

getBudgetMap(budgetMonthID){
        this.rows = [];
        this.categoryService.getCategory(budgetMonthID).subscribe(category =>{
            this.categoryList = category;
            this.categoryList.forEach(category => {

                this.transactionService.getTransaction(budgetMonthID, category.id).subscribe(transaction => {
                    this.rows = this.rows.concat(transaction);
                })

            })
        )
    }

为了简单起见，我有一个嵌套的 ajax 服务 (http.get) 调用，第一个调用 (getCategory) 返回基于 budgetMonthID 的类别列表。类别的数量各不相同。然后每个类别将进行第二次调用getTransaction 以检索属于每个类别的所有事务。上面的代码运行良好，但我一直在阅读关于 Angular 的map、flapMap、pipe，我只是不知道如何更改那个讨厌的代码。谢谢

Answer 1

您可以使用处理异步调用的rxjs operators。要变得珍贵，您应该使用switchmap 或flatmap 或mergemap。可以给出代码，但是您将来会再次遇到相同的问题。所以我鼓励你有时花些时间来了解 rxjs 操作符是如何工作的。

请通过这个 - https://www.learnrxjs.io/operators/transformation/switchmap.html

Answer 2

这确实需要一些 rxjs 知识。

this.categoryService.getCategory(budgetMonthID).pipe(
  tap((categories) => this.categoryList = categories),
  mergeMap((categories) => zip(
    ...categories.map(
      (category) => this.transactionService.getTransaction(budgetMonthID, category.id)
    )
  )
).subscribe((rows) => {
  this.rows = rows;
});

首先，我们使用tap 将类别保存到categoryList。这是一个只执行函数但对管道流没有影响的运算符。

之后，我们使用mergeMap 提取类别，并返回另一个 Observable。在这种情况下，zip，它会等待所有参数完成，然后再以数组的形式发出，订阅将获取该数组。

您也可以尝试从 Angular 查看内置的async 管道。这消除了在组件内部取消订阅的需要，并保持其清洁。这会将您的代码更改为：

this.categoryList$ = this.categoryService.getCategory(budgetMonthID).pipe(
  shareReplay(1)
);

this.rows$ = this.categoryList$.pipe(
  mergeMap((categories) => zip(
    ...categories.map(
      (category) => this.transactionService.getTransaction(budgetMonthID, category.id)
    )
  )
);

在您的模板中，您可以像这样访问它：

<div *ngFor="let category of categoryList$ | async"></div>
<div *ngFor="let row of rows$ | async"></div>