如何避免使用嵌套的 observables Angular 8

Question

我使用 typicode/json-server 创建了自己的db.json服务器，如下所示 -

 {
    "cart": [
        {
          "cartId": 1,
          "products": [
            { "pId": 1, "name": "aaa", "quantity":.. },
            { "pId": 2, "name": "bbb", "quantity":.. }
          ]
        },
        {
          "cartId": 2,
          "products": [{ "pId": 2, "name": "bbb", "quantity":.. }]
        }
      ]
}

这是将产品添加到购物车的方法：

addProductToCart((productObj:any)) {
    this.getCart() // uses POST, reference '/cart', returns observable
    .subscribe(cartId => {
      this.getProducts(cartId, productObj.pId) // uses GET, reference '/cart/cartId/pId', returns observable
      .subscribe(product => {
        // update properties of product here..
      });
    });
  }

我是 Angular 的新手，我知道嵌套的可观察对象不是最佳实践。

如何避免使用嵌套的可观察对象？

有没有办法用不同的方法编写相同的方法？

Answer 1

我建议查看 RxJS 提供的映射运算符。

有3 种类型（我知道）： switchMap ， concatMap ， mergeMap

每个都将一个可观察发射映射到另一个可观察发射，然后订阅并传播到外部订阅处理程序。

你现在可能会问，如果它们都做同样的事情，为什么会有 3 个不同的名称呢？ 好吧，他们所有人的做法都略有不同。 ;)

首先 - switchMap ：可观察对象是流，因此对于每个新的发射switchMap ，将其转换为另一个（内部）可观察对象，但是当外部可观察对象发出新值时，早期的内部订阅将被取消，因此一次只能进行 1 个内部订阅.

mergeMap ：顾名思义，它将所有内部可观察对象“合并”到流中，并在没有任何特殊顺序的情况下发出它们。

concatMap ：几乎像mergeMap但它尊重顺序，因此外部流发出的项目也以相同的顺序从内部 observable 发出。

什么时候用什么？
对于顺序相关的流，您显然希望使用concatMap ，如果您更看重吞吐量而不是顺序，请使用mergeMap 。 switchMap最适合您“不关心”旧值的搜索和流，但要小心，因为switchMap取消了内部可观察对象 http 调用可能无法完成。

当然，在 RxJs 中还有很多东西有待发现（例如映射运算符的resultSelector ）。 这只是一个简短的概述。

延伸阅读：
https://medium.com/@luukgruijs/understanding-rxjs-map-mergemap-switchmap-and-concatmap-833fc1fb09ff
https://www.learnrxjs.io/operators/transformation/switchmap.html
https://www.learnrxjs.io/operators/transformation/mergemap.html
https://www.learnrxjs.io/operators/transformation/concatmap.html
RxJs 文档。 （他们有漂亮的大理石图）

现在以你的例子为例：

addProductToCart(productObj: any) {
    this.getCart()
        .pipe(
            switchMap(cartId => this.getProducts(cartId, productObj.pId))
        )
        .subscribe(product => {
            // update properties of product here..
        });
}

我假设getCart()只发出一次购物车，我们不需要担心取消内部订阅。 如果假设成立，您还可以使用这些运算符中的任何其他运算符。

Answer 2

您可以使用switchMap将您的订阅者减少为一个：

 import { switchMap } from "rxjs/operators"; addProductToCart((productObj: any)) { this.getCart() .pipe( switchMap(cardId => this.getProducts(cartId, productObj.pId)) // chain requests dependently .subscribe(product => { // update properties of product here.. }); }); }