Question

我需要在我的角应用程序中进行嵌套的http调用。第一个呼叫返回场地列表，然后使用每个场地ID我必须进行多个api呼叫以获取每个场地的详细信息。这是我的代码，

service.ts

GetResponse(){
     return this.http.get('someurl')//Returns list of venues
     .map(res => res.json())
     .flatMap(
     (result) =>{
       return 
         Observable.forkJoin(result.response.groups[0].items.map
                          ((data) => this.getDetailss(data))
     )});
}


getDetailss(venues) {
  return this.http.get('some url'/venues.id)// returns details of single venue
}

component.ts，

this.service.GetResponse().subscribe(
(response)=> console.log(response),//Prints array of observables
(error)=>console.log(error)
);

我在我的组件中收到一个observable数组。如何以json格式从中检索数据？

Answer 1

由于getDetailss(venues)返回this.http.get()返回值（这是一个可观察的），因此在此语句((data) => this.getDetailss(data))中，您应该在调用之后放置map()方法。

应该是：

Observable.forkJoin(
    result.response.groups[0].items.map(
        (data) => {
            return this.getDetailss(data).map(response => response.json());
        })

虽然在我看来，考虑使用async和await来摆脱丑陋的嵌套（async和await可用于typescript 2.1.x及更高版本） ..

Answer 2

如果您想要所有venue详细信息的数组，可以使用combineLatest运算符：

this.http.get('someurl')
    .map(res => res.json())
    .flatMap(result => {
        const venueRequests = [];
        for (const venue of result.someproperty) {
            venueRequests.push(this.http.get('someurl' + venue.id))
        }
        //This will change an Observable<Response>[] into an Observable<Response[]>
        return Observable.combineLatest(venueRequests);
    });

然后，您只需订阅并添加.map (res => res.json())，即可获得venue个详细信息。

在Angular中进行嵌套API调用

2 个答案: