Reactive Streams

用弹珠图看见 RxJS 数据流

15 个官方文档模式，覆盖创建、转换、时间过滤、组合、高阶映射、错误恢复与共享订阅。这里根据受支持的操作符模式生成时间线，不执行任意代码。

Official patterns

RxJS 示例目录

15 个可播放示例

Supported pattern matcher

受支持的 RxJS 模式

import { from, map, filter } from 'rxjs'

const result$ = from([1, 2, 3, 4, 5]).pipe(
  map(value => value * 2),
  filter(value => value > 4)
)

result$.subscribe(console.log)

识别结果：map(x × 2) → filter(x > 4)

RxJS 官方文档 ↗

支持的操作符模式

fromEvent(click) → map(clientX) · map(x × 2) → filter(x > 4) · scan((total, value) => total + value, 0) · distinctUntilChanged() · debounceTime(300) · throttleTime(300) · source$.pipe(combineLatestWith(other$)) · click$.pipe(withLatestFrom(timer$)) · concatMap(value => request(value)) · mergeMap(value => request(value)) · switchMap(query => request(query)) · exhaustMap(() => submitRequest()) · catchError(() => of('fallback')) · retry(2) → finalize(cleanup) · shareReplay({ bufferSize: 1, refCount: true })

map(x × 2) → filter(x > 4)

动态弹珠图

1 / 5

source$1

operator2

result$

1 被映射成 2

2 不满足 value > 4，被 filter 拦截。