将嵌套的 AngularJS 服务转换为 Angular Observable 服务

Question

我在 Angular(11) 中重建的项目中有一些使用嵌套调用的 AngularJS(pre 1.5) 服务。 这些服务使用嵌套调用，但我不知道如何使用 RXJS 重建它们。

任何帮助或详细链接来了解我如何获得所需的结果都会很棒。 到目前为止，我还没有找到任何可以帮助我了解如何解决此问题的内容。

这是原始服务：

function getBalanceGroups() {
            return $http.get(url.format("/accounts/{{accountId}}/balance-groups", $stateParams))
                .then(function (response) {
                    _.each(response.data, function (item) {
                        getBalanceViews(item.accountBalanceGroupId)
                            .then(function (balanceViewData) {
                                item.balanceViews = _.sortBy(balanceViewData, function (view) {
                                    return (view.balanceViewId === item.totalIndebtednessViewId) ? 0 : 1;
                                });
                                _.each(item.balanceViews, function (view) {
                                    getBalanceSegments(view.accountBalanceViewId)
                                        .then(function (balanceSegmentData) {
                                            view.balanceSegments = balanceSegmentData;
                                            view.totalBalance = 0;
                                            view.totalBalance = _.sumBy(view.balanceSegments, "balance");
                                        });
                                });
                            });
                    });
                    response.data = _.sortBy(response.data, function (item) {
                        return (item.isActive && item.isPrimary) ? 0 : 1;
                    });
                    return new LinkedList(response.data);
                }, function (error) {
                    $log.error('Unable to return balance group for the balanceChiclet');
                });
        }

这是我到目前为止的：（不工作 - 它正在返回最终的api数据响应，我需要使用数据来使用数据来修改之前的响应并返回修改后的数据。不知道如何）

getBalanceGroups(accountId: number | string): Observable<any> {
    let balGroupsUrl = `/accounts/${accountId}/balance-groups`;
    return this.http.get(`${this.baseUrl}${balGroupsUrl}`).pipe(
      mergeMap( (groups: any) => groups),
      flatMap((group:any) => {
        group.balanceViews = [];
        
        return this.getBalanceViews( group.accountBalanceGroupId, group )

      }),
      mergeMap( (views: any) => views),
      flatMap((views: any) => {
        return this.getBalanceSegments( views.accountBalanceViewId )
      }),

      catchError((err) => of(err) ),

      tap( groups => console.log('groups: 3:', groups) ),
    )

  }

private getBalanceViews(accountBalanceGroupId: number | string, group): Observable<any> {
    let balViewsUrl = `/balance-groups/${accountBalanceGroupId}/balance-views`;
    return this.http.get(`${this.baseUrl}${balViewsUrl}`);
  }

  private getBalanceSegments(accountBalanceViewId: number | string): Observable<any> {
    let balSegUrl = `/balance-views/${accountBalanceViewId}/balance-segments`;
    return this.http.get(`${this.baseUrl}${balSegUrl}`);
  }

Answer 1

1. 您可以使用forkJoin 代替mergeMap + flatMap（它们是同义词）来并行触发多个请求。
2. 鉴于请求的性质，您可能必须使用多个嵌套的 forkJoin。
3. 虽然我已经使用 Array#reduce 转换了 loadash sumBy，但我留下了不完整的 sort 供您执行。

试试下面的

getBalanceGroups(): Observable<any> {
  return this.http.get(`/accounts/${accountId}/balance-groups`, { params: stateParams }).pipe(
    switchMap((response: any) =>
      forkJoin(
        response.data.map((item: any) => 
          getBalanceViews(item.accountBalanceGroupId, item).pipe(
            map((balanceViewData: any) => ({
              ...item,
              balanceViews: balanceViewData.sort()            // <-- incomplete
            })),
            switchMap((item: any) => 
              forkJoin(
                item.balanceViews.map((view: any) =>
                  getBalanceSegments(view.accountBalanceGroupId).pipe(
                    map((balanceSegmentData: any) => ({
                      ...item,
                      balanceSegments: balanceSegmentData,
                      totalBalance: view.balanceSegments.reduce((acc, curr) => acc += curr['balance'], 0)
                    }))
                  )
                )
              )
            )
          )
        )
      )
    ),
    map((response: any) => ({
      ...response,
      response.data: response.data.sort()                      // <-- incomplete
    })),
    catchError((error: any) => {
      console.error('Unable to return balance group for the balanceChiclet');
      return of(error);
    })
  );
}