Angular 如何在进行后端调用之前等待http响应

我是angular的新手，我正在尝试发出http get请求，根据它的响应，我必须进行后端调用

在这里，我尝试链接2个异步调用，不确定使用Angular 7版本在Angular中是否可行/正确

问题陈述：在从第一个http异步调用获得响应之前进行了第二个后端aysnc调用

我尝试使用async/await understand来实现，但这不是一种正确的方法，但仍然尝试调用订阅中的后端调用来调用第一个http调用。两种方法都不起作用。请让我知道这里出了什么问题，以及是否有更好的方法来链接2个异步调用

下面是代码片段的简化版本

export class BasicService{ 
let httpUrl:string=null;
  constructor(protected http: HttpClient, protected backendSvc: BackendService) {
      httpUrl='/someUrl';
  }

  getComponentData(route: ActivatedRoute): Observable<ComponentData> {
    let callName:string;
    let inputPayload:string;
    let routeID=route.snapshot.url[0].path;

if (routeID.Equals('Test')) {
  callName='TestCall';
}
else if (routeID.Equals('Execute')) {
  callName='ExecuteCall';
}

//Failure#1: Get http response back and then call backendSvc, inputPayload remains empty
//want to wait for _waitCreateInputPayload to finish execution before calling backendSvc
inputPayload = this._waitCreateInputPayload(httpUrl,callName);  
//backendSvc returns an observable
return this.backendSvc.GetData(callName, inputPayload, null, this.FormFactorType);

//Failure#2: This approach also doesn't work.
this._createInputPayload(httpUrl,callName).subscribe(tempVal=>{
    if(tempVal!=undefined){
        return this.backendSvc.GetData(callName, tempVal, null, this.FormFactorType);
    }else{
        return null;
    }
});
  }

      private async _waitCreateInputPayload(httpUrl: string, callName:string){
        return await this.http.get(httpUrl, { responseType: 'text' }).subscribe(tempVal=>{
          console.log('in _createInputPayload');
          return tempVal;
        });
      } 


private _createInputPayload(httpUrl: string, callName:string): string{
    return this.http.get(httpUrl, { responseType: 'text' });
  } 
}

谢谢

---

RDV

\u createInputPayload应该返回Obseravble而不是字符串，因为http.get返回一个Obseravble。一旦你改变了它，你可以订阅它，然后在进行后端调用之前得到http响应。

使用RxJs你可以通过管道从_createInputPayload返回，在管道中你可以将_createInputPayload的结果点击到一个成员变量中，然后mergeMap将调用GetData。当您从组件订阅getComponentData时，订阅将是GetData，因为这是最后一个mergeMap

返回此。\u createInputPayloadthis.httpUrl，callName.pipe tapinput=>inputPayload=input， mergeMap=>this.backendSvc.GetDatacallName，inputPayload，null，this.FormFactoryType

    export class ChildTemplateComponent implements OnInit {

  constructor(protected basicSvc: BasicService, protected route: ActivatedRoute) {}

  ngOnInit() {
    this.formFactorSvc = this.route.snapshot.data['formFactor'];
    this.formFactorSvc.getDesignConfig(this.route);
  }

  ngInit() {
    this.basicSvc.getComponentData(this.route).subscribe((x) => {
      this.populateData(x);
    });
  }

  populateData(data: ComponentData){
  //populate the View
  }
}