Будущих студентов курса "JavaScript Developer. Professional" приглашаем участвовать в открытом вебинаре на тему "Делаем интерактивного Telegram бота на nodejs".
А пока делимся традиционным переводом полезной статьи.
Если вы используете Angular и библиотеку RxJS, здесь вы узнаете все способы, которые вам могут понадобиться, чтобы подписываться на уведомления от объектов Observable и отписываться от них!
Работать с кодом в динамическом режиме можно в этом онлайн-редакторе. Полный исходный код для этой статьи размещен в этом репозитории GitHub.
Введение
Мы используем RxJS во всех приложениях Angular, которые пишем. RxJS оказывает значительное влияние на поток данных в наших приложениях, их производительность и многое другое.
Чтобы избежать утечек памяти, важно вовремя отписываться от уведомлений, выпускаемых объектами Observable. В этой статье описано большинство доступных способов, с помощью которых в компонентах Angular можно отписываться от уведомлений, выпускаемых объектами Observable.
Начнем с создания демонстрационного сервиса (DummyService), которой поможет нам отслеживать устанавливаемые подписки.
У нашего демонстрационного сервиса будет единственный метод getEmissions, который принимает scope для регистрации событий и возвращает объект Observable, выпускающий ${scope} Emission #n каждую n-ю секунду.
№ 1 — «стандартный» способ
Самым простым способом подписаться на уведомления Observable и отписаться от них является подписка в методе ngOnInit, создание свойства класса, в котором будет храниться наша подписка (Subscription), и отписка в методе ngOnDestroy. Чтобы все немного упростить, можно инициализировать свойство подписки со значением Subscription.EMPTY, чтобы избежать его проверки на null при отписке.
Чтобы проверить, что все работает, мы удалим компонент из DOM через 3 секунды и увидим, что отписка выполняется:
Как можно заключить из заголовка, это самый простой способ отписки. Он хорош, когда у вас есть одна подписка. Когда же подписок несколько, для каждой из них потребуется собственное свойство класса и вызов unsubscribe в методе ngOnDestroy.
№ 2 — метод Subscription.add
В подписках RxJS имеется встроенный метод Subscription.add, с помощью которого можно включить несколько условий отписки в один экземпляр Subscription. Сначала создадим свойство класса, инициализированное как new Subscription(). Затем, вместо назначения наших подписок свойствам класса, вызовем метод Subscription.add. Наконец, выполним отписку в методе ngOnDestroy.
После открытия консоли мы должны увидеть две подписки:
В этом подходе мы пользуемся встроенными мощными возможностями RxJS, чтобы подписываться на уведомления от нескольких Observable и отписываться от них без использования дополнительных свойств классов.
№ 3 — AsyncPipe
В Angular есть много отличных встроенных фильтров (pipe). Одним из них является AsyncPipe. AsyncPipe принимает объект Observable, автоматически подписывается на уведомления от него и отписывается от них при уничтожении компонента. В отличие от предыдущего примера здесь мы не устанавливаем подписку в нашем компоненте, а передаем объект Observable фильтру AsyncPipe:
По моему мнению, это один из самых удачных способов использования объектов Observable в Angular. Вам нужно просто создать необходимые Observable, и Angular будет подписываться и отписываться за вас.
№ 4 — оператор takeUntil
В RxJS есть множество полезных операторов. Одним из них является takeUntil. По сигнатуре оператора takeUntil понятно, что он принимает на вход объект Observable как параметр notifier и, когда notifier выпускает значение, выполняет отписку от исходного Observable. В нашем случае нам нужно оповестить Observable об уничтожении компонента. Для этого мы добавляем свойство класса с именем componentDestroyed$ (или любым другим именем) типа Subject<void> и используем его в качестве notifier. После этого остается только добавить «оповещение» в метод ngOnDestroy. Итоговый код имеет следующий вид:
В отличие от описанного ранее «обычного» способа, в этом варианте не требуется вводить дополнительные свойства класса, если подписок несколько. Нам нужно только добавить takeUntil(componentDestroyed$), а RxJS позаботится об остальном.
№ 5 — библиотека SubSink
SubSink — это потрясающая библиотека, созданная Уордом Беллом (Ward Bell). С ее помощью можно корректно отписываться от Observable внутри своего компонента.
Сначала установим SubSink, выполнив команду npm i subsink или yarn add subsink. Затем создадим свойство класса типа SubSink.SubSink можно использовать двумя способами: простой способ с использованием сеттера и способ Array/Add.
Простой способ заключается в использовании метода-сеттера sink.Способ Array/Add имеет такой же синтаксис, что и собственный метод RxJS Subscription.add. Создадим подписку каждым из этих способов. Тогда наш компонент будет выглядеть вот так:
№ 6 — библиотека until-destroy
Примечание. Эта библиотека работает на Pre Ivy Angular по-другому. Дополнительные сведения см. в документации.
until-destroy — это одна из многих прекрасных библиотек, созданных ngneat. С помощью декоратора UntilDestroy она определяет, какие свойства являются подписками, и автоматически отменяет эти подписки при уничтожении компонента. Кроме того, вместо свойств классов мы можем использовать ее специальный оператор для RxJS под названием untilDestroyed.
Для этого нам всего лишь нужно применить декоратор UntilDestroy к нашему компоненту и добавить оператор untilDestroyed в метод pipe() объекта Observable:
В заключение скажем, что until-destroy является очень мощной библиотекой, позволяющей автоматически подписываться на уведомления от объектов Observable и отписываться от них. Кроме того, у until-destroy есть много возможностей, которые не описаны в этой статье, поэтому обязательно посмотрите репозиторий GitHub!
Резюме
Мы представили множество способов, позволяющих подписываться на уведомления от объектов Observable и отписываться от них. У каждого из этих способов есть свои достоинства и недостатки, а также отличительный стиль написания кода.
Но какой бы вариант вы ни выбрали, самое важное — действовать последовательно.
- Узнать подробнее о карьерных перспективах.
- Записаться на открытый вебинар "Делаем интерактивного Telegram бота на nodejs".
