angular - Cách tốt nhất để nhập Observable từ rxjs

Trong ứng dụng Angular 2 của tôi, tôi có một dịch vụ sử dụng lớp Observable từ thư viện rxjs.

import { Observable } from 'rxjs';

Hiện tại tôi chỉ đang sử dụng Observable để có thể sử dụng chức năng toPromise().

Tôi đã đọc ở một câu hỏi StackOverflow khác ở đâu đó rằng việc nhập theo cách này và cũng nhập từ rxjs/Rx sẽ nhập rất nhiều thứ không cần thiết từ thư viện rxjs điều này sẽ làm tăng thời gian tải trang và/hoặc kích thước mã nguồn.

Câu hỏi của tôi là, cách tốt nhất để import Observable là gì để tôi có thể sử dụng chức năng toPromise() mà không phải import tất cả những thứ khác?

Câu trả lời #1

Rxjs phiên bản 6.*

Nó đã được đơn giản hóa với phiên bản rxjs mới hơn.

1) Toán tử

import {map} from 'rxjs/operators';

2) Khác

import {Observable,of, from } from 'rxjs';

Thay vì nối chuỗi, chúng ta cần sử dụng pipe. Ví dụ

Cú pháp cũ :

source.map().switchMap().subscribe()

Cú pháp mới:

source.pipe(map(), switchMap()).subscribe()

Lưu ý: Một số toán tử đã thay đổi tên do trùng với các từ khóa dự trữ của JavaScript! Bao gồm:

do -> làm,

catch -> catchError

switch -> switchAll

finally -> chốt lại

Rxjs phiên bản 5.*

Tôi viết câu trả lời này một phần để giúp bản thân vì tôi luôn phải kiểm tra tài liệu mỗi khi cần nhập một toán tử. Hãy cho tôi biết nếu có cách nào làm tốt hơn.

1) import { Rx } from 'rxjs/Rx';

Điều này nhập toàn bộ thư viện. Sau đó bạn không cần lo lắng về việc tải từng toán tử. Nhưng bạn cần thêm Rx. Tôi hy vọng tree-shaking sẽ tối ưu và chỉ chọn các chức năng cần thiết (cần xác minh) Như đã đề cập trong các bình luận, tree-shaking không thể giúp được. Vì vậy đây không phải là cách tối ưu.

public cache = new Rx.BehaviorSubject('');

Hoặc bạn có thể nhập các toán tử riêng lẻ.

Điều này sẽ tối ưu hóa ứng dụng của bạn để chỉ sử dụng những tệp đó :

2) import { _______ } từ 'rxjs/_________';

Cú pháp này thường được sử dụng cho đối tượng chính như Rx hoặc Observable, v.v.

Các từ khóa có thể được nhập với cú pháp này

 Observable, Observer, BehaviorSubject, Subject, ReplaySubject

3) import 'rxjs/add/observable/__________';

Cập nhật cho Angular 5

Với Angular 5, sử dụng rxjs 5.5.2+

import { empty } from 'rxjs/observable/empty';
import { concat} from 'rxjs/observable/concat';

Những điều này thường đi kèm với Observable trực tiếp. Ví dụ

Observable.from()
Observable.of()

Các từ khóa khác tương tự có thể được nhập bằng cú pháp này:

concat, defer, empty, forkJoin, from, fromPromise, if, interval, merge, of, 
range, throw, timer, using, zip

4) import 'rxjs/add/operator/_________';

Cập nhật cho Angular 5

Với Angular 5, sử dụng rxjs 5.5.2+

import { filter } from 'rxjs/operators/filter';
import { map } from 'rxjs/operators/map';

Những điều này thường xuất hiện trong luồng sau khi Observable được tạo. Giống như flatMap trong đoạn mã này:

Observable.of([1,2,3,4])
          .flatMap(arr => Observable.from(arr));

Các từ khóa khác sử dụng cú pháp này:

audit, buffer, catch, combineAll, combineLatest, concat, count, debounce, delay, 
distinct, do, every, expand, filter, finally, find , first, groupBy,
ignoreElements, isEmpty, last, let, map, max, merge, mergeMap, min, pluck, 
publish, race, reduce, repeat, scan, skip, startWith, switch, switchMap, take, 
takeUntil, throttle, timeout, toArray, toPromise, withLatestFrom, zip

FlatMap: flatMap là bí danh của mergeMap vì vậy chúng ta cần nhập mergeMap để sử dụng flatMap.

Lưu ý về các import /add :

Chúng ta chỉ cần nhập một lần trong toàn bộ dự án. Vì vậy, nên thực hiện tại một nơi duy nhất. Nếu chúng được bao gồm trong nhiều tệp và một trong số chúng bị xóa, việc xây dựng sẽ thất bại vì những lý do sai.

Câu trả lời #2

Cập nhật cho RxJS 6 (tháng 4 năm 2018)

Hiện nay hoàn toàn ổn để nhập trực tiếp từ rxjs. (Như có thể thấy trong Angular 6+). Việc nhập từ rxjs/operators cũng ổn và thực tế hiện nay không còn khả năng nhập các operator một cách toàn cục nữa (một trong những lý do chính cho việc tái cấu trúc rxjs 6 và cách tiếp cận mới sử dụng pipe). Nhờ đó, treeshaking hiện nay cũng có thể được sử dụng.

Mã mẫu từ kho rxjs:

import { Observable, Subject, ReplaySubject, from, of, range } from 'rxjs';
import { map, filter, switchMap } from 'rxjs/operators';

range(1, 200)
  .pipe(filter(x => x % 2 === 1), map(x => x + x))
  .subscribe(x => console.log(x));

Tương thích ngược cho rxjs < 6?

Nhóm rxjs đã phát hành một gói tương thích trên npm mà về cơ bản là cài đặt & sử dụng ngay. Với gói này, tất cả mã rxjs 5.x của bạn nên chạy mà không gặp bất kỳ vấn đề nào. Điều này đặc biệt hữu ích hiện nay khi hầu hết các phụ thuộc (ví dụ: các module cho Angular) vẫn chưa được cập nhật.