在Angular 5中等待多个Observable

Question

我是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而它不是我的意思需要，我需要获得价值并继续使用它，因为外部资源将返回它。

Answer 1

你可以使用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);
      })
    });

Answer 2

您可以使用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 ;})
  });