头图

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

Jerry Wang的SAP技术专栏
SAP成都研究院开发专家,SAP社区导师,SAP中国技术大使
868 声望
1.6k 粉丝
0 条评论
推荐阅读
SAP OData 开发实战教程:从入门到提高
本教程根据笔者在 SAP 研究院工作多年的实战经验,计划通过 300 篇以上的文章篇幅,深入介绍 SAP 三大主流的 OData 开发技术:

JerryWang_汪子熙

封面图
从零搭建 Node.js 企业级 Web 服务器(十五):总结与展望
总结截止到本章 “从零搭建 Node.js 企业级 Web 服务器” 主题共计 16 章内容就更新完毕了,回顾第零章曾写道:搭建一个 Node.js 企业级 Web 服务器并非难事,只是必须做好几个关键事项这几件必须做好的关键事项就...

乌柏木60阅读 6k评论 16

再也不学AJAX了!(二)使用AJAX ① XMLHttpRequest
「再也不学 AJAX 了」是一个以 AJAX 为主题的系列文章,希望读者通过阅读本系列文章,能够对 AJAX 技术有更加深入的认识和理解,从此能够再也不用专门学习 AJAX。本篇文章为该系列的第二篇,最近更新于 2023 年 1...

libinfs39阅读 6.2k评论 12

封面图
从零搭建 Node.js 企业级 Web 服务器(一):接口与分层
分层规范从本章起,正式进入企业级 Web 服务器核心内容。通常,一块完整的业务逻辑是由视图层、控制层、服务层、模型层共同定义与实现的,如下图:从上至下,抽象层次逐渐加深。从下至上,业务细节逐渐清晰。视图...

乌柏木39阅读 7.1k评论 6

CSS 绘制一只思否猫
欢迎关注我的公众号:前端侦探练习 CSS 有一个比较有趣的方式,就是发挥想象,绘制各式各样的图案,比如来绘制一只思否猫?思否猫,SegmentFault 思否的吉祥物,是一只独一无二、特立独行、热爱自由的(>^ω^&lt...

XboxYan42阅读 2.8k评论 14

封面图
还在用 JS 做节流吗?CSS 也可以防止按钮重复点击
举个例子:一个保存按钮,为了避免重复提交或者服务器考虑,往往需要对点击行为做一定的限制,比如只允许每300ms提交一次,这时候我想大部分同学都会到网上直接拷贝一段throttle函数,或者直接引用lodash工具库

XboxYan34阅读 2.2k评论 2

封面图
从零搭建 Node.js 企业级 Web 服务器(二):校验
校验就是对输入条件的约束,避免无效的输入引起异常。Web 系统的用户输入主要为编辑与提交各类表单,一方面校验要做在编辑表单字段与提交的时候,另一方面接收表单的接口也要做足校验行为,通过前后端共同控制输...

乌柏木32阅读 6.1k评论 9

868 声望
1.6k 粉丝
宣传栏