Конвейерные операторы RxJS
Когда мы используем Observable в нашем приложении, иногда вместе с ним использовались такие операторы, как map, filter, catch и т. Д. Мы назвали эти операторы операторами Lettable. Эти операторы позволяют составлять наблюдаемую цепочку для управления данными или обработки событий. Если мы хотим использовать наблюдаемые объекты и операторы, нам нужно использовать библиотеку RXJS. Библиотека RxJS большая. Размер имеет значение при создании и развертывании производственного приложения. Особенно, если мы развертываем его на мобильных устройствах. Осталось добавить только те операторы, которые мы используем.
В более ранних версиях при импорте пакета RxJS все операторы были добавлены в Observable.prototype.
import * as Rx from “rxjs”; this.http.get(‘path’) .map(p => p.json()) .catch(error => Rx.Observable.of(null)); .subscribe(data => console.log(data))
Проблема с этим подходом в том, что приложения будут содержать все, что есть в RxJS, даже если это не требуется. Все операторы (карта, фильтр и т. Д.) Являются патчем к observable.prototype. Но если мы разделим этот пакет на отдельных операторов и импортируем их отдельно, мы сможем предотвратить дополнительные накладные расходы. Кроме того, мы можем более надежно обнаруживать неиспользуемый импорт и даже можем добавить правило lint для проверки неиспользуемого импорта. Из-за того, что команда angular отделила этот пакет от версии 5.5, они переименовали его в Конвейерные операторы.
Конвейерные функции - это чистые функции. Они не исправляют наблюдаемое. Он использует стандарт импорта ES6 для импорта операторов. Когда мы используем конвейерные операторы, мы должны использовать функцию pipe (). Потому что, как только мы импортируем операторы, они переносятся в функцию конвейера. Оператор канала - это просто функция, которая возвращает функцию с подписью. Функция конвейера уже встроена в Observable, поэтому нам не нужно импортировать ее отдельно. Функция конвейера может принимать ряд параметров в цепочке.
import { map, catchError } from 'rxjs/operators';
this.http.get(‘path’)
.pipe(
catchError(error => this.handleError(error)),
map(item => $ { item.name }: $$ { item.price })
).subscribe(
item => console.log(item)
)
Теперь, если вы удалите оператор карты из кода, а не из импорта, он нам не повредит. Потому что теперь модуль встряхивания дерева может определить, что импортированный оператор не используется в нашем коде. Так что оператор карты не будет включаться в бандлы. Теперь код намного чище.
