rxjs 裏 Skip 操作符的一個使用場景详情 - rxjs,angular,sap,saprfc,前端註銷日志

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 秒。我們的初始 null 被 skip(1) 跳過，並且 data$ 在 loader 發出 true 之前發出了 true. 這意味着 takeWhile 條件失敗，我們終止讓數據通過的流（數據是 not falsy，loading 是 false）.
加載耗時 1.5 秒。現在我們有 data$ 發出 null 並且 loading 是 true. 這符合 takeWhile 條件並被映射為 null。我們使用這個 null 來顯示宏流中的 loading. 下一個 data$ 發出該值，但加載仍然為真。所以 takeWhile 允許它，並且該值再次映射到 null ，該 null 由 distinctUntilChanged 過濾。整秒過後，加載會發出 false 並 takeWhile 終止流。最後一次發射被映射到 data$ 上次發射的值，我們隱藏加載指示器並顯示數據。
加載時間超過 2 秒。開頭是一樣的，但是我們現在加載的不是 data$ 發出的值，而是發出 false ，因為不再需要顯示加載指示符。但是數據仍然為空，因此 takeWhile 保持流處於活動狀態並將其映射為空。但是一旦我們從 data$ 中獲得值——流就完成了，map 返回我們想要顯示的實際數據。