使用 Rxjs 对先前请求响应中的每个项目执行 http 请求答案

【问题标题】：Perform http request for every item in a previous request response with Rxjs使用 Rxjs 对先前请求响应中的每个项目执行 http 请求
【发布时间】：2021-06-07 14:30:09
【问题描述】：

我有一个返回类似这样的请求 get('/产品列表)

[
{
product_id: 1,
description: 'product 1',
color_id: 1
},
{
product_id: 2,
description: 'product 2',
color_id: 2
},
...
]

要获取 de color_id 信息，我必须执行另一个请求，例如 get('color/1')

我想获得类似的东西

{
product_id: 1,
description: 'product 1',
color_id: 1,
color_detail: {object_with_full_color_detail}
},

我可以通过以下方式获得它：

this.getProductList().subscribe(productList => {
  const detailsObservables = productList.map(product => {
    return this.getColorDetail(product.color_id);
  });
  forkJoin(colorObservables).subscribe(colorDetailResponses) {
    const productListWithColorInfo = productList.map((product, index) => {
      return {...product, color_info: colorDetailResponses[index]};
    });
  }
});

我尝试使用 mergeMap 在单个进程中解决此问题，但我无法对 productList 中的每个项目执行内部请求。

有解决这个问题的办法吗？

提前致谢

【问题讨论】：

标签： javascript http rxjs

【解决方案1】：

MergeMap 应该可以工作。

this.getProductList().pipe(

  // Create a request for each product
  map(productList => productList.map(product => 
    this.getColorDetail(product.color_id).pipe(

      // Map result of request and product together
      map((colorDetailResponses, index) => ({
        ...product,
        color_info: colorDetailResponses[index]
      }))
    )
  ),

  // Run the requests
  mergeMap(requests => forkJoin(requests))

).subscribe(
  productListWithColorInfo => 
    console.log("Received: ", productListWithColorInfo)
);

结合地图和合并地图

this.getProductList().pipe(
  mergeMap(productList => forkJoin(
    productList.map(product => 
      this.getColorDetail(product.color_id).pipe(
        map((colorDetailResponses, index) => ({
          ...product,
          color_info: colorDetailResponses[index]
        }))
      )
    )
  )
).subscribe(
  productListWithColorInfo => 
    console.log("Received: ", productListWithColorInfo)
);

【讨论】：