摘要：有哪些新變化于年月日正式發布，為開發人員帶來了一些令人興奮的增補和改進。不要移除包，直到你將所有的鏈式操作修改為管道操作符。

RxJs 6于2018年4月24日正式發布，為開發人員帶來了一些令人興奮的增補和改進。Ben Lesh, rxJS核心開發成員，強調：

RxJS 6在擁有更小API的同時，帶來了更整潔的引入方式

提供一個npm包，該package可以處理RxJS的向后兼容性，使得開發人員可以在不更改代碼的情況下進行更新，同時還可以幫助TypeScript代碼自動遷移。

RxJs 6這些新的改動為開發人員提供了以下三方面的優化：模塊化方面的改進、性能提升、調試更方便。RxJs團隊盡力保持新版本的向后兼容性，但是為了減少RxJs的API數量，還是引入了一些重大修改。

下面讓我們一起來看一下RxJs團隊在新版本中引入了哪些修改。

為了便捷地從RxJS 5遷移到RxJS 6，RxJS團隊發布了一個名為rxjs-compat的兄弟軟件包。該軟件包在v6和v5的API之間創建了一個兼容層。
RxJs團隊建議開發人員通過安裝^6.0.0版本的rxjs和rxjs-compat包來升級現有應用:

npm install rxjs@6 rxjs-compat@6 --save

此包允許您在升級RxJS 6的同時繼續運行現有代碼庫，而不會出現問題。他支持在RxJs 6中移除掉的功能。
安裝rxjs-compat會導致打包后代碼包體積的增加，如果你使用的是4.0.0版本以下的Webpack，該影響會被放大。
因此建議升級完成后將rxjs-compat移除。

只有兩個重大修改在rxjs-compat中未覆蓋：

在極少數情況下，您的代碼庫定義了它自己的TypeScript原型操作符并修改了Observable命名空間。該情況下，您需要更新你的操作符相關代碼才能使TypeScript正常編譯。

在版本發布說明中，用戶自定義的原型操作符可按如下方式創建：

Observable.prototype.userDefined = () => {
  return new Observable((subscriber) => {
    this.subscribe({
      next(value) { subscriber.next(value); },
      error(err) { subscriber.error(err); },
      complete() { subscriber.complete(); },
   });
  });
});

source$.userDefined().subscribe();

為編譯該類型的自定義操作符，需要做如下修改：

const userDefined = () => (source: Observable) => new Observable((subscriber) => {
    this.subscribe({
      next(value) { subscriber.next(value); },
      error(err) { subscriber.error(err); },
      complete() { subscriber.complete(); },
   });
  });
});

source$.pipe(
  userDefined(),
)

不再支持在try / catch塊內調用Observable.subscribe()。使用用Observable.subscribe()方法中的錯誤回調方法替換原先的try / catch塊來完成的異步錯誤的處理。
示例如下：

// deprecated
try {
  source$.subscribe(nextFn, undefined, completeFn);
} catch (err) {
  handleError(err);
}

// use instead
source$.subscribe(nextFn, handleError, completeFn);

現在在Observable.subscribe()中必須定義一個錯誤回調方法來異步處理錯誤。

如上所訴，rxjs-compat提供了V5與v6API間的臨時兼容層，實質上rxjs-compat為您的代碼庫提供了所需的v5版本功能，使得您可以逐步將您的代碼庫升級到v6版本。為了完成升級并移除rxjs-compat依賴，您的代碼庫需要重構并停止使用v5版本中的如下功能：

建議TypeScript開發人員使用rxjs-tslint來重構import路徑。
RxJS團隊設計了以下規則來幫助JavaScript開發人員重構import路徑：

rxjs: 包含創建方法，類型，調度程序和工具庫。

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實現.

import { webSocket } from "rxjs/webSocket";

rxjs/ajax: 包含Rx ajax實現.

import { ajax } from "rxjs/ajax";

rxjs/testing: 包含RxJS的測試工具庫.

import { TestScheduler } from "rxjs/testing";

以下是一項小調查：您是否有常識使用rxjs-tslint升級您的應用程序？

使用新的管道操作符語法替換舊有的鏈式操作。上一個操作符方法的結果會被傳遞到下一個操作符方法中。
不要移除rxjs-compat包，直到你將所有的鏈式操作修改為管道操作符。如果您使用TypeScript, ts-lint會在某種程度上自動執行此項重構。
Ben Lesh在ng-conf 2018上解釋了為什么我們應該使用管道操作符。

請按照如下步驟將您的鏈式操作替換為管道操作：

從rxjs-operators中引入您需要的操作符

注意：由于與Javascript保留字沖突，以下運算符名字做了修改：do -> tap, catch ->
catchError, switch -> switchAll, finally -> finalize

import { map, filter, catchError, mergeMap } from "rxjs/operators";

使用pipe()包裹所有的操作符方法。確保所有操作符間的.被移除，轉而使用,連接。記住！！！有些操作符的名稱變了！！！
以下為升級示例：

// an operator chain
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);

// must be updated to a pipe flow

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);

注意我們在以上代碼中嵌套使用了pipe()。

使用函數而不是類來操作可觀察對象(Observables)。所有的Observable類已被移除。他們的功能被新舊操作符及函數替代。這些替代品的功能與之前的類功能一模一樣。
示例如下：

// removed
ArrayObservable.create(myArray)

// use instead

from(myArray)

// you may also use

new operator fromArray().

有關替換v5類為v6函數的完整列表，請查看RxJS文檔。

ConnectableObservable在v6中不能直接使用，要訪問它，請使用操作符multicast，publish，publishReplay和publishLast。

SubscribeOnObservable在v6中不能直接使用，要訪問它，請使用操作符subscribeOn

Result Selectors是一項沒有被廣泛使用甚至沒有文檔說明的RxJs特性，同時Result Selectors嚴重的增加了RxJs代碼庫的體積，因此RxJs團隊決定棄用或刪除他。

對于使用到該功能的開發人員，他們需要將esultSelector參數替換為外部代碼。

對于first(), last()這兩個函數，這些參數已被移除，在刪除rxjs-compat之前務必升級代碼。

對于其他擁有resultSelector參數的函數，如mapping操作符，該參數已被棄用，并
以其他方式重寫。如果您移除rxjs-compat，這些函數仍可正常工作，但是RxJs團隊聲明他們必須在v7版本發布之前將其移除。

針對該情況的更多詳情，請查閱RxJs文檔

Observable.if已被iif()取代，Observable.throw已被throwError()取代。您可使用rxjs-tslint將這些廢棄的成員方法修改為函數調用。

代碼示例如下：

// deprecated
Observable.if(test, a$, b$);

// use instead

iif(test, a$, b$);

// deprecated
Observable.throw(new Error());

//use instead

throwError(new Error());

根據遷移指南，以下方法已被棄用或重構：

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

// becomes

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

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

// becomes

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

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

// becomes

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

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

// becomes

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

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

// becomes

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

RxJS 6帶來了一些重大改變，但是通過添加rxjs-compat軟件包可以緩解這一問題，該軟件包允許您在保持v5代碼運行的同時逐漸遷移。對于Typescript用戶，其他中包括大多數Angular開發人員，tslint提供了大量的自動重構功能，使轉換變得更加簡單。

任何升級與代碼修改都會引入一些bug到代碼庫中。因此請務必測試您的功能以確保您的終端用戶最終接受到相同的質量體驗。

視頻：RxJS 6詳細介紹 by Ben Lesh

原文鏈接