Angular http post 并等待多个结果

Question

我正在使用 Angular 11，我需要对将执行进程的 api 进行 http 调用。

所以如果我执行这个调用：

processData(data) {
    return this.httpClient.post('https://myurl/api/process', {
      data: data
    }, 
    { 
      headers: this.headers() 
    });
}

api 将在服务器端启动一个进程并执行相关操作。

因为这需要时间，所以我需要 Angular 来监听并获得不同的响应，例如，我可以让服务器发送进度百分比。

然后 Angular 会知道还剩多长时间并告诉用户，希望不只是超时等待结果。

这可以在 Angular 中完成吗？如果可以，怎么做？

Answer 1

您需要使用 reportProgress: true 来显示任何 HTTP 请求的一些进度。如果您想查看所有事件，包括传输进度，您还需要使用 observe: 'events' 选项和 return 类型 HttpEvent 的 Observable。然后您可以在组件方法中捕获所有事件（DownloadProgress、Response..etc）。在 https://angular.io/guide/http#listening-to-progress-events

中查找更多详细信息

Answer 2

方法 post returns 一个可观察对象，它甚至可以触发多次。只需使用您的方法如下：

processData(data).subscribe((res) => {
   console.log('The server has responded with :', res);
});

console.log('While I wait for the server to respond, I keep doing more stuff');
doMoreStuff();

Angular http post 并等待多个结果

Angular http post and wait for multiple results

angular

typescript

rxjs

angular11