![](https://img-blog.csdnimg.cn/img_convert/288798b323c58dd1fcae6221dddc6ed2.png)

loading 从 true 变为 false：
![](https://img-blog.csdnimg.cn/img_convert/d4ccf468f7c2703782047097ec391273.png)

单从这个 initiator 栏，是很难找到是哪一行应用代码，发起的这个 cart 加载：
![](https://img-blog.csdnimg.cn/img_convert/1ea7ca3beb72cd040f0731233f9d1124.png)

根据 `[Cart] Load Cart` 关键字搜索是能找到的：

![](https://img-blog.csdnimg.cn/img_convert/54b340ea4fb6d29b7fe85fc7c55afbf5.png)

![](https://img-blog.csdnimg.cn/img_convert/3f8222ac89017f969a298dc1b6a72efe.png)

最后找到了准确的代码行数，调用 CartConnector 去读取数据：
![](https://img-blog.csdnimg.cn/img_convert/88959713041deb4297b0250d64e5be58.png)

首先查看针对这个 cart，是否存在 pending 请求：
![](https://img-blog.csdnimg.cn/img_convert/e80359966bbb4aafeb0fa2d04be1af9e.png)

使用 `withLatestFrom` 操作符，查看这个 cart 是否有 `PendingProcesses`：
```typescript
 withLatestFrom(
              this.store.pipe(
                select(
                  getCartHasPendingProcessesSelectorFactory(payload.cartId)
                )
              )
            )
```

这里使用 withLatestFrom，从另一个 Observable 里进行数据查询。

下面这段代码组合了两个按照不同时间间隔，分别发射递增整数序列的 Observable：

```typescript
// RxJS v6+
import { withLatestFrom, map } from 'rxjs/operators';
import { interval } from 'rxjs';

//emit every 5s
const source = interval(5000);
//emit every 1s
const secondSource = interval(1000);
const example = source.pipe(
  withLatestFrom(secondSource),
  map(([first, second]) => {
    return `First Source (5s): ${first} Second Source (1s): ${second}`;
  })
);
/*
  "First Source (5s): 0 Second Source (1s): 4"
  "First Source (5s): 1 Second Source (1s): 9"
  "First Source (5s): 2 Second Source (1s): 14"
  ...
*/
const subscribe = example.subscribe(val => console.log(val));
```

因为 host Observable 的时间间隔为 5 秒，所以每个5秒钟，console 面板新增一条输出，且 host Observable 的递增值为 5，但此时因为使用 withLatestFrom 操作符传入的输入 Observable 的时间间隔为 1 秒，因此每个 5 秒过去后，second Observable 的递增序列为 5：

![](https://img-blog.csdnimg.cn/img_convert/e01555f87f5b584d5e8b5dfa03a532e3.png)

如果有，就不继续进行下去了，通过 `filter` 操作符阻止进一步执行。

![](https://img-blog.csdnimg.cn/img_convert/4d93a3a1955e02dc8bea1fb4258c8869.png)

能进行到代码 60 行，说明此时没有 pendingProcess 施加在 Cart 上。

![](https://img-blog.csdnimg.cn/img_convert/2976d75edce0aeb9dd9a6ed5f92bc377.png)

ActiveCartServicei 依赖到 MultiCartService:

![](https://img-blog.csdnimg.cn/img_convert/62867302287e8698effee3bf9dc4ed16.png)

在 `isStableSelector` 里加上打印语句：

![](https://img-blog.csdnimg.cn/img_convert/373f90d0941559d7b964c276ded1086d.png)

会频繁触发：
![](https://img-blog.csdnimg.cn/img_convert/fa806b3754b868f0c3fde1da419c3b31.png)

比如下面这个调用会触发：
![](https://img-blog.csdnimg.cn/img_convert/841e198035f66c44a62345bb8372ad83.png)

此处加载当前 user 的 cart：
![](https://img-blog.csdnimg.cn/img_convert/9051a9540eba80e4dd1a0e1ca6a8f8f6.png)

为什么会触发下面这段代码？因为 Spartacus 有大量 createSelect 的调用：
![](https://img-blog.csdnimg.cn/img_convert/5fb1b0a595f4c670781ac35a67b55a80.png)

如下图所示：
![](https://img-blog.csdnimg.cn/img_convert/64c5a1b01fa239f926d189aade582d39.png)

createSelector 的输入参数由一个 Selector 和 projector 组成。

![](https://img-blog.csdnimg.cn/img_convert/9f22f7607e0e0c38c2a448500de943d2.png)

createSelector 支持数量可变的参数，前 n - 1 个参数都被当成 selector 处理，最后一个参数为 projector：
![](https://img-blog.csdnimg.cn/img_convert/e2a3151f71f4c09ab1fed6dac044f03f.png)

下图 `getCartIsStableSelectorFactory` 实现体的第 58 行代码为什么会被调用？

![](https://img-blog.csdnimg.cn/img_convert/86b5b1bc68c8c3f0f41717262f8143bb.png)

是因为 MultiCartService 的 isStable 方法在 Cart Load 场景里被调用？

![](https://img-blog.csdnimg.cn/img_convert/ac769bfb201785e286d136496a29e75c.png)

确实如此：
![](https://img-blog.csdnimg.cn/img_convert/c5aa74e1cddb977f0511fe9b547ed02f.png)

所以每一次可能引起 isStable 返回值发生变化的时候，`getCartIsStableSelectorFactory` 里的 projector 都会被调用，重新计算 isStable 的最新值。

ITPub博客

SAP 电商云 Spartacus UI ActiveCartService isStable 调用何时返回 true

最新文章