Автор оригинала: FreeCodeCamp Community Member.
Одно из самых сложных вещей Для новых разработчиков для изучения – это шаблон наблюдателя. Понимание того, как эффективно использовать его с RXJS, чтобы справиться с асинхронными данными, такими как пользовательские события, HTTP-запросы или любые другие события, которые требуют ожидания чего-то для завершения, сложно.
Чем большинство людей борются, – это новый подход. Это требует другого мышления, где визуализация играет важную роль. Мы думаем о данных как последовательность значений, которые проходят со временем, а не как одно значение, которое является полученным один раз. Это мышление известно как реактивное программирование.
Поскольку узор наблюдателя – довольно большая экосистема, состоящая из многих важных частей, я решил сузить его, сосредоточившись только на наблюдаемых. Я поделюсь с другими статьями в ближайшее время, что охватывает остальную часть паттерна наблюдателя, например, как справиться с RXJS.
Темы мы будем покрывать:
- Что значит асинхронный действительно?
- Какой шаблон использовать (наблюдатель или обещание)
- Как создать наблюдаемые (запускаемые здесь примеры кода)
- Как подписаться на наблюдаемый
- Как отписаться от наблюдаемого
1. Что значит асинхронный действительно?
Одна из вещей с Интернетом и большинство языков, заключается в том, что, как только вы попросите данные, такие как запрашивание списка пользователей с сервера, вы не можете гарантировать, что данные будут возвращены. Есть проблема неопределенности.
Одна из причин может быть, что данные нет, сервер может быть сломан, или HTTP URL недействителен, потому что кто-то изменил строку запроса.
По этой причине вместе с несколькими другими нам нужно разобраться с такими данными асинхронно. Мы запрашиваем список пользователей и дождаться, пока оно не будет получено, но не останавливайте все приложение для простой операции.
Это все равно что рассказывать сотрудникам решить задачу вместо того, чтобы отправить всю команду; Это было бы дорогим, а не мудрый подход, чтобы взять.
Давайте уточним неправильное представление: термины синхронные или асинхронные не имеют ничего общего с многопоточными, где операции выполняются одновременно. Это просто означает, что операции либо зависит от или независимый от друг друга, вот и все.
Давайте сравним разницу между синхронным и асинхронным, чтобы лучше понять, как они действительно работают.
Что такое синхронно?
С синхронными событиями вы ждете, пока кто-то закончится, прежде чем перейти к другой задаче.
Пример: Вы в очереди, чтобы получить билет кино. Вы не можете получить один, пока все перед вами не получают одного, и то же самое относится и к тому, что люди, поставленные позади вас. Ответил Imiteightasien Отказ
Что такое асинхронный?
С асинхронными событиями вы не ждали, вы можете перейти к следующей задаче, пока данные не будут доступны.
Пример: Вы в ресторане со многими другими людьми. Вы заказываете свою еду. Другие люди также могут заказать их еду, им не нужно ждать, пока ваша еда будет готовиться и подается вам, прежде чем они смогут заказать. На кухне рабочие рестораны постоянно готовит, обслуживают и принимают заказы. Люди получат свою еду, как только она приготовлена. Ответил Imiteightasien Отказ
Хорошо, так короче, это позволяет нам либо ждать операций, чтобы произойти, прежде чем мы сможем двигаться, или не ждать, пока данные не будут готовы.
2. Какой шаблон использовать (наблюдатель или обещание)
Прежде всего, как шаблон наблюдателя, так и узор обещания с асинхронными операциями. Такие операции, как пользовательские события или HTTP-запросы, или любые другие события, которые выполняют независимо.
Большинство операций сегодня нужны какой-то тип асинхронного/синхронного обращения, и понимание того, как он работает играет важную роль при создании надежных приложений.
Это не значит сделать вашу жизнь сложнее, но проще. Тем не менее, это, таким образом, требует обучения-кривой, которая может быть болезненным подходом, но награда в конце оно того стоит.
Остаться с одним узором
Разница заключается в сложности приложения. Если вы имеете дело с небольшим приложением, где задача – просто получить список пользователей с сервера, или показать активных участников, то обещания с Fetch API ( Читать дальше ) Работа нормально.
Но если вы имеете дело с большим приложением со многими асинхронными операциями, которые требуют изменения данных, выполняя несколько операций на потоке данных или повторно использовать его в нескольких местах, то узор наблюдателя работает отлично.
Могу ли я использовать обе паттерны в одном проекте?
Да, но не рекомендуется смешивать между двумя архитектурами, которые в основном делают то же самое (обрабатывать асинхронные события). Вместо этого придерживайтесь одно и узнайте больше об этом.
Повысить свои навыки с RXJS
С RXJS у вас есть доступ к 189 операторам с документацией + Другие отличные ресурсы Отказ И каждый из этих операторов – это просто обратные вызовы, которые делают что-то на потоке данных.
Если вы знакомы с функциональными прототипами JavaScript (методы), такие как карта () , Фильтр () и Уменьшить () Вы найдете их в RXJS. Примечание, концепция такой же, но письменный код не является.
Так вчем разница между этими двумя узорами?
Вот быстрое сравнение между шаблоном наблюдателя и шаблоном обещания. Ключевые моменты заключаются в том, что обещание излучает одно значение (ы) после того, как .then () Обратный вызов используется, в то время как наблюдаемый испускает несколько значений в качестве последовательности данных, которые проходят со временем. Другим важным моментом является то, что наблюдаемое может быть отменено или повторяется, в то время как обещание не может. Однако есть внешние пакеты, которые позволяют отменить обещание.
3. Как мы создаем наблюдаемый?
Вот несколько способов можно создать наблюдаемый:
- Создать наблюдаемый с нуля
- повернуть обещание в наблюдаемое
- Или используйте каркас, которая делает это для вас за кулисами, такими как угловые.
Если вы когда-нибудь хотите использовать (тестировать) по реальномую сценарию, так сказать, пропускать значения со временем, я настоятельно рекомендую использовать функцию интервала. Это проходит значения после X времени X в миллисекундах. Поэтому, если у вас есть интервал, где X – 2000 мс – он передает каждое значение (приращения) через 2 секунды.
4. Как мы подписываемся на наблюдаемое?
Замечаемое – это просто набор данных, которые ждет, чтобы быть вызваны (подписаны), прежде чем она сможет извлечь какие-либо данные. Если вы работали с обещаниями, то путь к доступу к данным – это цепь его с тогда () Оператор или используйте ES6 Async/await Отказ
Итак, чтобы следовать предыдущему примеру, как один доступ к данным?
Как показано выше, когда мы подписываемся, мы говорим наблюдаемое, чтобы пройти нам все, что он держит. Это может быть массив, сборник событий или последовательность объектов и так далее.
Общая ошибка для новичков, которую я видел среди разработчиков, заключается в том, что они делают много операций на наблюдаемом, но расстраиваются, потому что они не могут видеть никаких результатов. Ты не одинок! Я сделал эту ошибку пару раз и как правило большого пальца – всегда не забывайте подписаться.
5. Как мы отменим наблюдаемое?
Важно отписаться, в противном случае мы заканчиваем утечку памяти, которая замедляет браузер. Если вы работали с угловой, есть труба с именем Asyncpipe которые подписываются и отписываются автоматически для вас.
Как мы отписываем, заключается в том, что мы создаем ссылку на каждый наблюдаемый, который подписан, создавая переменную для сохранения своего текущего состояния. А потом, для каждой переменной, мы цепим ее с Отписаться () метод. Помните, что вы можете отписаться только после того, как вы подписались. Это довольно просто, но часто забывается.
Обратите внимание, если вы отписываете здесь, Наблюдаемый_1 и Наблюдаемый_2 Вывод данных до того, как она отписывается, потому что это холодные наблюдаемые (не зависимые от времени), а Наблюдаемый_3 и Наблюдаемый_4 Не будет ничего выводить, потому что это горячие наблюдаемые (зависимые от времени).
Резюме
Как уже упоминалось выше, самая сложная часть изучения шаблона наблюдателя является мышлением. Мышление, в котором мы смотрим на значения по-разному, например, последовательность данных, которые испускают со временем. В этой статье мы покрывали типы способов, которыми мы можем создать наблюдаемый, а также как подписаться и отписаться.
Я рекомендую использовать шаблон наблюдателя, потому что он обеспечивает все, что предлагает образец обещания и многое другое. Он также предоставляет несколько великолепных операторов для предотвращения отправки пользователей тысячи ненужных запросов на бэкэнду.
Один из них – Deboncetime Что дает пользователю достаточно времени, чтобы написать полное слово, а затем отправить один запрос вместо запроса на каждый символ. Вы можете, конечно, достичь этого простым обещанием, но это требует некоторых строк кода.
Я охвачу больше о реактивном программировании в ближайшее время, оставайся настроенными!
Если вам интересно узнать больше о веб-экосистеме, вот несколько статей, которые я написал, чтобы повысить ваши веб-навыки, наслаждайтесь:)