如何在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屋！