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

How to wait for http response before making backend call in Angular

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

我在这里尝试链接 2 个异步调用,不确定这是否是 Angular 中的 doable/correct 方法(使用 Angular 7 版本)。

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

我尝试使用 async/await 实现(理解不正确的方法,但仍然尝试过)并在订阅第一个 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' });
  } 
}

组件代码如下所示:

    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
  }
}

谢谢,

RDV

_createInputPayload 应该 return 一个 Obseravble 而不是一个字符串,因为 http.get return 是一个 Observable。更改此设置后,您可以订阅它,然后在进行后端调用之前您将获得 http 响应。

使用 RxJs,您可以通过管道从 _createInputPayload 获取 return,在管道中您可以将 _createInputPayload 的结果输入到成员变量中,然后 mergeMap 将调用 GetData。当您从组件订阅 getComponentData 时,订阅将是 GetData,因为这是最后一个 mergeMap。

return this._createInputPayload(this.httpUrl, callName).pipe( tap((input) => inputPayload = input), mergeMap(() => this.backendSvc.GetData(callName, inputPayload, null, this.FormFactorType)));