angular - Cea mai bună modalitate de a importa Observable din rxjs

În aplicația mea Angular 2 am un serviciu care folosește clasa Observable din biblioteca rxjs.

import { Observable } from 'rxjs';

În acest moment folosesc doar Observable pentru a putea folosi funcția toPromise().

Am citit într-o altă întrebare de pe StackOverflow undeva că importarea în acest mod și, de asemenea, importarea din rxjs/Rx va importa o mulțime de lucruri inutile din biblioteca rxjs care vor crește timpii de încărcare ai paginii și/sau baza de cod.

Întrebarea mea este, care este cea mai bună metodă de a importa Observable astfel încât să pot folosi funcția toPromise() fără a fi nevoie să import tot restul?

Răspuns #1

Rxjs v 6.*

A fost simplificat cu versiunea mai nouă de rxjs.

1) Operatori

import {map} from 'rxjs/operators';

2) Alții

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

În loc să facem lanț, trebuie să folosim pipe. De exemplu

Sintaxă veche :

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

Sintaxă nouă:

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

Notă: Unii operatori au schimbat numele din cauza coliziunilor de nume cu cuvintele rezervate în JavaScript! Aceștia includ:

do -> atinge,

catch -> catchError

switch -> switchAll

în cele din urmă -> finaliza

Rxjs v 5.*

Scriu acest răspuns parțial pentru a mă ajuta, deoarece verific documentația de fiecare dată când trebuie să import un operator. Spune-mi dacă ceva poate fi făcut într-un mod mai bun.

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

Aceasta importă întreaga bibliotecă. Apoi nu trebuie să vă faceți griji cu privire la încărcarea fiecărui operator. Dar trebuie să adăugați Rx. Sper că tree-shaking-ul va optimiza și va selecta doar funcțiile necesare (trebuie verificat) După cum s-a menționat în comentarii, tree-shaking-ul nu poate ajuta. Deci aceasta nu este o metodă optimizată.

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

Sau poți importa operatori individuali.

Aceasta va optimiza aplicația ta să folosească doar acele fișiere :

2) import { _______ } from 'rxjs/_________';

Această sintaxă este de obicei folosită pentru obiecte principale precum Rx în sine sau Observable etc.

Cuvinte cheie care pot fi importate cu această sintaxă

 Observable, Observer, BehaviorSubject, Subject, ReplaySubject

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

Actualizare pentru Angular 5

Cu Angular 5, care folosește rxjs 5.5.2+

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

Acestea sunt de obicei însoțite direct de Observable. De exemplu

Observable.from()
Observable.of()

Alte cuvinte cheie de acest fel care pot fi importate folosind această sintaxă:

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

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

Actualizare pentru Angular 5

Cu Angular 5, care folosește rxjs 5.5.2+

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

Acestea apar de obicei în flux după ce Observable-ul este creat. Ca flatMap în acest fragment de cod:

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

Alte astfel de cuvinte cheie care folosesc această sintaxă:

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 este un alias pentru mergeMap, așa că trebuie să importăm mergeMap pentru a folosi flatMap.

Notă pentru importurile /add :

Trebuie să importăm doar o singură dată în întregul proiect. De aceea se recomandă să facem acest lucru într-un singur loc. Dacă sunt incluse în mai multe fișiere și unul dintre ele este șters, compilarea va eșua din motive greșite.

Răspunsul #2

Actualizare pentru RxJS 6 (aprilie 2018)

Acum este perfect bine să importați direct din rxjs. (După cum se poate vedea în Angular 6+). Importarea din rxjs/operators este de asemenea în regulă și, de fapt, nu mai este posibil să importați operatori la nivel global (unul dintre principalele motive pentru refactorizarea rxjs 6 și noua abordare folosind pipe). Datorită acestui lucru, acum poate fi folosit și treeshaking-ul.

Cod exemplu din depozitul 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));

Compatibilitate inversă pentru rxjs < 6?

Echipa rxjs a lansat un pachet de compatibilitate pe npm care practic se instalează și se folosește direct. Cu asta, tot codul tău rxjs 5.x ar trebui să ruleze fără probleme. Acest lucru este deosebit de util acum, când majoritatea dependențelor (adică modulele pentru Angular) nu sunt încă actualizate.