在Angular 5中等待多个Observable

问题描述 投票:1回答:2

我是Angular和TypeScript的新手,所以问题可能听起来不对。我正在使用Visual Studio Code和Angular 5(ng-version =“5.2.11”)。

我需要“等待”直到我对api的调用结束并返回它的结果,而不是将所有内容都包含在巨大的“.subscribe”中。是)我有的:

exampleMethod(): SettingsClass {
const myComplexObject: SettingsClass = {
  field1: predefined.field1,
  field2: predefined.field2,
  field3: isComplexCalculationsNecessary ? this.CallApi_1(predefined.paramForField3) : predefined.field3,
};

return myComplexObject;
}

以前我在“预定义”中有所有参数,但现在我需要从外部源查询一个(或更多),并立即从方法返回“myComplexObject”(到其他一些api调用,或其他组件,甚至接口,但我需要完全定义此对象,并设置所有参数)。我可以将我的代码“颠倒”并将所有内容放在大的“.subscribe”中,但我不会,因为在某些时候我还需要其他参数来查询,所有这些都会破坏。如何写api的调用,以避免每次我需要添加新的外部调用时重写我的所有代码?就像是:

CallApi_1(paramForField3: string): Observable<int> {
return this.http.get(`${httpConfig.route}?$apply=filter${paramForField3}/groupby${httpConfig.groupingParam}`);
}

或者可能

CallApi_1(paramForField3: string): Observable<int> {
return this.ExternalCallsService.GetParam3Information(paramForField3).subscribe(res => 
.GetParam3Information contains the same http call as above, but I need to do
something to return this result outside, I don't know what);
}

我正在寻找的是某种形式:

field3: isComplexCalculationsNecessary ? **await** this.CallApi(predefined.paramForField3) : predefined.field3,

我正在尝试'rxjs',它有一些有趣的选项可以使用Observables,比如'forkJoin',但我不确定我是否正在寻找正确的方向,也许这样的技巧是不可能的,或者我对Observables的理解是不对的,我需要将复杂的逻辑移到后端?请指教。

重要的是再次注意,那个简单的“.subscribe”并不是我想要的,因为在所有的subscribe-examples中我们都没有返回值,而是将它分配给某个全局变量或直接分配给html-element而它不是我的意思需要,我需要获得价值并继续使用它,因为外部资源将返回它。

angular typescript async-await angular5 observable
2个回答
0
投票

你可以使用rxjs/concat,看看这个例子:https://stackblitz.com/edit/angular-functions-in-sequence?file=src%2Fapp%2Fapp.component.ts

它将是第一个,第二个等等,是返回Observables的函数

let sequence = concat([
      this.first, 
      this.second, 
      this.afterSecond, 
      this.third]);

    sequence.subscribe(currentFunction => {
      currentFunction().subscribe(value => {
        this.values.push(value);
      })
    });

0
投票

您可以使用zip或forkjoin运算符(它们相似但不相同)或者您可以链接您的http调用:

this.http.get1( url1, headers ).subscribe(
   data => {
      this.data1 = data;
      this.http.get2( url2, headers ).subscribe(
         data => {
            this.data2 = data;
         },
         error2{
            // do something on error2
         }
      )
   },
   error1 => {
      // do something on error1
   }
)

这不是很好,但工作正常。我记得用zip来解决同样的问题。

编辑:我找到了zip示例

     const  tpcomprob$ = this.data.getTPComprob( this.tpcomprobsId);
     const  comprobs$ = this.data.getComprobs(this.tpcomprobsId); 

     this.sbsComprobs = zip(tpcomprob$, comprobs$, (tpcomprob: any, comprobs: any) => ({tpcomprob, comprobs}))
                       .subscribe(pair => {
                          this.tpcomprob = pair.tpcomprob;
                          this.comprobs = pair.comprobs;

        },
        error => {this.httpError = error ;})
  });
© www.soinside.com 2019 - 2024. All rights reserved.