javascript - 组合两个 Angular 服务调用 - Angular

Question

我接到了两次服务电话。一个返回产品列表，另一个返回这些产品的库存列表。

我的要求是合并这两个调用，以便我可以将它们显示在表格中。这是一种产品及其当前库存。

我真的不知道如何将这两个单独的服务调用结合起来。两者都有 sku 具有共同的列名称。

服务电话 1 个产品

  getProducts() {
    this.http
      .get<{ message: string; products: any }>(
        'http://localhost:3000/api/products'
      )
      .pipe(
        map(productData => {
          return productData.products.map(product => {
            return {
              sku: product.sku,
              style_code: product.style_code,
              id: product._id
            };
          });
        })
      )
      .subscribe(transformedProducts => {
        this.products = transformedProducts;
        this.productsUpdated.next([...this.products]);
      });
  }

服务调用 2，两者都有共同的sku

  getInventory() {
    this.http
      .get<{ message: string; inventory: any }>(
        'http://localhost:3000/api/inventory'
      )
      .subscribe(inventoryData => {
        this.inventory = inventoryData.inventory;
        this.inventoryUpdated.next([...this.inventory]);
      });
  }

Answer 1

您可以使用RXJS的forkJoin来同时调用多个服务，请参见以下代码:

 forkJoin(
     this.http.get('http://localhost:3000/api/products'),
     this.http.get(`http://localhost:3000/api/inventory?prodId=${this.proId}`)
 ).subscribe( data => {             
        const [products, inventory] = data; 
},err => {          
    // show errors
});

您需要导入import { forkJoin } from 'rxjs';