rxjs 里 Skip 操作符的一个使用场景

2022-04-15 23:31:41 阅读：164 来源： 互联网

标签：loading takeWhile Skip 操作符 rxjs null data skip 加载

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 返回我们想要显示的实际数据。

标签：loading,takeWhile,Skip,操作符,rxjs,null,data,skip,加载
来源： https://www.cnblogs.com/sap-jerry/p/16151500.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

rxjs 里 Skip 操作符的一个使用场景