RxJS 系列 – 大杂烩

前言

RxJS 有太多方法了, 想看完整的可以去看 REFERENCE – API List, 这篇介绍一些非 operator 的常用方法.

NEVER

NEVER.subscribe({
  complete: () => console.log('complete'), // never be called
  next: () => console.log('next'), // never be called
  error: () => console.log('error'), // never be called
});

就是一个永远不会发布的流...有啥用呢?

比如, 有一个 slide down 的方法, 它支持开关控制

setupSlideDown({
  targetElement: cardWrapper,
  open$: fromEvent(openBtn, 'click'),
  close$: fromEvent(closeBtn, 'click'),
});

所以需要传入 open$ 和 close$ 流. 但是有一个奇葩场景. 这个场景是没有关闭的. 所以就没有 closeBtn click event.

那这时 NEVER 就排上用场了.

setupSlideDown({
  targetElement: cardWrapper,
  open$: fromEvent(openBtn, 'click'),
  close$: NEVER,
});

EMPTY

EMPTY.subscribe({
  complete: () => console.log('complete'), // call immediately
  next: () => console.log('next'), // never be called
  error: () => console.log('error'), // never be called
});

它是一个立马结束的流. 和 NEVER 的是用意图差不多, 都是用在那些特殊场景的.

它也类似我们经常会 用 empty array, empty string, empty function 作为参数或返回. 这样后续就容易统一处理.

lastValueFrom & firstValueFrom

lastValueFrom(of(1, 2, 3)).then(value => {
  console.log(value); // 3
});

firstValueFrom(of(1, 2, 3)).then(value => {
  console.log(value); // 1
});

lastValueFrom 是 v7.0 后用来替代以前的 .toPromise 的。

它会监听流的发布，等到流 complete 后，resolve 最后一个 value。

firstValueFrom 同样监听流发布，发布第一个之后它会 unsubscribe 流，然后 resolve first value。

finalize

finalize 是一个 operator。它用来监听 Observable 的 “结束” 事件 -- error, complete, unsubscribe

const subject = new Subject();
const obs = subject.asObservable();
const subscription = obs.pipe(finalize(() => console.log('finalize'))).subscribe();

// 下面 3 种情况，finalize 都会接收到
subject.error('error');
subject.complete();
subscription.unsubscribe();

Observable.subscribe 只能监听到 next, error, complete。只有 new Observable 的 callback 函数才可以监听到 unsubscribe。

finalize operator 内部原理是它 wrap 了一层 Observable，unsubscribe 依然是靠 Observable 的 callback 函数监听到的。