为一组对象重复 Angular 5 中的 HTTP 服务答案

【问题标题】：Repeat a HTTP service in Angular 5 for an array of objects为一组对象重复 Angular 5 中的 HTTP 服务
【发布时间】：2018-03-29 06:36:00
【问题描述】：

我的目的是为数组中已调用 Rest 服务的项目显示 ngx-bootstrap 进度条。第三方后端不接受对象数组，只接受带有 x-www-form-urlencoded content-type 的 post 请求。

我已经创建了数据服务并希望遍历数组中的项目并为每个项目一一调用服务。同时更新进度条。

对象数组：cars: IProject[] = [];

带有服务的组件构造函数：`

constructor(private eventProjectService: EventProjectService) {

}

保存功能：

save() {
    this.max = this.cars.length;
    this.processedCountForProgressBar = 0;

    for (let i = 0; i < this.max; i++) {
        processedCountForProgressBar++;
        this.eventProjectService.saveProject().subscribe((data) => {
            // handle success/error msgs  
        });
    }
}

建议我实现这一目标的方法。

【问题讨论】：

你的实现看起来不错，有什么问题？
@ritaj 目前 for 循环会一次性触发所有请求，我只想在第一个请求发送响应后发送第二个请求，即处理异步流。
请求是否相互依赖？如果不是，为什么要一个接一个地发送，而不是并行发送？
只是逐渐填充进度条状态，没有请求不相互依赖。
为什么要发送多个请求而不是 Http 服务，您可以使用 HttpClient 它为您提供侦听进度事件的能力。

标签： angular ngx-bootstrap

【解决方案1】：

您应该将您的 processedCountForProgressBar 计数器增加移动到请求处理程序。

save() {
    this.max = this.cars.length;
    this.processedCountForProgressBar = 0;

    for (let i = 0; i < this.max; i++) {
        this.eventProjectService.saveProject().subscribe((data) => {
            processedCountForProgressBar++;
            // handle success
        });
    }
}

这样，只有在您收到请求响应后，计数器才会增加。

此外，根据您对错误请求的处理方式，您还可以像这样处理错误：

this.eventProjectService.saveProject().subscribe(
        (data) => {
            processedCountForProgressBar++;
            // handle success
        },
        (error) => processedCountForProgressBar++;
);

【讨论】：

【解决方案2】：

终于用递归实现了想要的功能：

Upload() {
  this.max = this.cars.length;
  this.processedCountForProgressBar  = 0;

  if (this.max > 0) {
    this.spinnerService.show();
    this.showProgressBar = true;
    this.saveProject(0);
  } else {
    this.showProgressBar = false;
  }
}

saveProject(position: number) {
  if (position < this.cars.length) {
    const project: IProject = this.cars[position];
    // call import service
    this.eventProjectService.importProject(
     // API params
    ).subscribe((data) => {
      this.processedCountForProgressBar ++;
      console.log(JSON.stringify(data));
      // handle success/error
      this.saveProject(this.processedCountForProgressBar );
    });
  } else {
    this.spinnerService.hide();    
    // return from recurssion
    return;
  }
}

【讨论】：