從Observable發出，然后進行額外的RESTAPI呼叫以獲取更多詳細資訊

我有兩種方法可以對 Rest API 進行 HTTP 呼叫。一個是 getProducts()，它將回傳一個產品陣列，另一個是 getProductsDetail()，它可以將該陣列作為引數，并回傳填充了附加欄位的產品陣列。

我想按順序呼叫這兩個 API，getProductsDetail() 取決于 getProducts() 的結果，但我希望我的 Observable 一旦準備好就從 getProducts() 發出結果。然后讓 getProductsDetail() 在此呼叫回傳時發出額外的詳細資訊。

有沒有辦法使用像 concatMap 或 mergeMap 這樣的 RxJS 運算子來做到這一點？我想讓我的模板盡快開始顯示，但在可用時填寫額外資料

更新：

您好，感謝您的回復！對不起，我目前只有偽代碼，但我認為我最初的嘗試將類似于 Authur 下面的內容

initProductsPage(): Observable<Products[]>{
this.productsService.getProducts().pipe(
  switchMap(
    (products: Products[]) => {
      // would like to also emit products here

      return this.productsService.getProductsDetail(products);
    }
  )

}

我的理解是，在這種情況下，initProductsPage() 的訂閱者只會在 getProductsDetail() 回傳時收到輸出。我想讓該訂閱者在執行 getProductsDetails() 時獲得產品。

uj5u.com熱心網友回復：

假設兩者都getProducts()回傳getProductsDetail()一個Observable<Product[]>，你可以做這樣的事情：

getProductsWithDetailsHydration(): Observable<Product[]> {
  const productsShared$ = this.getProducts().pipe(share()); // <- to share same GET products request.

  return merge(
    productsShared$, // <- 1st obs Gets and emits Products
    productsShared$.pipe( //<- 2nd obs Gets details using products response and emit Products with Details
      concatMap((products) => this.getProductsDetail(products))
    )
  );
}

干杯

uj5u.com熱心網友回復：

另一種來自 API 端的方法是使用 getProductDetail$() 方法。其中可以獲取單個產品的詳細資訊。然后您可以輕松地async在模板本身中使用并填充模板。

示例模板代碼

<ng-container *ngIf="getProduct$() | async as product">
    // Some info on product
    <div>{{product.title}}</div>
    <ng-container *ngIf="getProductDetail$(product.id) | async as productDetail">
         // Some info on product details
        <div>{{productDetail.description}}</div>
    </ng-container>
</ng-container>

uj5u.com熱心網友回復：

我認為解決這個問題的更好方法是將兩個可觀察物件分開。

然后您可以訂閱并獲取值：

  // Class variables
  products: Products[];
  products$: Observable<Products[]>;
  productsDetails: ProductsDetails[];
  productsDetails$: Observable<ProductsDetails[]>;

  // Call OnInit or OnChanges depending of your needs
  initProductsPage(): void {
    // Initialize the observables
    this.products$ = this.productsService.getProducts();
    this.productsDetails$ = this.products$.pipe(
      switchMap((products) => this.getProductsDetail(products))
    );

    // Using take(1) to complete the observable after it gets the value
    this.products$.pipe(take(1)).subscribe(products => {
      this.products = products;
    });

    // Using take(1) to complete the observable after it gets the value
    this.productsDetails$.pipe(take(1)).subscribe(productsDetails => {
      this.productsDetails = productsDetails;
    });
  }

然后你可以在你的模板中使用products和。productsDetails

您也可以直接在模板上使用 observables |async，在這種情況下，第二部分將不是必需的initProductsPage()。

  // Class variables
  products: Products[];
  products$: Observable<Products[]>;
  productsDetails: ProductsDetails[];
  productsDetails$: Observable<ProductsDetails[]>;

  // Call OnInit or OnChanges depending of your needs
  initProductsPage(): void {
    // Initialize the observables
    this.products$ = this.productsService.getProducts();
    this.productsDetails$ = this.products$.pipe(
      switchMap((products) => this.getProductsDetail(products))
    );
  }

標籤：有角度的 rxjs

上一篇：使用rxjs連接未確定的api呼叫

下一篇：如何為多個步驟創建后退按鈕？