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

Question

我是 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

Answer 1

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

Answer 2

使用 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)));

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

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

httprequest

subscribe

observable

async-await

angular