从单个 HTTP 请求 Angular 2 生成的多个 HTTP 请求答案

【问题标题】：Multiple HTTP requests generated from Single HTTP request Angular 2从单个 HTTP 请求 Angular 2 生成的多个 HTTP 请求
【发布时间】：2017-04-06 09:24:57
【问题描述】：

后端 API：
网址：http://www.sample.com/getAllPersons

[
    {
        "name": "ABC",
        "occupation": "Student",
        "address_url": "http://www.sample.com/address/person=hgjgjgyyfhg"

    },
    {
        "name": "ABC1",
        "occupation": "Carpenter",
        "address_url": "http://www.sample.com/address/person=fsdafdsa"

    },
    {
        "name": "ABC2",
        "occupation": "Developer"

    },
    {
        "name": "ABC3",
        "occupation": "Tester",
        "address_url": "http://www.sample.com/address/person=sgdfsgd"

    }
]

网址：http://www.sample.com/address/person=hash_value

{
    "address": "XYZ",
    "city": "Phoenix",
    "state": "Arizona",
    "pin code": "3243242"
}

需要对象数组：-

{
    "name": "ABC",
    "occupation": "Student",
    "address": "XYZ",
    "city": "Phoenix",
    "state": "Arizona",
    "pin code": "3243242"

}

我需要在视图中显示具有上述两个 api url 的每个人的姓名、职业和完整地址。注意：可能不是每个人的地址都可用。

请建议使用 Angular 2 中的 HTTP 服务和 Promises/Observables 异步执行此操作的最佳方法。

我的解决方案：
创建 getAllPersons 的 http 请求承诺。
在 then 函数中：

将响应保存在组件类变量中。
为每个对象的 address_url（如果存在）创建 http 承诺数组。
返回 Promise.all([Array of address url promises])

在then函数中：

一一迭代响应并将它们添加到组件类中包含 address_url 的变量。

有没有更好的方法？还建议这是否是三向层次结构。

【问题讨论】：

标签： javascript angular httprequest

【解决方案1】：

使用flatMap 和forkJoin：

var o = http.get('http://www.sample.com/getAllPersons')
    .flatMap(t=> Observable.forkJoin( 
            t.json().filter(x=>x.address_url != null)
             .map(y=> http.get(y.address_url).map(t=>json()))
     ));

这样订阅：

o.subscribe(arr=> {
   //arr[0] --> address_url[0]
   //arr[1] --> address_url[1]
   ...
});

【讨论】：