EP13-zake学rxjs

215 阅读3分钟

图标库

❤️ ✨⭐ ❗❓❕❔ ✊✌️ ✋✋ ☝️

☀️ ☔ ☁️ ❄️ ⛄ ⚡ ⛅

☎️ ☎️ ⌛ ⏳ ⏰ ⌚ ➿ ✉️ ✉️ ✂️ ✒️ ✏️ ⚽ ⚾️ ⛳ ♠️ ♥️ ♣️ ♦️ ☕

⛪ ⛺ ⛲ ⛵ ⛵ ⚓ ✈️ ⛽ ⚠️ ♨️

1️⃣ 2️⃣ 3️⃣ 4️⃣ 5️⃣ 6️⃣ 7️⃣ 8️⃣ 9️⃣ 0️⃣ #️⃣ ◀️ ⬇️ ▶️ ⬅️ ↙️ ↘️ ➡️ ⬆️ ↖️ ↗️ ⏬ ⏫ ⤵️ ⤴️ ↩️ ↪️ ↔️ ↕️ ⏪ ⏩ ℹ️ ️ ️ ️ ♿ ㊙️ ㊗️ Ⓜ️ ⛔ ✳️ ❇️ ✴️ ♈ ♉ ♊ ♋ ♌ ♍ ♎ ♏ ♐ ♑ ♒ ♓ ⛎ ❎ ️ ️ ️ ♻️ ©️ ®️ ™️ ❌ ❗ ‼️ ⁉️ ⭕ ✖️ ➕ ➖ ➗ ✔️ ☑️ ➰ 〰️ 〽️ ▪️ ▫️ ◾ ◽ ◼️ ◻️ ⬛ ⬜ ✅ ⚫ ⚪

内容来源于网络,仅为个人理解记忆方便
参考文档:

1,rxjs中的几个概念

rxjs是基于可观测数据流在异步编程中应用的库。
基于观察者模式,迭代器模式和函数式编程。
观察者模式

window.addEventListener('click', function(){
  console.log('click!');
})

JS的事件监听就是天生的观察者模式。

迭代器模式
提供一种方法顺序访问一个聚合对象中的各种元素,而又不暴露该对象的内部表示。

函数式编程
函数式编程是声明式编程的体现。
命令式编程:

const arr = [1, 2, 3];
let total = 0;

for(let i = 0; i < arr.length; i++) {
  total += arr[i] * 2;
}

声明式编程:

const arr = [1, 2, 3];
let total = arr.map(x => x * 2).reduce((total, value) => total + value)

声明式编程专注于描述结果本身,不关注于到底怎么到达结果。而命令式编程是真正实现结果的步骤。
现在前端流向的mvvm框架,都提倡:编写UI结构时使用声明式编程,在编写业务逻辑时使用命令式编程。

参考文档:

1,Observable

可观察者,换言之就是数据源和事件源。这种数据源有可被观察的能力,和主动去捞数据有本质区别。

2, 高阶函数

高阶函数的概念来自于函数式编程,简单的定义就是函数的入参或者返回值是函数。

3,Subscription

订阅,订阅是所有observable统一具备的操作。
表示Observable的执行,主要用于取消Observable的执行。

4,Subject

主体。
相当于与EventEmitter,并且是将值或者事件多路推送给多个观察者的唯一方式。

5,Schedulers

调度器。
用来控制并发。

2, rxjs操作符

0.9 rxjs可视化学习网站

1,组合

1,concat

常用\color{red}{常用}
按顺序订阅Observable,只有当前面的完成了,才会执行下一个。

// 模拟 HTTP 请求
const getPostOne$ = Rx.Observable.timer(3000).mapTo({id: 1});
const getPostTwo$ = Rx.Observable.timer(1000).mapTo({id: 2});

Rx.Observable.concat(getPostOne$, getPostTwo$).subscribe(res => console.log(res));

2,combineAll

3,combineLatest

常用。\color{red}{常用。}

import { combineLatest,  interval} from 'rxjs';

const intervalOne$ = interval(1000);
const intervalTwo$ = interval(2000);

combineLatest(
    intervalOne$,
    intervalTwo$ 
).subscribe(all => console.log(all));

当任一个observable完成就输出,并加上其他的observable的最新值。

4,concatAll

5,forkJoin

常用。\color{red}{常用。}
forkJoin是Rx版的Promise.all()
直到所有的Observables都完成了,再一次性的传递值。

import { forkJoin, timer } from 'rxjs';
import { mapTo } from 'rxjs/operators';

const getPostOne$ = timer(3000).pipe(mapTo({id: 1}));
const getPostTwo$ = timer(2000).pipe(mapTo({id: 2}));
//输出的结果和Observable的发出时间没有关系,
//与在forkJoin中的排列顺序有关系。
forkJoin(getPostOne$, getPostTwo$).subscribe(res => console.log(res)) 
//输出
//[ { id: 1 }, { id: 2 } ]

6,merge

7,mergeAll

8,pairwise

9,race

10,stratWith

11,withLatestFrom

12,zip

2,条件

1,defaultEmpty

2,every

3,创建

1,create

2,empty

3,from

4,fromEvent

5,fromPromise

6,interval

7,of

8,range

9,throw

10,timer

4,错误处理

1,catchError

2,retry

3,retryWhen

5,多播

1,publise

2,multicast

3,share

4,shareReplay

6,过滤

1,debounce

2,debounceTime

3,distinctUntilChanged

4,filter

5,first

6,ignoreElements

7,last

8,sample

9,single

10,skip

11,skipUntil

12,skipWhile

13,take

14,takeUntil

15,takeWhile

16,throttle

17,throttleTime

7,转换

1,buffer

2,bufferCount

3,bufferTime

4,bufferToggle

5, bufferWhen

6,concatMap

7,concatMapTO

8,exhaustMap

9,expand

10,groupBy

11,map

12,mapTo

13,mergeMap

常用。\color{red}{常用。}

import { mapTo, mergeMap } from 'rxjs/operators';
import { forkJoin, of, timer } from 'rxjs';

const post$ = of({id: 1});
const getPostInfo$ = timer(3000).pipe(mapTo({title: "Post title"}));
const posts$ = post$.pipe(mergeMap(post => getPostInfo$)).subscribe(res => console.log(res));

当前一个observable完成之后,将值传入下一个observable并继续。

14,partition

15,pluck

16,reduce

17,scan

18,switchMap

19,window

21,windowCount

22,windowTime

23,windowToggle

24,windowWhen

8,工具

1, do

2, delay

3, delayWhen

4, dematerialize

5, let

6, timeout

7, toPromise

3,rxjs演进

2021年7月1日09:56:40 ,目前rxjs的最新版为6.5.3,共有103个操作符