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

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM