当前位置: 首页 > Web前端 > HTML

rxjs中Skip运算符的一个使用场景

时间:2023-03-28 16:37:39 HTML

skipoperator允许我们忽略一个源的前x个发射。当我们有一个总是在我们希望忽略的订阅上发出一些值的可观察对象时,使用此运算符。比如Observableemit的前几个值并不是我们感兴趣的值。另一种情况是我们订阅了Replay或者BehaviorSubject,不需要对初始值进行操作,只关心数据在初始值之后发出。在这种情况下,skip运算符非常有用。有时我们可以通过使用带索引的过滤器运算符来实现与使用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条件失败,我们终止了让数据通过的流(数据不是假的,加载是假的)。加载需要1.5秒。现在我们有data$发出null并且加载为真。这与takeWhile条件匹配并映射到null。我们使用此null来显示宏流中的加载。下一个data$发出该值,但加载仍然为真。所以takeWhile允许它,并且该值再次映射到null,这是由distinctUntilChanged过滤的。整整一秒后,load发出false并且takeWhile终止流。lastemission映射到data$lastemission的值,我们隐藏加载指示器并显示数据。加载时间超过2秒。开始是一样的,但我们现在加载false而不是data$发出的值,因为不再需要显示加载指示器。但是数据仍然是空的,所以takeWhile使流保持活动状态并将其映射为空。但是一旦我们从data$中获取了值——流就完成了,地图返回了我们想要显示的实际数据。