如何在 Angular 2 应用程序中嵌套 RxJS 地图调用

Question

问题描述： 我想从服务器检索产品数组。为此，我有一个执行以下操作的函数：

getProducts(customerId): Observable<Product[]> {
        this.http.get(
            'http://<url>'+'?productId='+productId)
            .map((responseData) => {
                return responseData.json();
            })
            .map((products: Array<any>) => {
                let result:Array<Product> = [];
                if (products) {
                    products.forEach((product) => {
                        result.push(
                            new Product(product.id,
                              product.mediaId,
                              product.description,
                              product.name));
                            });
                }
                return result;
            }

我的问题如下： 我想检索需要与产品名称和描述一起显示的每个产品的图像。为了检索图像，我需要调用服务器上的另一个 http 端点并将 product.mediaId 作为参数传递。所以我不清楚的是我该怎么做。我是否需要为上一次 http.get 调用检索到的每个产品再调用一次 http.get 。这样做的 RxJS 可观察和功能性方式是什么？如果有人能对这个问题有所了解，那就太好了。

Answer 1

我会尝试这样的：

getProducts(customerId): Observable<Product[]> {
  return this.http.get(
     'https://<url>/products?customerId='+customerId)
             .map(res => res.json())
             .switchMap(
               products => {
                 var productsObs = products.map(
                   (product) => {
                      return this.http.get('https://<url>/products/'+product.id);
                   });
                 return Observable.forkJoin(productsObs);
               })
             .map(
               (productsDetails) => {
                 return productsDetails.map(res=>res.json());
             });
}

步骤如下：

• 我为特定客户加载产品
• 我从结果中提取负载
• 我使用switchMap 运算符创建一个新的可观察对象来获取产品的所有详细信息。为此，我会将每个产品映射到特定的请求。然后我使用forkJoin 运算符并行加载所有这些请求，并在收到每个响应时继续。
• 我收到的productDetails 包含产品详细信息列表。我从 HTTP 响应中提取每个产品的详细信息。

这里是对应的 plunkr：https://plnkr.co/edit/h76inQy0R8EDUgYWADCZ?p=preview。