如何为数组的所有元素按顺序调用 API 函数？答案

【问题标题】：How can I call an API function in sequence for all of the elements of an array?如何为数组的所有元素按顺序调用 API 函数？
【发布时间】：2022-10-14 21:15:58
【问题描述】：

我正在使用 RxJs 与 Angular 合作，目前发现解决这个问题非常具有挑战性。

我有一个包含一些 id 的数组。

ids = [1,2,3,4]

然后我有一个可以使用 id 参数调用的 API，它从数据库中删除具有给定 id 的项目：

this.controller.deleteItem(id)

我想在数组中的每个 id 上调用这个 API。

这些 API 调用应该严格按照顺序模式一个接一个地发生，例如

this.controller.deleteItem(1) -> this.controller.deleteItem(2) 等。

在所有 api 调用完成后，我想通过以下方式获取数据：

this.controller.getData()

我该如何解决这个问题？

【问题讨论】：

标签： javascript angular rxjs

【解决方案1】：

您可以使用concat 运算符来完成此操作。

首先，您需要将 ID 列表转换为 observable 列表，方法是将数组的每个项目映射到其相应的删除操作：

const idsToDelete = [1, 2, 3];
const deleteTasks = idsToDelete.map(id => this.controller.deleteItem(id));

然后使用concat依次执行任务：

concat(...deleteTasks).subscribe((response) => {
  console.log('deleted', response);
});

【讨论】：

【解决方案2】：

forkJoin(
  ids.map<Observable<number>>((id: number) => 
    this.controller.deleteItem(id) )
).subscribe(val => this.controller.getData())

forkJoin

当所有 observables 完成后，发出每个 observables 最后发出的值。

将您的 ids 数组映射到 Observables 数组 (this.controller.deleteItem(id)) 然后将该数组传递给 forkJoin 并订阅它。 forkJoin 发出 deleteItem 的所有输出。全部成功后，您可以调用 getData()

【讨论】：

【解决方案3】：

ids.forEach(async (id) => {
  await this.controller.deleteItem(id);
};

将按顺序调用您的 api。

【讨论】：

这不是这样做的“角度方式”。在 Angular 中，我们使用 RxJS 的 observables 而不是 Promise。