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

Posted 2023-03-13

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

【英文标题】：How to wait for http request to get response before it process to next step in angular 7 [duplicate]

【发布时间】：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 部分代码。

【参考方案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