RxJS学习——官网已不推荐使用的方法及替代方案

 

废弃的方法及其替换

Observable.if -> iif()

根据条件订阅第一个或第二个可观察对象

Observable.if 写法

Observable.if(condition, a$, b$)

iif() 写法 [推荐]

iif(condition, a$, b$)

 

merge()

创建一个输出Observable,它可以同时发出每个给定的输入Observable中值。

v5.x

import { merge } from 'rxjs/operators';
a$.pipe(merge(b$, c$));

v6写法[推荐]

import { merge } from 'rxjs';
merge(a$, b$, c$);

v7废弃

 

concat()

创建一个输出Observable,该Observable顺序的发出每个输入Observable的所有值。

v5.x

import { concat } from 'rxjs/operators';
a$.pipe(concat(b$, c$));

v6写法

import { concat } from 'rxjs';
concat(a$, b$, c$);

v7(下一个版本)废弃

 

combineLatest()

组合多个Observables来创建一个Observable,该Observable的值根据每个输入Observable的最新值计算得出的。

v5.x

import { combineLatest } from 'rxjs/operators';
a$.pipe(combineLatest(b$, c$));

v6写法

import { combineLatest } from 'rxjs';
combineLatest(a$, b$, c$);

v7(下一个版本)废弃

 

race()

返回Observable,该Observable是源Observable和提供的Observables的组合中第一个发出项的Observable的镜像。

v5.x

import { race } from 'rxjs/operators';
a$.pipe(race(b$, c$));

v6

import { race } from 'rxjs';
race(a$, b$, c$);

v7 废弃

 

zip()

将多个Observable组合以创建一个Observable,该Observable的值是由所有输入的Observables的值按顺序计算而来的。

v5.x

import { zip } from 'rxjs/operators';
a$.pipe(zip(b$, c$));

v6

import { zip } from 'rxjs';
zip(a$, b$, c$);

v7废弃

 

 

resultSelector的迁移

在RxJS v5中,很多操作符都有一个可选的resultSelector参数,你可以在其中传递一个函数来处理操作的结果。

如果使用该参数,则必须更新代码,将结果选择函数移出原始操作符调用,并将其应用于调用的结果。

 

first() 

只发出由源Observable所发出的值中第一个(或第一个满足条件的值)

v5.x

source.pipe(
    first( predicate, resultSelector, defaultValue)
)

v6

source.pipe(
   first(predicate, defauleValue),
   map(resultSelector)
)

如果要用到index的话

source.pipe(
    map((v, i) => [v, i]),
    first(([v, i]) => predicate(v, i)),
    map(([v, i]) => resultSelector(v, i))
)

 

last() 

返回的Observable只发出由源Observable发出的最后一个值。它可以接收一个可选的predicate函数作为参数,如果传入的predicate的话则发送的不是源Observable的最后一项,而是发出源Observable中满足predicate函数的最后一项。

v5.x

source.pipe(
    last(predicate, resultSelector, defaultValue)
)

v6

source.pipe(
    last(predicate, defaultValue),
    map(resultSelector)
)

如果要用到index的话

source.pipe(
    map((v, i) => [v, i]),
    last(([v, i]) => predicate(v, i)),
    map(([v, i]) => resultSelector(v, i))
)

 

mergeMap()

当你希望平化一个内部可观察对象,但又想手动控制内部订阅的数量时,最好使用此操作符。

v5.x

source.pipe(
    mergeMap(fn1, fn2, concurrency)
)

v6

source.pipe(
    mergeMap((a, i) => fn1(a, i).pipe(
        map((b, ii) => fn2(a, b, i, ii))
    )),
    concurrency
)

 

mergeMapTo()

将每个源值投射成同一个Observable,该Observable会多次合并到输出Observable中

v5.x

source.pipe(
    mergeMapTo(a$, resultSelector)
)

v6

source.pipe(
    mergeMap((x, i) => a$.pipe(
        map((y, ii) => resultSelector(x, y, i, ii))
    ))
)

 

