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 + '!!!'))