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

58次阅读

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

正文完
 0