concatMap()

将源值投射为一个合并到输出Observable的Observable,以串行的方式等待前一个完成再合并下一个Observable

v5.x

source.pipe(
    concatMap(fn1, fn2)
)

v6

source.pipe(
    concatMap((a, i) => fn1(a, i).pipe(
        map((b, ii) => fn2(a, b, i, ii))
    ))
)

 

concatMapTo()

将每个源值投射成同一个Observable,该Observable会以串行的方式多次合并到输出Observable中。

v5

source.pipe(
    concatMapTo(a$, resultSelector)
)

v6

source.pipe(
    concatMap((x, i) => a$.pipe(
        map((y, ii) => resultSelector(x, y, i, ii))
    ))
)

 

switchMap()

将每个源值投射成Observable,该Observable会合并到输出Observable中,并且只发出最新投射的Observable中的值。

v5.x

source.pipe(
    switchMap(fn1, fn2)
)

v6

source.pipe(
    switchMap((a, i) => fn1(a, i).pipe(
        map((b, ii) => fn2(a, b, i, ii))
    ))
)

 

switchMapTo()

将每个源值投射成同一个Observable,该Observable会使用switch多次被打平到输出Observable中。

v5.x

source.pipe(
    switchMapTo(a$, resultSelector)
)

v6

source.pipe(
    switchMap((x, i) => a$.pipe(
        map((y, ii) => resultSelector(x, y, i, ii))
    ))
)

 

exhaustMap()

将每个源值投射成Observable,只有当前一个投射的Observable已经完成,这个Observable才会被合并到输出Observable中。

v5.x

source.pipe(
    exhaustMap(fn1, fn2)
)

v6

source.pipe(
    exhaustMap((a, i) => fn1(a, i).pipe(
        map((b, ii) => fn2(a, b, i, ii))
    ))
)

 

forkJoin()

v5.x

forkJoin(a$, b$, c$, resultSelector)
// or
forkJoin([a$, b$, c$], resultSelector)

v6

forkJoin(a$, b$, c$).pipe(
    map(x => resultSelector(...x))
)
// or
forkJoin([a$, b$, c$]).pipe(
    map(x => resultSelector(...x))
)

 

zip()

v5.x

zip(a$, b$, c$, resultSelector)
// or
zip([a$, b$, c$], resultSelector)

v6

zip(a$, b$, c$).pipe(
    map(x => resultSelector(...x))
)
// or
zip([a$, b$, c$]).pipe(
    map(x => resultSelector(...x))
)

v7废弃

 

combineLatest()

组合多个Observables来创建一个Observable,该Observable的值根据每个输入Observable的最新值计算得出的。

它将使用所有输入中的最新值计算公式,然后发出该公式的输出。

v5.x

combineLatest(a$, b$, c$, resultSelector)
// or
combineLatest([a$, b$, c$], resultSelector)

v6

combineLatest(a$, b$, c$).pipe(
    map(x => resultSelector(...x))
)
// or
combineLatest([a$. b$, c$]).pipe(
    map(x => resultSelector(...x))
)

 

fromEvent()

通过给“事件目标”添加事件监听器的方式创建Observable,可能会是拥有addEventListener和removeEventListener方法的对象,一个Node.js的EventEmitter,一个jQuery式的EventEmitter,一个DOM的节点集合或者DOM的HTMLCollection。当输出Observable被订阅的时候事件处理函数会被添加,当取消订阅的时候会将事件处理函数移除。

v5.x

fromEvent(button, 'click', resultSelector)

v6

fromEvent(button, 'click').pipe(
    map(resultSelector)
)

 

UMD模块名称改变

v5.x

const rx = Rx;
rx.Observable.of(1, 2, 3).map(x => x + '!!!')

v6

const { of } = rxjs;
const { map } = rxjs.operators;

of(1, 2, 3).pipe(map(x => x + '!!!'))

 

posted on 2020-07-06 15:07  白小鸽  阅读(1793)  评论(0编辑  收藏  举报