如何使用 forkjoin return Angular 中两个独立 API 调用的组合响应

Question

我有两个独立的 api 电话。下面是两个 api 调用的代码：

public getLendingType(partyId: string): Observable<{ lendingType: string, partyId: string }> {
    return this.customerRepositoryService.getCustomer(partyId).pipe(
        map((customer: ICustomer) => {
          return { lendingType: customer.LendingType, partyId: partyId } ;
        })
      );
  }

  private getPartyType(partyId: string): Observable<{ partyType: string}> {
    return this.partyRepositoryService.getParty(partyId).pipe(
      map((party: IParty) => {
        return  { partyType: party.PartyType };
      })
    );
  }

如您所见，api 调用是相互独立的。此时我想使用 forkjoin 来组合他们的响应和 return 组合结果。这就是我卡住的地方。我为这部分写的代码如下：

  public getPartyTypeAndLendingType(partyId: string): Observable<{ partyType: string, lendingType: string, partyId: string }> {

        return forkJoin([this.getLendingType(partyId), this.getPartyType(partyId)]).subscribe ( result => {
            return { partyType: result[1].partyType, lendingType: result[0].lendingType, partyId: result[0].partyId }
        })
  }

但我想我遗漏了一些东西，为此我仍然遇到编译器错误，如下图所示：

并将鼠标悬停在显示以下消息的编译器错误上：

Type 'Subscription' is missing the following properties from type 'Observable<{ partyType: string; lendingType: string; partyId: string; }>': source, operator, lift, subscribe, and 3 more.ts(2740

如何实现这一点并使这段代码工作？

Answer 1

因为您正在调用 .subscribe() 您的函数 return 是 Subscription 而不是 Observable。

要转换 API 调用的结果，请使用 .pipe() 和 map()。这样你的函数将 return 一个 Observable。

return forkJoin([
    this.getLendingType(partyId), 
    this.getPartyType(partyId)
]).pipe(
  map(result => 
    ({ partyType: result[1].partyType, lendingType: result[0].lendingType, partyId: result[0].partyId })     
  )
)

Answer 2

你有一个错误，因为在方法签名处，你说你将 return 一个 Observable 但你 return 是一个 Subscription.有一个简单的修复方法，不过你真的很接近:)

public getPartyTypeAndLendingType(partyId: string): Observable<{ partyType: string, lendingType: string, partyId: string }> {
  const lendingType = this.getLendingType(partyId);
  const partyType = this.getPartyType(partyId);

  return forkJoin([lendingType, partyType]).pipe(
    map(result => ({
      partyType: result[1].partyType,
      lendingType: result[0].lendingType,
      partyId: result[0].partyId
    }))
  );
}

我们现在使用 map 运算符来映射响应，而不是在方法内订阅（这对于某些目的来说很好，实际上取决于您的需要）。现在订阅部分，应该由调用者完成。

如何使用 forkjoin return Angular 中两个独立 API 调用的组合响应

How to use forkjoin to return combined responses of two independent API calls in Angular

fork-join

rxjs

typescript

angular