Angular 4/6/7 - 如何获取异步变量？

Question

我想创建一个类似的计算：

var a: number;
var b: number;
this.httpClient.get<int>(baseUrl+'varA/get/'+id).subscribe( res => this.a = res);
this.httpClient.get<int>(baseUrl+'varB/get/'+id).subscribe( res => this.b = res);

var c = a + b ; 

如何异步订阅？通常我在检索 var a 后得到 var b。但我想做一个异步（使用异步和等待）....如何在 subscribe() 中做到这一点？

我正在使用 Angular 7。

Answer 1

使用 fork join 发出多个请求。

public requestDataFromMultipleSources(baseUrl): Observable<any[]> {
    var a: number;
    var b: number;
    let response1 = this.httpClient.get<int>(baseUrl+'varA/get/'+id));
    let response2 = this.httpClient.get<int>(baseUrl+'varA/get/'+id)
    return Observable.forkJoin([response1, response2]);
  }

ngOnInit() {
        this.requestDataFromMultipleSources(this.baseUrl).subscribe(responseList => {
            let a = responseList[0];
            let b = responseList[1];
            var c = a + b 
     });

然后订阅 requestDataFromMultipleSources() 函数。这将并行发出 http 请求并给出结果。有关此link的更多详细信息

Answer 2

你应该使用像combineLatest这样的rxjs conbinator observable。

这里是带有虚拟 ajax 请求的示例：

import { of, combineLatest } from 'rxjs'; 

const simulateQuery1$ = of(1); // Can be any observable
const simulateQuery2$ = of(3); // Can be any observable   
// CombineLatest will wait complete from both observable before next array of both value. work well for Ajax request who do 1 next then complete the observable.
combineLatest(simulateQuery1$, simulateQuery2$).subscribe(arrayVal => {
  console.log(arrayVal[0] + arrayVal[1]);
});

live sample

Answer 3

你可以使用RXJS链接承诺

var c;
getConditionalDataUsingPromise() {
    this.httpClient.get<int>(baseUrl+'varA/get/'+id).toPromise().then(data => {
      console.log('First Promise resolved.');
        this.httpClient.get<int>(baseUrl+'varB/get/'+id).toPromise().then(data => {
          this.c=data;
          console.log('Second Promise resolved.')
        });

    });
  }