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运算符创建一个新的observable来获取产品的所有细节。为此，我将每个产品映射到特定请求。然后我使用forkJoin运算符并行加载所有这些请求，并在收到每个响应时继续。
我收到的productDetails包含产品详情列表。我从HTTP响应中提取每个产品的详细信息。

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

如何在角度2 app中嵌套RxJS地图调用

1 个答案: