如何迭代地进行多个 API 调用并在 Angular 中完成所有操作后获得结果答案

【问题标题】：How to make a multiple API Calls iteratively and get the result when all are done in Angular如何迭代地进行多个 API 调用并在 Angular 中完成所有操作后获得结果
【发布时间】：2021-06-03 08:55:00
【问题描述】：

我需要制作以下 API

<baseURL>/users/1
<baseURL>/users/2
<baseURL>/users/3
.
.
.
<baseURL>/users/10

现在我需要对上述 URL 进行 API 调用，当一切都完成后，我需要获得最终的成功响应。 API调用不需要按顺序进行，它们也可以并行进行，但唯一需要的是我需要获得最后一次成功发送的API的最终结果，因为目前我正在做的是在下面使用Fork Join方式

    let user1= this.http.get(baseurl+'users/1');
    let user2= this.http.get(baseurl+'users/2');//In the similar way I have 10 values

    forkJoin([user1, user2]).subscribe(results => {
      // results[0] is our user1
      // results[1] is our user2
    });

现在，当我这样做时，如果 users/5 API 调用中断，那么所有后续的 API 调用都不会进行。如果任何 API 调用在两者之间中断，我不希望这种中断。我期待某种 Promise.allSettled 功能。我更喜欢使用 RXJS 方式

我正在使用 Angular 9

【问题讨论】：

标签： javascript angular typescript promise rxjs

【解决方案1】：

您可以捕获错误以确保源 observables 仍然完整，以便 forkJoin 仍然发出：

let user1 = this.http.get(baseurl + 'users/1').pipe(
  catchError(error => of({ error }))
);
let user2 = this.http.get(baseurl + 'users/2').pipe(
  catchError(error => of({ error }))
);

forkJoin([user1, user2]).subscribe(results => {
  // Handle results
});

然后您可以保存重复：

function getUser(id) {
  return this.http.get(baseurl + 'users/' + id).pipe(
    catchError(error => of({ error }))
  );
}

let user1 = getUser('1');
let user2 = getUser('2');

forkJoin([user1, user2]).subscribe(results => {
  // Handle results
});

你甚至可以模仿Promise.allSettled：

function getUser(id) {
  return this.http.get(baseurl + 'users/' + id).pipe(
    map(user => ({
      status: 'fulfilled',
      value: user
    })),
    catchError(error => of({
      status: 'rejected',
      reason: error
    }))
  );
}

let user1 = getUser('1');
let user2 = getUser('2');

forkJoin([user1, user2]).subscribe(results => {
  // Handle results
});

【讨论】：