rxjs探索之路

2022-09-29

Rxjs的探索之路(创建类api)

何为函数式编程？

函数式编程就是⾮常强调使⽤函数来解决问题的⼀种编程⽅式。

你可能会问，使⽤函数不是任何⼀种语⾔、任何⼀种编程⽅式都有的⽅式吗？这根本不算是什么特点啊。的确，⼏乎任何⼀种编程语⾔都⽀持函数，但是函数式编程对函数的使⽤有⼀些特殊的要求，这些要求包括以下⼏点：

声明式（Declarative）
纯函数（Pure Function）
数据不可变性（Immutability）

Api功能分类

创建类（creation）
转化类（transformation）
过滤类（filtering）
合并类（combination）
多播类（multicasting）
错误处理类（error Handling）
辅助⼯具类（utility）
条件分⽀类（conditional&boolean）
数学和合计类（mathmatical&aggregate）

创建类 (creation)

1.of

1
2
3

import { of } from "rxjs";
// 生成指定数据
of(1, 2, 3).subscribe((x) => console.log(x));

2.range

1
2
3

import { range } from "rxjs";
// 生成指定范围内的数据
range(1, 10).subscribe((x) => console.log(x));

3.generate

import { generate } from "rxjs";
// 类似for循环生成数据
for (let i = 2; i < 10; i += 2) {
  console.log(i * i);
}
console.log("================");
generate(
  2,
  (value) => value < 10,
  (value) => value + 2,
  (value) => value * value
).subscribe((x) => console.log(x));

4.repeat

// 重复数据的数据流
import { of, repeat } from "rxjs";
const source$ = of(1);
source$.pipe(repeat(3)).subscribe(console.log);

5.empty,never,throw

1	import{ EMPTY, NEVER, throwError } from "rxjs";

6.interval,timer

import { interval } from "rxjs";
// 指定间隔之后吐出数据
interval(1000).subscribe((x) => {
  console.log(new Date());
  console.log(x);
});

import { timer } from "rxjs";
console.log(new Date());
// 启动3秒之后吐出数据
timer(3000).subscribe((x) => {
  console.log(new Date());
  console.log(x);
});

7.from

1
2
3

import { from } from "rxjs";
// from会把一切都当做iterable来对待
from([1, 2, 3]).subscribe(console.log);

8.fromEvent

import { fromEvent } from "rxjs";
// fromEvent
let clickCount = 0;
fromEvent(document.querySelector("#clickMe")!, "click").subscribe(() => {
  (document.querySelector("#text") as HTMLElement).innerText =
    (++clickCount).toString();
});

9.fromEventPattern

import { fromEventPattern } from "rxjs";

const emitter = new EventEmitter();

const addHandler = (handler) => {
  emitter.addListener("msg", handler);
};

const removeHandler = (handler) => {
  emitter.removeHandler("msg", handler);
};

const source$ = fromEventPattern(addHandler, removeHandler);

const subscription = source$.subscribe(console.log);

emitter.emit("msg", "Hello");
emitter.emit("msg", "World");

subscription.unsubscribe();
emitter.emit("msg", "end");

10.repeatWhen

import { interval, of, repeatWhen } from "rxjs";

const notifier = () => {
  return interval(1000);
};

const source$ = of(1, 2, 3);
// 每隔一段时间重新触发source，被notifier激活
source$.pipe(repeatWhen(notifier)).subscribe((x) => {
  console.log(new Date());
  console.log(x);
});

11.defer

import { defer, of } from "rxjs";

const observableFactory = () => of(1, 2, 3);
// defer包裹的observable只有再被调用的时候才会生成
const source$ = defer(observableFactory);