如何在RxJS中"等待"两个可观察对象

Question

在我的应用程序中我有类似的东西:

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()然后操纵每个结果.

Answer 1

更新:2018年10月

我以前建议使用zip方法.然而,从那以后我发现自己使用了combineLatest.所以决定补充一下combineLatest.

CombineLatest从observable发出最新的发射值.虽然zip方法发射所发射的项目序列的顺序.

例如,如果可观察#1发出其第3项并且可观察#2已发出其第5项.结果使用zip方法将是两者的第三个发射值observables.

在这种情况下,使用的结果combineLatest将是第5和第3.感觉更自然.

combineLatest(观测)

来自reactiveX 文档:

只要任何输入Observable发出一个值,它就会使用所有输入中的最新值计算公式,然后发出该公式的输出.

// 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(观测)

在reactiveX文档中解释了Observable.zip方法:

组合多个Observable以创建一个Observable,其值根据其每个输入Observable的值按顺序计算.

// 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})是可选的.您可以跳过它,或执行更复杂的操作:

如果最新参数是函数,则此函数用于根据输入值计算创建的值.否则,返回一个输入值数组.

所以,如果你跳过最后一部分,你得到一个数组:

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

Answer 2

使用forkJoin()可观察的方法.请查看此链接以供参考

来自RXJS 文档

当您拥有一组可观察对象并且只关心每个可观察对象的最终发射值时,最好使用此运算符.一个常见的用例是,如果您希望在页面加载(或其他某些事件)上发出多个请求,并且只希望在收到响应所有内容时采取措施.这样,它与您使用Promise.all的方式类似

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

代码取自:https://coryrylan.com/blog/angular-multiple-http-requests-with-rxjs

Answer 3

使用直接参数分解并自动添加类型的Hamid Asghari 答案的改进（当您使用打字稿时）

const name$ = this._personService.getName(id);
const document$ = this._documentService.getDocument();

combineLatest([name$, document$]).subscribe(([name, document]) => {
    this.name = name;
    this.document = document;
    this.showForm();
});

奖励：您还可以使用上述方法处理错误，如下所示

import { combineLatest, of } from 'rxjs';
//...

const name$ = this._personService.getName(id);
const document$ = this._documentService.getDocument();

combineLatest([
  name$.pipe(     catchError( () => of(null as string  ) ) ), 
  document$.pipe( catchError( () => of(null as Document) ) ), // 'Document' is arbitrary type
]).subscribe(([name, document]) => {
    this.name = name;          // or null if error
    this.document = document;  // or null if error
    this.showForm();
});

Answer 4

该RxJS运营商傻瓜：forkJoin，ZIP，combineLatest，withLatestFrom帮了我很多。顾名思义，它描述了以下组合运算符：

• 叉连接
• 压缩
• 结合最新
• withLatestFrom

它们可能是您要查找的东西，取决于情况。查看文章以获取更多信息。