javascript - 从单个 HTTP 请求生成多个 HTTP 请求 Angular 2

Question

后端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"

}

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

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

我的解决方案:
创建 getAllPersons 的 http 请求 promise 。
在 then 函数中:

• 将响应保存在组件类变量中。
• 创建每个对象的 address_url 的 http Promise 数组(如果存在)。
• Return Promise.all([地址 url promise 数组])

在 then 函数中:

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

还有什么更好的办法吗？还建议这是否是一个三向层次结构。

Answer 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]
   ...
});