正文 

当前位置： 首页 > 源码 >

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

     2023-03-13     202

关键词：

【中文标题】如何等待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

【讨论】：

Angular 7 - 如何在某些响应状态代码上重试 http 请求？

】Angular7-如何在某些响应状态代码上重试http请求？【英文标题】：Angular7-Howtoretryanhttprequestoncertainresponsestatuscodes?【发布时间】：2019-09-0823:17:14【问题描述】：我正在尝试从Angular拦截器捕获http请求的错误，并将401处理为注销，... 查看详情

Angular 2 - 如何在等待 http 请求完成时阻止 GUI 渲染

】Angular2-如何在等待http请求完成时阻止GUI渲染【英文标题】：Angular2-HowcanIblockGUIrenderingwhilewaitingonhttprequesttofinish【发布时间】：2017-01-2122:34:41【问题描述】：可以等待渲染GUI/组件并在任务完成时显示它。喜欢在浏览器中请求网... 查看详情

Angular 2，轮询 http 请求并等待缓慢的响应

】Angular2，轮询http请求并等待缓慢的响应【英文标题】：Angular2,Pollinghttprequestandwaitforslowresponses【发布时间】：2016-11-1109:33:11【问题描述】：我有一个每3秒从服务器获取数据的服务。有时服务器很慢，许多响应会在5或6秒后出现... 查看详情

如何在Angular js中的http请求中发送标头数据

】如何在Angularjs中的http请求中发送标头数据【英文标题】：HowtosendheaderdatainhttprequestinAngularjs【发布时间】：2013-12-1801:20:29【问题描述】：在尝试访问安全Api时，我需要在我的角度http请求中发送标头数据javascript代码：$http.post(\'h... 查看详情

angular中处理http请求

使用HttpClient.get等方法进行http请求，一般都是返回的一个Observable，给上层进行订阅处理将响应转成响应的Model类，可以直接在HttpClient.get中指定，如果有特殊处理（比如只要响应中的一部分），那么可以在返回的Observable后继续使... 查看详情

将 SocketIO 集成到 Angular 应用程序以处理 http 请求

】将SocketIO集成到Angular应用程序以处理http请求【英文标题】：IntegratingSocketIOtoanangularappforhttprequests【发布时间】：2015-11-2908:21:12【问题描述】：我创建了一个简单的Angular应用程序，它使用YahooFinance来提取一些货币数据。但是，... 查看详情

Angular 5 Universal 在服务器端渲染期间等待 http 请求返回

】Angular5Universal在服务器端渲染期间等待http请求返回【英文标题】：Angular5Universalwaitforhttprequesttoreturnduringserver-siderender【发布时间】：2018-06-1418:21:09【问题描述】：我有一个使用ngExpressEngine提供的Angular5应用程序（遵循AngularUniver... 查看详情

如何在 Angular 的 HTTP 发布请求中传递 url 中的查询参数

】如何在Angular的HTTP发布请求中传递url中的查询参数【英文标题】：HowtopassqueryparamsinurlinaHTTPpostrequestinAngular【发布时间】：2021-01-2403:10:50【问题描述】：这就是我在Postman中将参数传递给我的httppost请求的方式。它的状态是好的200... 查看详情

如何使用 Angular 中的 observables 在 API http 请求的所有页面中获取数据？

】如何使用Angular中的observables在APIhttp请求的所有页面中获取数据？【英文标题】：HowtogetdatainallthepagesofanAPIhttprequestusingobservablesinAngular?【发布时间】：2019-07-1204:39:00【问题描述】：我正在向API发出http.get请求以获取数据。API使用... 查看详情

在运行 angular spa 之前等待 $http

】在运行angularspa之前等待$http【英文标题】：Waitingfor$httpbeforerunningangularspa【发布时间】：2014-10-3117:59:50【问题描述】：我有一个使用JWT（jsonWeb令牌）来授权api的SPA。问题是当他们登录后在浏览器上点击刷新时，我需要通过ajax... 查看详情

如何从 Django 发送异步 HTTP 请求并在 python2.7 中等待结果？

】如何从Django发送异步HTTP请求并在python2.7中等待结果？【英文标题】：HowtosendasynchronousHTTPrequestsfromDjangoandwaitforresultsinpython2.7?【发布时间】：2019-07-0500:47:44【问题描述】：我有几个API作为数据源，例如-博客文章。我想要实现的... 查看详情

在 ngOnInit Angular 之前处理异步承诺

】在ngOnInitAngular之前处理异步承诺【英文标题】：HandleasyncpromisebeforengOnInitAngular【发布时间】：2019-07-2209:01:09【问题描述】：我有一个返回表数据的请求，需要像承诺等到加载数据一样进行处理。为了将数据加载到表中，我必须... 查看详情

http请求中的异步选项，角度为2(代码片段)

我使用angular2httpclasshttps://angular.io/docs/js/latest/api/http/index/Http-class.html发送帖子和获取请求。现在，我想同步使用发送请求。即，在第一次请求的响应之后发送第二请求。但在角度2文档中没有可用的选项。所以，如何同步发送多... 查看详情

如何在处理 HTTP 请求之前将 csv 文件同步加载到内存中

】如何在处理HTTP请求之前将csv文件同步加载到内存中【英文标题】：HowtosynchronouslyloadacsvfileintomemorybeforehandlingHTTPrequests【发布时间】：2019-08-1819:42:15【问题描述】：我正在尝试编写一个简单的express/node.js应用程序，该应用程序... 查看详情

如何将授权标头添加到 Angular http 请求？

】如何将授权标头添加到Angularhttp请求？【英文标题】：HowtoaddAuthorizationHeadertoAngularhttprequest?【发布时间】：2018-05-0404:45:46【问题描述】：这是我的第一篇文章。我刚刚开始学习Go和Angular，我正在尝试将Angular应用程序连接到Goapi... 查看详情

如何在 Angular 中处理中止的上传？

】如何在Angular中处理中止的上传？【英文标题】：HowtodealwithaborteduploadsinAngular?【发布时间】：2018-05-2609:45:29【问题描述】：我可以通过POST请求将文件上传到我的后端，当文件太大时它会返回一个Http400状态代码。使用Postman时效... 查看详情

在 Angular 9 中，如何强制 http 客户端响应模型中的属性日期类型？

】在Angular9中，如何强制http客户端响应模型中的属性日期类型？【英文标题】：InAngular9howtoforcethepropertydatetypeinthehttpclientresponsemodel?【发布时间】：2021-03-0716:58:32【问题描述】：我正在处理Angular9项目，我收到的其中一个响应包... 查看详情

在 Angular httpclient 拦截器中处理取消的 http 请求

】在Angularhttpclient拦截器中处理取消的http请求【英文标题】：handlecancelledhttprequestinangularhttpclientinterceptor【发布时间】：2019-04-1902:21:11【问题描述】：exportclassAppHttpInterceptorimplementsHttpInterceptorprivatecache=newHttpCache();privateca 查看详情