[英]What is the proper way to handle concatenation of data returned from multiple http observables in angular2/4 rxjs?
I have 5 different URLs that each return data in the from of an array of objects.我有 5 个不同的 URL,每个 URL 都返回对象数组中的数据。 I want to concat these objects into a single array that I store local to my ANgular2 componenent.我想将这些对象连接到一个数组中,该数组存储在我的 Angular2 组件本地。 Right now, I do something like this in my ngOnInit:现在,我在我的 ngOnInit 中做这样的事情:
this.myHttpService.graburl1data()
.subscribe(
response => {
if(!this.mylist) {
this.mylist = []
this.mylist = this.mylist.concat(response);
} else {
this.mylist = this.mylist.concat(response);
}
this.myHttpService.graburl2data()
.subscribe(
response => {
if(!this.mylist) {
this.mylist = []
this.mylist = this.mylist.concat(response);
} else {
this.mylist = this.mylist.concat(response);
}
});
});
There has to be a better way, please help!必须有更好的方法,请帮助!
Your snippet seems to suggest that there is no dependency between the requests, so you can use forkJoin
to peform them in parallel:您的代码段似乎表明请求之间没有依赖关系,因此您可以使用forkJoin
并行执行它们:
import { Observable } from "rxjs/Observable";
import "rxjs/add/observable/forkJoin";
Observable.forkJoin(
this.myHttpService.graburl1data(),
this.myHttpService.graburl2data()
)
.subscribe(
(responses) => {
// ... responses[0] is the response from this.myHttpService.graburl1data
// ... etc.
}
);
responses
will be an array of the responses in the order in which the request observables were passed to forkJoin
. responses
将是一个responses
数组,按照请求 observable 传递给forkJoin
。
If you want the requests performed in series, use concat
and toArray
instead:如果您希望连续执行请求,请改用concat
和toArray
:
import { Observable } from "rxjs/Observable";
import "rxjs/add/observable/concat";
import "rxjs/add/operator/toArray";
Observable.concat(
this.myHttpService.graburl1data(),
this.myHttpService.graburl2data()
)
.toArray()
.subscribe(
(responses) => {
// ... responses[0] is the response from this.myHttpService.graburl1data
// ... etc.
}
);
Suppose you have two requests and each returns an observable that emits an array as a stream value:假设您有两个请求,每个请求都返回一个发出数组作为流值的 observable:
const response1 = of([1, 2, 3]);
const response2 = of([4, 5, 6]);
You want to get those values as a stream of values - flattened.您希望将这些值作为值流 - 扁平化。 You can use a combination of operators to do that:您可以使用运算符的组合来做到这一点:
const merged = merge(response1, response2).mergeMap((a) => {
return a;
});
merged.subscribe((v) => {
console.log(v);
});
You will get the following output:您将获得以下输出:
1
2
3
4
5
6
You can read more about the merge
operator here .您可以在此处阅读有关merge
运算符的更多信息。
In your case you will obtains the response
observables by calling the http
:在您的情况下,您将通过调用http
获得response
观察:
const response1 = this.myHttpService.graburl1data(),
const response2 = this.myHttpService.graburl2data()
...
So, the final code is:所以,最终的代码是:
import { merge } from 'rxjs/observable/merge';
import 'rxjs/add/operator/mergeMap';
const merged = merge(
this.myHttpService.graburl1data(),
this.myHttpService.graburl2data()
).mergeMap((a) => {
return a;
});
merged.subscribe((v) => {
console.log(v);
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.