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

Question

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

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

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

我尝试使用 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

Answer 1

使用 RxJs 你可以将 pipe 从 _createInputPayload 返回，在 pipe 中你可以从 _createInputPayload 中挖掘结果，将调用 GetMap 获取到成员变量，然后合并。 当您从组件订阅 getComponentData 时，订阅将是 GetData，因为那是最后一个 mergeMap。

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

Answer 2

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