如何結合 angular 中兩個 observable 的結果？

Question

如何結合 angular 中兩個 observable 的結果？

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;
}

以上是錯誤的，因為我們無法立即獲取 data1 和 data2。

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組合結果並返回一個新的 observable。

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

編輯 2021：這是更新的教程：

https://scotch.io/tutorials/rxjs-operators-for-dummies-forkjoin-zip-combinelatest-withlatestfrom/amp

一個很好的方法是使用 rxjs forkjoin 運算符（它包含在 Angular btw 中），這讓你遠離嵌套異步函數地獄，你必須使用回調在函數之后嵌套函數。

這是一個關於如何使用 forkjoin（以及更多）的很棒的教程：

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

在示例中，您發出兩個 http 請求，然后在 subscribe fat arrow 函數中，響應是一個結果數組，然后您可以根據需要將其組合在一起：

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

我們可以根據需要以不同的方式組合 observables。 我有兩個問題：

1. 第一個的響應是第二個的輸入： flatMap() 適合這種情況。
2. 兩者都必須在繼續之前完成：可以根據您想要的輸出方式使用 forkJoin()/megre()/concat()。

您可以在此處找到上述所有功能的詳細信息。 您可以在此處找到更多可用於組合 observable 的操作。

Answer 3

如果它不起作用，請嘗試使用 forkJoin，然后嘗試一下combineLatest()它的作用 - 它在完成流數組之前將流數組中最后發出的值合並為一個值。

Observable.combineLatest(
        this.filesServiceOberserval,
        this.filesServiceOberserval,
        this.processesServiceOberserval,
    ).subscribe(
        data => {
          this.inputs = data[0];
          this.outputs = data[1];
          this.processes = data[2];
        },
        err => console.error(err)
    );

Answer 4

您可以將多個 observable 合並為一個 observable，然后將源 observable 中的值減少為單個值。

const cats = this.http.get<Pet[]>('https://example.com/cats.json');

const dogs = this.http.get<Pet[]>('https://example.com/dogs.json');

const catsAndDogs = merge(cats, dogs).pipe(reduce((a, b) => a.concat(b)));

Answer 5

您還可以使用合並兩個可觀察對象的mergemap

合並 map 文檔

Answer 6

你需要一個zip運算符，一旦兩個observable都發出值就會發出一個值。

參考： http ： //reactivex.io/rxjs/class/es6/Observable.js~Observable.html#static-method-zip