原文：
https://rxjs-dev.firebaseapp.com/guide/v6/migration
轉(zhuǎn)載地址：
https://segmentfault.com/a/1190000014956260
節(jié)選
修改import路徑
建議TypeScript開(kāi)發(fā)人員使用rxjs-tslint來(lái)重構(gòu)import路徑。
RxJS團(tuán)隊(duì)設(shè)計(jì)了以下規(guī)則來(lái)幫助JavaScript開(kāi)發(fā)人員重構(gòu)import路徑：
- rxjs: 包含創(chuàng)建方法，類型，調(diào)度程序和工具庫(kù)。
import { Observable, Subject, asapScheduler, pipe, of, from, interval, merge, fromEvent } from 'rxjs';
- rxjs/operators: 包含所有的管道操作符
import { map, filter, scan } from 'rxjs/operators';
- rxjs/webSocket: 包含websocket subject實(shí)現(xiàn).
import { webSocket } from 'rxjs/webSocket';
- rxjs/ajax: 包含Rx ajax實(shí)現(xiàn).
import { ajax } from 'rxjs/ajax';
- rxjs/testing: 包含RxJS的測(cè)試工具庫(kù).
import { TestScheduler } from 'rxjs/testing';
使用管道操作而不是鏈?zhǔn)讲僮?/h3>
請(qǐng)按照如下步驟將您的鏈?zhǔn)讲僮魈鎿Q為管道操作：
- 從rxjs-operators中引入您需要的操作符
注意：由于與Javascript保留字沖突，以下運(yùn)算符名字做了修改：do -> tap, catch ->
catchError, switch -> switchAll, finally -> finalize
import { map, filter, catchError, mergeMap } from 'rxjs/operators';
-
使用pipe()包裹所有的操作符方法。確保所有操作符間的.被移除，轉(zhuǎn)而使用,連接。
記?。。?！有些操作符的名稱變了?。?！
以下為升級(jí)示例：
// Rxjs5寫(xiě)法，操作符鏈
source
.map(x => x + x)
.mergeMap(n => of(n + 1, n + 2)
.filter(x => x % 1 == 0)
.scan((acc, x) => acc + x, 0)
)
.catch(err => of('error found'))
.subscribe(printResult);
// Rxjs寫(xiě)法，需要用pipe包一下所有的操作符
source.pipe(
map(x => x + x),
mergeMap(n => of(n + 1, n + 2).pipe(
filter(x => x % 1 == 0),
scan((acc, x) => acc + x, 0),
)),
catchError(err => of('error found')),
).subscribe(printResult);
注意我們?cè)谝陨洗a中嵌套使用了pipe()。
Ben Lesh在ng-conf 2018上解釋了為什么我們應(yīng)該使用管道操作符。
其他RxJs6棄用
Observable.if and Observable.throw
Observable.if已被iif()取代，Observable.throw已被throwError()取代。您可使用rxjs-tslint將這些廢棄的成員方法修改為函數(shù)調(diào)用。
代碼示例如下：
OBSERVABLE.IF > IIF()
// deprecated
Observable.if(test, a$, b$);
// use instead
iif(test, a$, b$);
OBSERVABLE.ERROR > THROWERROR()
// deprecated
Observable.throw(new Error());
//use instead
throwError(new Error());
已棄用的方法
根據(jù)遷移指南，以下方法已被棄用或重構(gòu)：
- merge
import { merge } from 'rxjs/operators';
a$.pipe(merge(b$, c$));
// becomes
import { merge } from 'rxjs';
merge(a$, b$, c$);
- concat
import { concat } from 'rxjs/operators';
a$.pipe(concat(b$, c$));
// becomes
import { concat } from 'rxjs';
concat(a$, b$, c$);
- combineLatest
import { combineLatest } from 'rxjs/operators';
a$.pipe(combineLatest(b$, c$));
// becomes
import { combineLatest } from 'rxjs';
combineLatest(a$, b$, c$);
- race
import { race } from 'rxjs/operators';
a$.pipe(race(b$, c$));
// becomes
import { race } from 'rxjs';
race(a$, b$, c$);
- zip
import { zip } from 'rxjs/operators';
a$.pipe(zip(b$, c$));
// becomes
import { zip } from 'rxjs';
zip(a$, b$, c$);
總結(jié)
RxJS 6帶來(lái)了一些重大改變，但是通過(guò)添加rxjs-compat軟件包可以緩解這一問(wèn)題，該軟件包允許您在保持v5代碼運(yùn)行的同時(shí)逐漸遷移。對(duì)于Typescript用戶，其他中包括大多數(shù)Angular開(kāi)發(fā)人員，tslint提供了大量的自動(dòng)重構(gòu)功能，使轉(zhuǎn)換變得更加簡(jiǎn)單。
任何升級(jí)與代碼修改都會(huì)引入一些bug到代碼庫(kù)中。因此請(qǐng)務(wù)必測(cè)試您的功能以確保您的終端用戶最終接受到相同的質(zhì)量體驗(yàn)。
個(gè)人備注，現(xiàn)在網(wǎng)上大部分教程還是rxjs5的，rxjs6變化還是蠻大的，學(xué)習(xí)時(shí)候要留意區(qū)別。
