javascript - 在 Angular 循环中运行下一个服务调用之前，如何等待对 Controller 的每个服务调用？

Question

我调用了这样的 Angular 服务

this.webService.add(id)
  .subscribe(result => {
    // do some stuff
  }, error => {
    // handle error
  });

// service
add(id: number): Observable < any > {
  return this.http.post(this.baseUrl + 'webservice/add/' + id, null);
}

如果我需要多次调用此函数，但我想确保在显示最终成功/失败消息之前所有调用都已完成，我该怎么做？

递归方法是否合适，或者是否有更多 Angular/javascript/回调方法来实现？

例如。

for (let i = 0; i < someLength; i++) {
  this.webService.add(id)
    .subscribe(result => {
      // do some stuff
    }, error => {
      // handle error
    });
}
// now show if they all succeeded or if one failed!

我的 Controller 是这样异步的

[HttpPost("document/{id}")]
public async Task<IActionResult> Document(int id) {
   // do something
   var resultDto = await _webRepo.AddToWebService(info);
   return Ok(resultDto);
}

Answer 1

您正在寻找forkJoin operator 。

此运算符接受多个可观察量，并在所有源可观察量完成后立即返回一个新的可观察量。你会这样使用它:

const serviceCalls = yourArray.map(id => this.webservice.add(id));
forkJoin(... serviceCalls)
 .subscribe((results) => results.forEach( //do something with your results ))