具体例子:combineLatest([data$.pipe(startWith(null)),loading$,]).pipe(takeWhile(([data,loading])=>!数据||loading,true),map(([data,loading])=>loading?null:data),skip(1),distinctUntilChanged(),);我们在这里使用巧妙的takeWhile函数。它只会传递带有虚假数据(最初为null)或真实加载的发射值,这是我们需要显示微调器的时候。由于第二个参数,当条件不满足时,我们也会让最终值通过。然后我们使用map函数映射结果。如果loading标志为true,map返回的值为null,这是合理的,因为loading的时候肯定没有数据返回。当loadingflag为false时,表示数据已经返回,返回真正的数据。我们使用skip(1)是因为我们不希望我们的startWith(null)数据流通过。我们使用distinctUntilChanged因此多个空值也不会通过。这里涉及的知识点:startWith的例子://RxJSv6+import{startWith}from'rxjs/operators';从'rxjs'导入{of};//emit(1,2,3)constsource=of(1,2,3);//从0const开始example=source.pipe(startWith(0));//output:0,1,2,3constsubscribe=example.subscribe(val=>console.log(val));上面的例子订阅后,会打印通过startWith传入的初始值0,然后被of包裹的1,2,3takeWhile会继续发射数据。注意takeWhile和filter的区别在于前者会在条件为假时触发一个complete事件,而后者不会。下面是具体的对比://RxJSv6+import{of}from'rxjs';import{takeWhile,filter}from'rxjs/operators';//emit3,3,3,9,1,4,5,8,96,3,66,3,3,3constsource$=of(3,3,3,9,1,4,5,8,96,3,66,3,3,3);//允许values直到valuefromsource等于3,然后completesource$.pipe(takeWhile(it=>it===3))//log:3,3,3.subscribe(val=>console.log('takeWhile',val));source$.pipe(filter(it=>it===3))//日志:3,3,3,3,3,3,3.subscribe(val=>console.log('过滤',val));takeWhile遇到Observable中的第四个元素即9时会触发complete事件,所以Observable中剩余的所有元素将不再有机会被发射,而filter则不会,最终会打印所有元素在Observable3中。
