如何等待http请求在处理到angular 7中的下一步之前获得响应[重复]答案

【问题标题】：How to wait for http request to get response before it process to next step in angular 7 [duplicate]如何等待http请求在处理到angular 7中的下一步之前获得响应[重复]
【发布时间】：2019-06-29 23:13:17
【问题描述】：

我正在尝试构建应用程序，我正在发送一个获取请求以从组件获取数据。该请求将被调用，并且数据将用于执行下一步。但是，在我得到服务响应之前，它正在执行下一步。

这是我的服务文件：

  getSabhaListDetailsName(sabhaMandalName: string): Observable<any> {
const sabhaListDetailsNameURL = this.rooturl + 'sabhatypebysabhaname';
return this.http
  .post(sabhaListDetailsNameURL,{}, { params: { sabha_name: sabhaMandalName } })
  .pipe(map(this.extractData),
   catchError(this.handleError<any>('sabhaListDetailsNameURL')));

}

这是我的组件文件，我从中调用服务，

   this.sabhaService.getSabhaListDetailsName(element.sabha_id).subscribe(result => {
  this.tempRetrieveSabha = result.data.sabhaList;
  //return this.tempRetrieveSabha;
  //  });
  console.log(this.tempRetrieveSabha);
  this.tempRetrieveSabha.forEach(
    element1 => {
      console.log(this.tempRetrieveSabha);
      if (element1.sabha_type == element.sabha_type) {
        this.tempSabha_ID = element1.id;
        this.tempSabha_Type = element1.sabha_type;
        this.tempFollowup_ID = element.followup_id;
      }
    })
});

如何在遍历数组之前等待 http 请求完成。

【问题讨论】：

你可以试试async await
在订阅中移动 foreach 部分代码。

标签： javascript angular typescript angular6 angular-httpclient

【解决方案1】：

Rxjs subscribe 方法会发出 HTTP Ajax 请求来触发 API 调用。您需要在组件的 subscribe 方法中移动 Array 循环。也请您添加“extractData”代码。

在当前代码中没有发现任何问题。

【讨论】：

这是我的提取数据：private extractData(res: Response) { let body = res;返回正文 || { }; }

【解决方案2】：

尝试实现异步和等待功能或承诺。

例如：

  async function getProcessedData(url) {
  let v;
  try {
    v = await downloadData(url); 
  } catch(e) {
    v = await downloadFallbackData(url);
  }
  return processDataInWorker(v);
}

参考： https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/async_function

【讨论】：