Реальный подход к теме, наиболее неправильно понятой разработчиками.

Чем больше вы узнаете, тем меньше вы знаете. Это старое адажио верно во многих контекстах, но особенно в кодировании. Более того, я думаю, что его суть можно понять, когда вы, как разработчик, впервые сталкиваетесь с observables.

Наблюдаемые объекты — это совершенно другой способ обработки асинхронных операций по сравнению с нашими любимыми промисами или обратными вызовами. Поэтому их внутренняя работа поначалу может показаться неясной.

На мой взгляд, понимание неизвестного лучше всего достигается путем сравнения его с хорошо известным. Итак, чтобы сделать наблюдаемые объекты немного менее пугающими, я сравню пять обычных операторов с предметом, который всем известен: дорожное движение.

Наблюдаемые как трафик

Почему наблюдаемые объекты сравнимы с трафиком? Наблюдаемые объекты — это уникальный способ обработки асинхронных операций. Операции являются асинхронными, если они не блокируют выполнение последующего кода. Самый распространенный пример — запрос к серверу, который не блокирует выполнение вашего кода, пока работает над своим ответом.

Обычно мы используем промисы для работы с асинхронным кодом. Обернув запрос сервера в обещание, мы можем легко выполнить код при его завершении или сбое.

В примере ниже Fetch API возвращает промис. Как только конечная точка из примера ответит, ответ записывается в консоль.

Результат обещания можно сравнить с автомобилем на пустом шоссе. Как только он завершается, одинокая машина едет к месту назначения, и остановить ее уже невозможно.

Наблюдаемые объекты отличаются несколькими важными способами.

  • Подписываясь и отписываясь, вы решаете, когда начать и прекратить прослушивание результатов (асинхронных) операций. Другими словами, вы решаете, когда дорога открыта или закрыта для движения.
  • Обещание всегда возвращается один раз. По задумке, на трассе всего одна машина. Напротив, наблюдаемые возвращают поток — последовательность данных. Это означает, что пока вы подписаны на наблюдаемую, новые автомобили могут ездить по шоссе.
  • Промис может обрабатывать только асинхронные операции. Однако наблюдаемые также могут обрабатывать синхронные операции. Таким образом, в земле обетованной (d) нам всегда придется ждать прибытия автомобилей, но с наблюдаемыми автомобилями они также могут немедленно добраться до шоссе.

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

Операторы RxJS как трафик

Обычные наблюдаемые эффективны сами по себе, но они действительно блестят в сочетании с операторами. Операторы — это функции, которые принимают простые значения или наблюдаемые в качестве входных данных и возвращают новые наблюдаемые. Это позволяет вам создавать наблюдаемые объекты или возиться с ними до тех пор, пока они не будут выдавать данные в соответствии с вашими потребностями.

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

1. Of

Of — один из самых распространенных операторов для создания наблюдаемых. Поскольку у нас нет наблюдаемых для использования в нашей аналогии с трафиком, мы можем создать их с помощью of .

Of преобразует заданные аргументы в наблюдаемую, которая выдает свои значения в заданном порядке и завершается после выдачи всех значений. В приведенном ниже примере оператору предоставляется три автомобиля. При подписке значения выдаются одно за другим. Хорошие новости, на нашей дороге пробки!

2. комбинироватьПоследние

Согласно документации, это то, что делает оператор: Объединяет несколько Observable для создания Observable, значения которого вычисляются на основе последних значений каждого из его входных Observable.

Итак, как это соотносится с повседневным трафиком? Предположим, у нас есть наблюдаемое cars, содержащее, как ни странно, автомобили. Кроме того, есть наблюдаемый speed, который отслеживает скорость проходящего cars.

Мы хотели бы знать, какие автомобили превышают ограничение скорости. Отдельным наблюдаемым не хватает информации, но объединение их значений с combineLatest позволяет вывести два штрафа!

«3. Карта"

В приведенном выше примере я незаметно добавил еще одного оператора. Мы использовали combineLatest, чтобы объединить наблюдаемые cars и speed, но чтобы узнать, двигается ли автомобиль, использовалось map.

Map — наиболее распространенный оператор, используемый для преобразования значений наблюдаемых. Вы можете запускать значения вашего источника, наблюдаемые через карту, чтобы изменять их любым способом, который соответствует вашим потребностям. В нашем примере мы изменили простой автомобиль и скорость на сообщение о допустимом разрешении скорости.

«4. Фильтр"

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

Этот оператор, как следует из его названия, отфильтровывает любые наблюдаемые, которые не соответствуют заданным критериям. Теперь мы опускаем каждую машину из результатов, которые играют по правилам!

«5. Брать"

Теперь мы применили filter,, мы получаем уведомления только о превышении скорости автомобилями. Но предположим, что есть полицейский, которому просто нужно выписать один штраф, чтобы выполнить свою норму на день. Он мог добиться этого, используя take . Take ограничивает количество выдаваемых значений. Таким образом, используя take(1), полицейский получит уведомление только о первой машине, которая превысила скорость.

Вот оно! Мы видели, как поток трафика с использованием промисов отличается от наблюдаемых. Используя наблюдаемые объекты, вы контролируете, когда дороги открыты и закрыты, то есть подписываетесь и отписываетесь. Кроме того, дорога доступна для нескольких автомобилей, т. е. для потока данных.

Кроме того, способ обработки трафика на дороге можно изменить по своему вкусу с помощью операторов RxJS. Результат нашей операции? Форд, превысивший скорость, получает штраф.

Понравилась статья? Подпишитесь на меня, чтобы быть в курсе!

Ресурсы

Больше контента на plainenglish.io. Подпишитесь на нашу бесплатную еженедельную рассылку здесь.