Основы RxJS, которые должен изучить каждый новичок в Angular

Если вы не понимаете хотя бы основ, 101, основы RxJS, вы оставите много помощников. Вы зря тратите время и силы! Позволь мне объяснить:

Angular был основан на парадигмах RxJS и «стиле жизни». Вы не увидите, что обещания обрабатываются очень часто в файле, созданном с помощью интерфейса командной строки или в документации по Angular, потому что Observables могут делать все, что может сделать Promise, и даже больше.

Чтобы понять это смелое заявление, нам нужно различать выталкивающую и выталкивающую системы. Системы вытягивания - это когда потребитель данных определяет, когда он получает новые данные от производителя данных. Итератор - это вытягивающая система, потому что, когда ему, например, требуется больше значений из повторяемого массива, он может получить. В системах выталкивания все наоборот. Это когда производитель данных определяет, когда новые значения будут доступны для использования потребителем. Обещание - это любимый ответ, в основном, когда вы пишете набор инструкций внутри обратного вызова .then (), вы сообщаете, что всякий раз, когда производитель данных отправляет данные, эти инструкции будут выполняться.

Наблюдаемые и наблюдатели

Понимая, что такое система push, вы можете понять, почему Observables - это обещания со сверхспособностями. В основном Observables - это структура на основе push, которая может обрабатывать несколько значений, поступающих от одного производителя данных, Promises может обрабатывать только одно значение. Observables запускают поток между производителем и потребителем навсегда, пока он не завершит свою миссию.

И прежде чем я покажу вам пример, чтобы прояснить все это, вам нужно понять, как метод .subscribe () также является методом .then () со сверхспособностями. Мы вызываем .subscribe () наблюдателем, поскольку, как следует из названия, он наблюдает за наблюдаемым объектом. И хотя он отслеживает новые значения, поступающие от производителя данных, у него есть три параметра, которые являются обратными вызовами, первый: (next = ›{}) обрабатывает каждое новое значение, после (error =› {}) обрабатывает любую ошибку Javascript, которую производитель данных sent и last (() = ›{}) выполняются один раз, когда Observable завершается, когда его поток закрывается. Подсказка: если вы явно не завершите Observable, это навсегда.

Как видите, я сначала создал наблюдаемые, испускаемые значения 2 раза, а затем завершил наблюдаемый поток, потому что я не хочу, чтобы мой наблюдатель наблюдал вечно.

Асинхронный канал и подписка

Я уже дважды упоминал, что Observables могут проходить бесконечно и дальше, но мы уже знаем, что каждый ресурс ограничен, например, ваш процессор, оперативная память и т. Д. Когда вы в реальной жизни работаете с реальным кодом Angular, вы не сможете всегда создавайте свой собственный Observable и определяет, когда он будет завершен, иногда Observable будет прослушивателем событий, HTTP-запросом и т. д., в этих случаях вам нужно вручную завершить бесконечный поток или .unsubscribe () подписку - выполнение Observable.

Когда вы .unsubscribe (), вы сокращаете наполовину связь между Observable и наблюдателем, наблюдатель больше не наблюдает, тогда бесконечный оператор заканчивается. Поскольку эта подписка-отказ от подписки может быть действительно повторяющейся, Angular реализует конвейер Async. Полагаю, вы знаете, что за трубка. Вы можете привязать Observable непосредственно в шаблоне с простой: ‘| асинхронный. Следовательно, вы получаете каждое изменение производителя данных прямо в шаблоне, и когда этот компонент будет уничтожен, этот поток будет отменен без каких-либо усилий.

Еще один удобный трюк, который делает для нас Angular, - это отменить подписку на каждый HTTP-запрос, сделанный с HttpClient по умолчанию. Представьте, если бы вам нужно было отказаться от подписки, каждый запрос был бы головной болью.

pipe () и операторы

Когда вы работаете с массивами в js, вы часто используете .reduce (), .filter () для преобразования исходных и необработанных данных в удобные для пользователя данные. Когда вы работаете с Observables, вы можете сделать то же самое, просто поместите эти методы в метод pipe () и начните перечислять то, что вам нужно.

Применяя карту и фильтр таким образом, консольный ввод становится следующим:

2

4

'Все окончено'

Существует множество различных операторов, и по мере продвижения по Angular вам потребуется все больше и больше этих операторов, поэтому углубляйтесь в документацию RxJS.