关于rxjs:rxjs-里-Skip-操作符的一个使用场景

2次阅读

共计 986 个字符，预计需要花费 3 分钟才能阅读完成。

skip 操作符容许咱们疏忽源的前 x 个排放。当咱们有一个始终在 subscription 上收回心愿疏忽的某些值的可察看对象时，就能够应用这个操作符。比方 Observable emit 的前几个值并不是咱们感兴趣的值，另一种状况是咱们订阅了 Replay 或 BehaviorSubject，并且不须要对初始值进行操作，而只关怀初始值之后的数据 emit. 这种状况下，skip 操作符十分有用。

有时候咱们能够通过应用带有索引的 filter 操作符来达到和应用 skip 同样的成果：

filter((val, index) => index > 1)

来看看一个事实我的项目中的例子。

应用 skip 组合出的 Observable 代码如下：

combineLatest([data$.pipe(startWith(null)),
  loading$,
]).pipe(takeWhile(([data, loading]) => !data || loading, true),
  map(([data, loading]) => loading ? null : data),
  skip(1),
  distinctUntilChanged(),);

下面的代码执行时候三种不同的状况。

加载工夫不到 1 秒。咱们的初始 null 被 skip(1) 跳过，并且 data$ 在 loader 收回 true 之前收回了 true. 这意味着 takeWhile 条件失败，咱们终止让数据通过的流（数据是 not falsy，loading 是 false）.
加载耗时 1.5 秒。当初咱们有 data$ 收回 null 并且 loading 是 true. 这合乎 takeWhile 条件并被映射为 null。咱们应用这个 null 来显示宏流中的 loading. 下一个 data$ 收回该值，但加载依然为真。所以 takeWhile 容许它，并且该值再次映射到 null，该 null 由 distinctUntilChanged 过滤。整秒过后，加载会收回 false 并 takeWhile 终止流。最初一次发射被映射到 data$ 上次发射的值，咱们暗藏加载指示器并显示数据。
加载工夫超过 2 秒。结尾是一样的，然而咱们当初加载的不是 data$ 收回的值，而是收回 false，因为不再须要显示加载批示符。然而数据依然为空，因而 takeWhile 放弃流处于活动状态并将其映射为空。然而一旦咱们从 data$ 中取得值——流就实现了，map 返回咱们想要显示的理论数据。

正文完