RxJS - Cập nhật mới nhất

Chúng tôi đang sử dụng RxJS phiên bản 6 trong hướng dẫn này. RxJS thường được sử dụng để xử lý lập trình phản ứng và được sử dụng thường xuyên hơn với Angular, ReactJS. Angular 6 tải rxjs6 theo mặc định.

RxJS phiên bản 5 được xử lý khác với phiên bản 6. Mã sẽ bị hỏng trong trường hợp bạn cập nhật RxJS 5 lên 6. Trong chương này, chúng ta sẽ thấy sự khác biệt trong cách xử lý cập nhật phiên bản.

Trong trường hợp bạn đang cập nhật RxJS lên 6 và không muốn thay đổi mã, bạn cũng có thể làm điều đó và sẽ phải cài đặt gói sau.

npm install --save-dev rxjs-compact

Gói này sẽ đảm nhận việc cung cấp khả năng tương thích ngược và mã cũ sẽ hoạt động tốt với RxJS phiên bản 6. Nếu bạn muốn thực hiện các thay đổi mã hoạt động tốt với RxJS 6, đây là những thay đổi cần được thực hiện.

Các gói dành cho người vận hành, có thể quan sát, đối tượng đã được tái cấu trúc và do đó, những thay đổi lớn đối với nhập khẩu và chúng được giải thích bên dưới.

Nhập khẩu cho các nhà khai thác

Theo phiên bản 5, đối với các toán tử, các câu lệnh nhập sau phải được bao gồm:

import 'rxjs/add/operator/mapTo'
import 'rxjs/add/operator/take'
import 'rxjs/add/operator/tap'
import 'rxjs/add/operator/map'

Trong RxJS phiên bản 6, nhập sẽ như sau:

import {mapTo, take, tap, map} from "rxjs/operators"

Nhập các phương thức để tạo các có thể quan sát

Theo phiên bản 5, trong khi làm việc với Observables, các phương thức nhập sau nên được bao gồm:

import "rxjs/add/observable/from";
import "rxjs/add/observable/of";
import "rxjs/add/observable/fromEvent";
import "rxjs/add/observable/interval";

Trong RxJS phiên bản 6, nhập sẽ như sau:

import {from, of, fromEvent, interval} from 'rxjs';

Nhập các có thể quan sát

Trong RxJS phiên bản 5, khi làm việc với Observables, các câu lệnh nhập sau phải được bao gồm:

import { Observable } from 'rxjs/Observable'

Trong phiên bản RxJS 6, các lần nhập sẽ như sau:

import { Observable } from 'rxjs'

Nhập chủ đề

Trong RxJS phiên bản 5, chủ đề nên được bao gồm như sau:

import { Subject} from 'rxjs/Subject'

Trong phiên bản RxJS 6, các lần nhập sẽ như sau:

import { Subject } from 'rxjs'

Làm thế nào để sử dụng các toán tử trong RxJS 6?

pipe() methodcó sẵn trên quan sát được tạo. Nó được thêm vào RxJS từ phiên bản 5.5. Sử dụng pipe () bây giờ bạn có thể làm việc trên nhiều toán tử cùng nhau theo thứ tự tuần tự. Đây là cách các toán tử được sử dụng trong RxJS phiên bản 5.

Thí dụ

import "rxjs/add/observable/from";
import 'rxjs/add/operator/max'

let list1 = [1, 6, 15, 10, 58, 2, 40];
from(list1).max((a,b)=>a-b).subscribe(x => console.log("The Max value is "+x));

Từ phiên bản RxJS 5.5 trở đi, chúng ta phải sử dụng pipe () để thực thi toán tử -

Thí dụ

import { from } from 'rxjs';
import { max } from 'rxjs/operators';

from(list1).pipe(max((a,b)=>a-b)).subscribe(x => console.log(
   "The Max value is "+x)
);

Các nhà khai thác được đổi tên

Trong quá trình tái cấu trúc các gói, một số toán tử đã được đổi tên vì chúng xung đột hoặc khớp với các từ khóa javascript. Danh sách như hình dưới đây -

Nhà điều hành	Đã đổi tên thành
làm ()	tap ()
nắm lấy()	catchError ()
công tắc điện()	switchAll ()
cuối cùng ()	finalize ()
phi()	némError ()