Angular - 嵌套的 REST API 调用仅返回内部调用

Question

通过外部 REST 调用获取具有 ShoppingCartItems 的 ShoppingCart，之后 ShoppingCartItems 的 Observable 进行内部调用以使用 Provider 增强 ShoppingCartItems。

内部调用后的点击（console.log）显示 ShoppingCart 的内容与预期的一样 - 5 个 ShoppingCartItems 使用 Provider 进行了增强。但是，点击订阅会返回 5 个警报，每个警报都包含我想添加为 ShoppingCartItem 属性的提供者。

看来我使用了错误的 mergeMap/concatMap/switchMap - 或者在一个或两个调用结束时没有执行某种“收集”。

电话：

  getShoppingCart$(userId: number): Observable<ShoppingCart> {
    return this.rest.getShoppingCart$(userId)
      .pipe(
        mergeMap(
          (shoppingCart) => from(shoppingCart.shoppingCartItems)
            .pipe(
              concatMap(
                item => this.rest.getProviderByWine$(item.wine.id)
                  .pipe(
                    map(provider => item.provider = provider),
                  )
              ),
              // Returns ShoppingCart with Providers added
              tap(() => console.log('ShoppingCart: ' + JSON.stringify(shoppingCart)))
            )
        ),
      )
  }

订阅：

  ngOnInit(): void {
    this.shoppingCartService.getShoppingCart$(1037).subscribe(
      (shoppingCart: ShoppingCart) => {
        this.dataSourceShoppingCart = new NestedMatTableDataSource<ShoppingCartItem>(shoppingCart.shoppingCartItems);
        // Runs 5 times - each time displaying a Provider, not the ShoppingCart
        alert(JSON.stringify(shoppingCart))
      }
    );
  }

实际的 REST 调用：

  getShoppingCart$(userId: number): Observable<ShoppingCart> {
    return this.http.get<ShoppingCart>(this.getBaseUrl() + 'users/' + userId + '/shopping-cart');
  }

  getProviderByWine$(wineId: number): Observable<any> {
    return this.http.get<Provider>(this.getBaseUrl() + 'wine/' + wineId + '/provider');
  }

非常感谢任何指针。 Angular 版本是 8。

Answer 1

将逻辑拆分为多个函数，使推理更容易，并减少了嵌套量。 创建一个将提供程序添加到项目的函数和一个将增强的项目添加到购物车的函数。

您可以使用forkJoin 并行执行多个独立的可观察对象。

getShoppingCart$(userId: number): Observable<ShoppingCart> {
  return this.rest.getShoppingCart$(userId).pipe(
    mergeMap(shoppingCart => enhanceShoppingCart(shoppingCart))
  );
}

// Add enhanced items to a shopping cart
private enhanceShoppingCart(shoppingCart: ShoppingCart): Observable<ShoppingCart> {
  // Map each shopping cart item to an Observable that adds the provider to it.
  const enhancedItems = shoppingCart.shoppingCartItems.map(item => enhanceItem(item))
  return forkJoin(enhancedItems).pipe(
    map(shoppingCartItems => ({ ...shoppingCart, shoppingCartItems }))
  );
}

// Add provider to an item
private enhanceItem(item: Item): Observable<Item> {
  return this.rest.getProviderByWine$(item.wine.id).pipe(
    map(provider => ({ ...item, provider }))
  );
}

Answer 2

如果shoppingCart.shoppingCartItems 数组中有 5 个元素，那么可观察的 from(shoppingCart.shoppingCartItems) 将发出 5 次。这就是您在订阅中观察到的内容。

如果您愿意将使用concatMap 的顺序请求替换为使用forkJoin 的并行请求，您可以尝试以下方法

getShoppingCart$(userId: number): Observable < ShoppingCart > {
  return this.rest.getShoppingCart$(userId).pipe(
    mergeMap((shoppingCart) => 
      forkJoin(shoppingCart.shoppingCartItems.map(
        item => this.rest.getProviderByWine$(item.wine.id))
      ).pipe(
        map(providers => ({
          ...shoppingCart,
          shoppingCartItems: shoppingCart.shoppingCartItems.map((item, index) => ({
            ...item,
            provider: providers[index]
          }))
        }))
      );
    ),
    tap((kart) => console.log('ShoppingCart: ' + JSON.stringify(kart)))        // <-- we are priting the output from last operator not the `mergeMap`
  );
}

在请求之后，我们使用map 运算符返回转换后的shoppingCart。您也可以将 concatMap 与 toArray() 运算符一起用于顺序请求，但 5 个并行请求的开销不会很大。