关于rxjs:rxjs-里-CombineLatest-操作符的一个使用场景

一个具体的例子：

combineLatest([data$.pipe(startWith(null)),
  loading$,
]).pipe(takeWhile(([data, loading]) => !data || loading, true),
  map(([data, loading]) => loading ? null : data),
  skip(1),
  distinctUntilChanged(),);

咱们在这里应用奇妙的 takeWhile 函数。它只会让带有虚伪数据 (falsy data)（初始 null）或 truthy loading 的发射值通过，这正是咱们须要显示 spinner 的时候。当条件不满足时，因为第二个参数，咱们也让最终值通过。

而后咱们应用 map 函数映射后果。如果 loading 标记位为 true，则 map 返回的值为 null，这很正当，因为 loading 的时候是必定没有数据返回的。当 loading 标记位为 false，阐明数据返回结束，则返回实在的 data.

咱们应用 skip(1) 是因为咱们不心愿咱们的 startWith(null) 数据流通过。咱们应用 distinctUntilChanged 所以多个空值也不会通过。

这里波及到的知识点：

1. startWith

一个例子：

// RxJS v6+
import {startWith} from 'rxjs/operators';
import {of} from 'rxjs';

//emit (1,2,3)
const source = of(1, 2, 3);
//start with 0
const example = source.pipe(startWith(0));
//output: 0,1,2,3
const subscribe = example.subscribe(val => console.log(val));

下面的 example 订阅后，会打印通过 startWith 传入的初始值 0，而后是 of 包裹的 1，2，3

2. takeWhile

这个 Operator 会继续发射数据，间接传入的条件不满足，则终止数据 emit.

留神 takeWhile 和 filter 的区别在于，前者在遇到 condition 为 false 时，会 fire 一个 complete 事件，而后者不会。

上面是一个具体的比拟：

// RxJS v6+
import {of} from 'rxjs';
import {takeWhile, filter} from 'rxjs/operators';

// emit 3, 3, 3, 9, 1, 4, 5, 8, 96, 3, 66, 3, 3, 3
const source$ = of(3, 3, 3, 9, 1, 4, 5, 8, 96, 3, 66, 3, 3, 3);

// allow values until value from source equals 3, then complete
source$
  .pipe(takeWhile(it => it === 3))
  // log: 3, 3, 3
  .subscribe(val => console.log('takeWhile', val));

source$
  .pipe(filter(it => it === 3))
  // log: 3, 3, 3, 3, 3, 3, 3
  .subscribe(val => console.log('filter', val));

takeWhile 在遇到 of Observable 里第四个元素即 9 时，就会 fire complete 事件，因而 of Observable 余下的所有元素，再没有被 emit 的机会，而 filter 则不然，最初会打印 of Observable 里所有的元素 3.