如何結合兩個觀察角度的結果？

Question

如何結合兩個觀察角度的結果？

this.http.get(url1) 
    .map((res: Response) => res.json()) 
    .subscribe((data1: any) => { 
     this.data1 = data1; 
    }); 

this.http.get(url2) 
    .map((res: Response) => res.json()) 
    .subscribe((data2: any) => { 
     this.data2 = data2; 
    }); 

toDisplay(){ 
    // logic about combining this.data1 and this.data2; 
} 

以上是錯誤的，因爲我們無法立即得到數據1和數據2。

this.http.get(url1) 
    .map((res: Response) => res.json()) 
    .subscribe((data1: any) => { 
    this.http.get(url2) 
     .map((res: Response) => res.json()) 
     .subscribe((data2: any) => { 
      this.data2 = data2; 

      // logic about combining this.data1 and this.data2 
      // and set to this.data; 
      this.toDisplay(); 
     }); 
    }); 

toDisplay(){ 
    // display data 
    // this.data; 
} 

我可以結合第二個observable的subscribe方法中的結果。 但我不確定這是否是一種很好的做法來達到我的要求。

更新：
另一種方法，我發現是使用forkJoin結合的結果，並返回一個新的觀測。

let o1: Observable<any> = this.http.get(url1) 
    .map((res: Response) => res.json()) 

let o2: Observable<any> = this.http.get(url2) 
    .map((res: Response) => res.json()); 

Observable.forkJoin(o1, o2) 
    .subscribe(val => { // [data1, data2] 
    // logic about combining data1 and data2; 
    toDisplay(); // display data 
}); 

toDisplay(){ 
    // 
} 

Answer 1

一個偉大的方式做，這是使用forkjoin運營商rxjs（其中包括與角BTW）這使你遠離嵌套的異步函數地獄，你必須在使用回調函數之後嵌套函數。

下面是關於如何使用forkjoin（及以上）一個偉大的教程：

https://coryrylan.com/blog/angular-multiple-http-requests-with-rxjs

在這個例子中，你讓兩個HTTP請求，然後在認購脂肪箭頭功能的響應將是一個數組結果，你認爲合適然後可以彙集：

let character = this.http.get('https://swapi.co/api/people/1').map(res => res.json()); 
let characterHomeworld = this.http.get('http://swapi.co/api/planets/1').map(res => res.json()); 

Observable.forkJoin([character, characterHomeworld]).subscribe(results => { 
    // results[0] is our character 
    // results[1] is our character homeworld 
    results[0].homeworld = results[1]; 
    this.loadedCharacter = results[0]; 
}); 

數組中的第一元件總是對應於傳遞在第一HTTP請求，依此類推。我幾天前用四個同時請求成功地使用了它，並且它完美地工作。

Answer 2

寫在第一observable如下的completion event第二個電話，

this.http.get(url1) 
    .map((res: Response) => res.json()) 
    .subscribe((data1: any) => { 

     this.data1=data1; 

    },(error=>{}),()=>{ 
     this.http.get(url2) 
      .map((res: Response) => res.json()) 
      .subscribe((data2: any) => { 
       this.data2 = data2; 
      }); 
    }); 

Answer 3

您需要一個zip操作符，一旦兩個observable都發出值，就會發出一個值。

裁判：http://reactivex.io/rxjs/class/es6/Observable.js~Observable.html#static-method-zip