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

举报
Jerry Wang 发表于 2022/05/14 21:53:26 2022/05/14
【摘要】 skip 操作符允许我们忽略源的前 x 个排放。 当我们有一个始终在 subscription 上发出希望忽略的某些值的可观察对象时,就可以使用这个操作符。比如 Observable emit 的前几个值并不是我们感兴趣的值,另一种情况是我们订阅了 Replay 或 BehaviorSubject,并且不需要对初始值进行操作,而只关心初始值之后的数据 emit. 这种情况下,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. 加载时间不到 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 返回我们想要显示的实际数据。

【版权声明】本文为华为云社区用户原创内容,转载时必须标注文章的来源(华为云社区)、文章链接、文章作者等基本信息, 否则作者和本社区有权追究责任。如果您发现本社区中有涉嫌抄袭的内容,欢迎发送邮件进行举报,并提供相关证据,一经查实,本社区将立刻删除涉嫌侵权内容,举报邮箱: cloudbbs@huaweicloud.com
  • 点赞
  • 收藏
  • 关注作者

评论(0

0/1000
抱歉,系统识别当前为高风险访问,暂不支持该操作

全部回复

上滑加载中

设置昵称

在此一键设置昵称,即可参与社区互动!

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。