在 Angular 上使用 rxjs 嵌套 API 请求

Question

我是 rxjs 的新手，在阅读了大量文章后，我感到有些困惑。我有很多嵌套的 http 请求，它们从 API 中获取数据。第一个请求获取我的设备列表，每个设备都包含一个传感器列表，每个传感器都包含一个温度列表。第一个 API 请求返回传感器数组填充的设备列表，但温度数组为空。在这一点上，我必须为每个传感器执行一个 http 请求以获取温度数据。

我尝试将 switchmap 与 forkJoin 结合使用，但在可观察订阅中，我只获得了温度数组。如何填充每个传感器的温度阵列？

APIconnector.GetDevices()
    .pipe(
      tap(devices => {console.log(devices)}),
      switchMap(devices => forkJoin(devices.map(device => device.Sensors))),
      tap(sensors => {console.log(sensors)}),
      switchMap(sensors => forkJoin(sensors.map(sensor => {
        const param = {
          MinutesInterval: 30,
          StartDate: stDate,
          EndDate: new Date(),
          SensorIds: [sensor.Id]
        };  
        return APIconnector.GetIntervalRange(param);
      })))
    ).subscribe(data => {      
      console.log(data);
    })

我需要API返回的所有数据，而不仅仅是最后一个。

- 更新 -

我希望这个 stackblitz 草图可以帮助你。

https://stackblitz.com/edit/angular-txtemn

Answer 1

在没有堆栈闪电战的情况下让示例的语法完全正确将是一个挑战，所以我发布了一个我知道有效的示例，希望您可以从那里推断：

  // All products
  products$ = this.http.get<Product[]>(this.productsUrl)
    .pipe(
      tap(data => console.log('Products', JSON.stringify(data))),
      catchError(this.handleError)
    );

  allProductsAndSuppliers$ = this.products$
    .pipe(
      switchMap(products => forkJoin(
        products.map(product =>
          forkJoin(product.supplierIds.map(supplierId => this.http.get<Supplier>(`${this.suppliersUrl}/${supplierId}`)))
            .pipe(
              map(suppliers => ({
                ...product,
                suppliers: suppliers
              } as Product))
            )
        ))
      )
    );

我把它分成两部分：

该products$流取得所有的产品。看起来您正在做类似的事情来获取所有设备。

然后我使用products$流并获取该产品的所有供应商，定义为allProductsAndSuppliers$.

在第二个流中，我首先使用switchMap为每个产品执行另一个 http 请求。

然后我使用forkJoin将产品集作为数组重新发出。

在第一个 forkJoin 中，我使用 products 数组映射运算符来“循环”每个产品。对于每个产品，我使用另一个forkJoin来查找所有供应商并将它们作为数组发出。

在第二个 forkJoin 中，我获得了产品的 supplyIds 属性中定义的每个供应商。

我通过地图操作符管道结果，该操作符构建了一个Product包含产品及其供应商列表的副本。

作为参考，我的产品界面如下所示：

export interface Product {
  id: number;
  productName: string;
  productCode?: string;
  description?: string;
  supplierIds?: number[];
  suppliers?: Supplier[];
}

我使用随产品检索到的一组供应商 ID 来填充供应商数组。

这看起来适用于您的场景吗？