在 Angular 中一个接一个地同步调用 observable

Bla*_*ell 1 rxjs typescript angular

我有以下服务调用可用:
productService.GetAllProducts()
productService.DeleteProduct()
productService.GetCategories()
productService.DeleteCategory()

在 sudo 代码中,我需要在我的组件中执行以下操作:

  1. 使用 productService.GetAllProducts() 获取产品列表。

  2. 遍历产品列表并为每个产品调用 productService.DeleteProduct()。

  3. 一旦我可以确认上述删除都已完成(由于数据库约束),我需要使用 productService.GetCategories() 获取类别列表。循环遍历每个类别并调用 productService.DeleteCategory()。

我知道如果我有更好的后端调用来进行批量删除,我的生活会容易得多,但在这种情况下我别无选择。我需要遵循获取列表的模式,循环遍历它,对每个项目单独删除一个。

甚至可以使用 flatMap 和可观察的完整参数来做我想做的事情吗?我最大的问题是在搜索和删除所有类别之前知道代码何时完成删除所有产品。

Pic*_*cci 5

你可能想尝试一些类似的东西

productService.GetAllProducts()
.switchMap(
   products => forkJoin(products.map(product => productService.DeleteProduct(product)))
)
.switchMap(() => productService.GetCategories())
.switchMap(
   categories => forkJoin(categories.map(category => productService.DeleteCategory(category)))
)
.subscribe(() => console.log('done'))
Run Code Online (Sandbox Code Playgroud)

整个想法如下

  • GetAllProducts 返回一个 Products 数组,该数组作为参数传递给第一个 switchMap
  • Products 数组通过map转换为一个 Observables 数组,它们是 DeleteProduct 的结果 - Observable 数组forkJoin作为其参数传递给第一个
  • forkJoin 当它作为参数接收到的所有 Observable 完成时发出,因此在所有产品都被删除时发出
  • 对类别重复相同的推理

我不确定代码在语法上是否完美,但它应该足以让您了解如何继续。