如何将两个可观察角度的结果合并? [英] How to combine the results of two observable in angular?

问题描述

如何将两个可观察角度的结果相结合?

How to combine the results of two observable in angular?

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.

The above is wrong, because we couldn't get data1 and data2 immediately.

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

我可以将结果合并到第二个可观察的Subscribe方法中. 但是我不确定达到我的要求是否是一个好习惯.

I can combine the results in the subscribe method of the second observable. But I'm not sure if it's a good practice to achieve my requirement.

更新:
我发现的另一种方法是使用forkJoin合并结果并返回新的可观察值.

Update:
Another way I found is using forkJoin to combine the results and return a new 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(){
  // 
}

推荐答案

一个很好的方法是使用rxjs forkjoin运算符(Angular btw附带)，这使您远离嵌套的异步函数地狱必须使用回调在函数之后嵌套函数.

A great way to do this is to use the rxjs forkjoin operator (which is included with Angular btw), this keeps you away from nested async function hell where you have to nest function after function using the callbacks.

这是一个很棒的教程，介绍如何使用forkjoin(以及更多):

Here's a great tutorial on how to use forkjoin (and more):

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

在该示例中，您发出了两个http请求，然后在订阅"胖箭头功能中，响应是结果的数组，然后您可以根据需要将其组合在一起:

In the example you make two http requests and then in the subscribe fat arrow function the response is an array of the results that you can then bring together as you see fit:

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请求相对应，依此类推.几天前，我成功地使用了此功能，并同时进行了四个请求，并且效果很好.

The first element in the array always corresponds to the first http request you pass in, and so on. I used this successfully a few days ago with four simultaneous requests and it worked perfectly.

这篇关于如何将两个可观察角度的结果合并?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！