如何在RxJS中“等待”两个可观察对象 [英] How to 'wait' for two observables in RxJS
问题描述
在我的应用程序中,我有类似的东西:
In my app i have something like:
this._personService.getName(id)
.concat(this._documentService.getDocument())
.subscribe((response) => {
console.log(response)
this.showForm()
});
//Output:
// [getnameResult]
// [getDocumentResult]
// I want:
// [getnameResult][getDocumentResult]
然后我得到两个单独的结果,第一个 _personService
然后是 _documentService
。如何在调用 this.showForm()
之前等待两个结果,然后再操作每个结果。
Then i get two separated results, first of the _personService
and then the _documentService
. How can I wait for both results before call this.showForm()
to finish an then manipulate the results of each one.
推荐答案
更新:2018年10月
我之前建议使用 zip
方法。但是,从那以后我发现自己使用 combineLatest
。所以决定添加 combineLatest
。
Update: Oct, 2018
I previously suggested the use of zip
method. However, since then I found myself using combineLatest
instead. So decided to add combineLatest
.
CombineLatest
发出来自可观测量的最新发射值。虽然 zip
方法会以 序列 顺序发出已发出的项目。
CombineLatest
emits the latest emitted values from observables. While zip
method emits the emitted items in sequence order.
例如,如果可观察#1发出其第3 项,则可观察#2已发出其第5 项。使用 zip
方法的结果将是 observables
的第三次发布值。
For example if observable #1 emits its 3rd item and observable #2 has emitted its 5th item. The result using zip
method will be the 3rd emitted values of both observables
.
在这种情况下,使用 combineLatest
的结果将是 5th 和 3rd 即可。感觉更自然。
In this situation the result using combineLatest
will be the 5th and 3rd. which feels more natural.
来自reactiveX 文档:
From reactiveX documentation:
每当任何输入Observable发出一个值时,它会使用所有输入中的最新值计算公式,然后发出该公式的输出。
Whenever any input Observable emits a value, it computes a formula using the latest values from all the inputs, then emits the output of that formula.
// Observables to combine
const name$ = this._personService.getName(id);
const document$ = this._documentService.getDocument();
combineLatest(name$, document$, (name, document) => ({name, document}))
.subscribe(pair => {
this.name = pair.name;
this.document = pair.document;
this.showForm();
})
Observable.zip(observables)
Observable.zip方法是在 reactiveX文档中进行了解释:
组合多个Observable以创建一个Observable,其值根据其每个输入Observable的顺序计算。
Combines multiple Observables to create an Observable whose values are calculated from the values, in order, of each of its input Observables.
// Observables to combine
const name$ = this._personService.getName(id);
const document$ = this._documentService.getDocument();
Observable
.zip(name$, document$, (name: string, document: string) => ({name, document}))
.subscribe(pair => {
this.name = pair.name;
this.document = pair.document;
this.showForm();
})
附注(适用于这两种方法)
最后一个参数,我们提供了一个函数,(name:string,document:string)=> ({name,document})
是可选的。您可以跳过它,或执行更复杂的操作:
a side note (applies for both methods)
The last parameter, where we have provided a function, (name: string, document: string) => ({name, document})
is optional. You can skip it, or do more complex operations:
如果最新参数是函数,则此函数用于计算创建的值从输入值。否则,返回一个输入值数组。
If the latest parameter is a function, this function is used to compute the created value from the input values. Otherwise, an array of the input values is returned.
所以如果跳过最后一部分,你会得到一个数组:
So if you skip the last part, you get an array:
// Observables to combine
const name$ = this._personService.getName(id);
const document$ = this._documentService.getDocument();
Observable
.zip(name$, document$)
.subscribe(pair => {
this.name = pair['0'];
this.document = pair['1'];
this.showForm();
})
这篇关于如何在RxJS中“等待”两个可观察对象的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!