Найкращий спосіб імпорту Observable з rxjs

У моїй програмі angular 2 у мене є служба, яка використовує Observableклас із rxjsбібліотеки.

import { Observable } from 'rxjs';

На даний момент я просто використовую, Observableщоб я міг використовувати цю toPromise()функцію.

Я ще десь читав у запитанні про StackOverflow, що імпорт таким чином, а також імпорт з rxjs/Rx, імпортує з rxjsбібліотеки цілу кількість непотрібних речей, що збільшить час завантаження сторінки та / або основу коду.

Моє запитання полягає в тому, який найкращий спосіб імпортувати, Observableщоб я міг користуватися toPromise()функцією без необхідності імпортувати все інше?

Rxjs v 6. *

Це спростилося завдяки новій версії rxjs.

1) Оператори

import {map} from 'rxjs/operators';

2) Інші

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

Замість ланцюга нам потрібно труби. Наприклад

Старий синтаксис:

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

Новий синтаксис:

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

Примітка: Деякі оператори змінюють назву через зіткнення імен із зарезервованими словами JavaScript! До них належать:

do-> tap,

catch -> catchError

switch -> switchAll

finally -> finalize

Rxjs v 5. *

Цю відповідь я пишу частково, щоб допомогти собі, оскільки постійно перевіряю документи кожного разу, коли потрібно імпортувати оператора. Повідомте мене, якщо щось можна зробити краще.

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

Це імпортує всю бібліотеку. Тоді вам не потрібно турбуватися про завантаження кожного оператора. Але вам потрібно додати Rx. Я сподіваюся, тремтіння дерев дозволить оптимізувати та вибрати лише необхідні фунціонери (потрібно перевірити) Як зазначалося в коментарях, тремтіння дерев не може допомогти. Тож це не оптимізований спосіб.

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

Або ви можете імпортувати окремих операторів.

Це дозволить оптимізувати вашу програму для використання лише таких файлів :

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

Цей синтаксис, як правило, використовується для основного об'єкта, подібного до Rxсебе, Observableтощо,

Ключові слова, які можна імпортувати з цим синтаксисом

 Observable, Observer, BehaviorSubject, Subject, ReplaySubject

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

Оновлення для Angular 5

З Angular 5, який використовує rxjs 5.5.2+

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

Вони зазвичай супроводжуються безпосередньо спостережуваними. Наприклад

Observable.from()
Observable.of()

Інші такі ключові слова, які можна імпортувати за допомогою цього синтаксису:

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

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

Оновлення для Angular 5

З Angular 5, який використовує rxjs 5.5.2+

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

Вони зазвичай надходять у потік після створення Observable. Як flatMapу цьому фрагменті коду:

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

Інші такі ключові слова, що використовують цей синтаксис:

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це псевдонім, mergeMapтому нам потрібно імпортувати mergeMapдля використання flatMap.

Примітка щодо /addімпорту :

Нам потрібно імпортувати лише один раз у цілому проекті. Тож його радили робити це в одному місці. Якщо вони включені в декілька файлів, а один із них видалено, збірка не вдасться з неправильних причин.

Оновлення для RxJS 6 (квітень 2018)

Зараз цілком нормально імпортувати безпосередньо з rxjs. (Як видно з Angular 6+). Імпортування з rxjs/operatorsтакож є прекрасним, і насправді вже неможливо імпортувати операторів у всьому світі (одна з основних причин рефакторингу rxjs 6та використання нового підходу pipe). Завдяки цьому обробку дерев тепер можна використовувати також.

Зразок коду з rxjs repo:

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

Зворотна сумісність для rxjs <6?

Команда rxjs випустила пакет сумісності на npm, який є в значній мірі інсталяцією та програванням. При цьому весь ваш rxjs 5.xкод повинен працювати без будь-яких проблем. Це особливо корисно зараз, коли більшість залежностей (тобто модулів для Angular) ще не оновлені.

Одне, чому я навчився важче, - це бути послідовним

Слідкуйте за змішуванням:

 import { BehaviorSubject } from "rxjs";

з

 import { BehaviorSubject } from "rxjs/BehaviorSubject";

Це, мабуть, буде працювати нормально, ДОКОЛИ ви спробуєте передати об'єкт іншому класу (де ви зробили це по-іншому), і тоді це може не вдатися

 (myBehaviorSubject instanceof Observable)

Це не вдається, оскільки ланцюжок прототипів буде іншою, і вона буде помилковою.

Я не можу робити вигляд, що точно розумію, що відбувається, але іноді я стикаюся з цим і мені потрібно перейти на довший формат.