如何在 RxJS 中“等待"两个 observable [英] 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.

推荐答案

上次更新:2021 年 6 月.

RxJS v7: combineLatestWith

来自reactiveX 文档:

每当任何输入 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();
    
name$.pipe(
        combineLatestWith((name, document) => {name, document})
      )
      .subscribe(pair => {
           this.name = pair.name;
           this.document = pair.document;
           this.showForm();
       })

(已弃用)RxJS v6 combineLatest()

来自reactiveX 文档:

每当任何输入 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.

(更新:2021 年 2 月):

// Deprecated (RxJS v6)
// Observables to combine
const name$ = this._personService.getName(id);
const document$ = this._documentService.getDocument();
    
name$.combineLatest(document$, (name, document) => {name, document})
    .subscribe(pair => {
           this.name = pair.name;
           this.document = pair.document;
           this.showForm();
       })

(替代语法): combineLatest(observables)

(alternate syntax): combineLatest(observables)

// Deprecated (RxJS v6)
// 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();
       })

---

zip 与 combineLatest

(更新:2018 年 10 月)我之前建议使用 zip 方法.但是，对于某些用例，combineLatest 比 zip 有一些优势.因此，了解差异很重要.

---

zip vs combineLatest

(Update: Oct, 2018) I previously suggested the use of zip method. However, for some use cases, combineLatest has a few advantages over zip. So it is important to understand the differences.

CombineLatest 从 observables 发出最新发出的值.而 zip 方法以 sequence 顺序发出发出的项目.

CombineLatest emits the latest emitted values from observables. While zip method emits the emitted items in sequence order.

例如，如果 observable #1 发出了它的 3rd 项，而 observable #2 发出了它的 5th 项.使用 zip 方法的结果将是两个 observables 的 3rd 发出的值.

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.

(原始答案:2017 年 7 月) 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 中“等待"两个 observable的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！