Большинство программистов стараются, чтобы их код был как можно более СУХИМ (не повторяйте себя), так как поддерживать чистоту кода — хорошая практика. Но при чем здесь операторы RxJS? Давайте узнаем 👀
При работе с наблюдаемыми мы можем столкнуться с большим количеством повторяющегося кода. Но не о чем беспокоиться, потому что RxJS предоставляет возможность создавать собственные операторы. Некоторые примеры приведены ниже 👇
Оператор для обработки входных событий
В этом примере мы создадим собственный оператор RxJS, используя метод pipe. Давайте представим, что в нашем проекте у нас много прослушивателей изменений входных значений. В таких ситуациях мы часто используем такие операторы, как debounceTime и distinctUntilChanged. Благодаря возможности создавать собственные операторы, мы можем объединить эти два оператора в один и не повторять их каждый раз.
Проверьте код ниже.
Оператор debounceTime задерживает передачу значений из источника Observable на указанное время и выдает последнее значение, выданное в течение этого временного окна.
С другой стороны, оператор distinctUntilChanged отфильтровывает значения, которые совпадают с предыдущим значением, испускаемым исходным Observable.
Вместе эти операторы обеспечивают полезную комбинацию для обработки входных событий. Они позволяют вам дождаться, пока пользователь закончит печатать, прежде чем выполнять дорогостоящую операцию, и вы хотите обрабатывать каждое уникальное событие только один раз.
Вот пример того, как вы можете использовать эти операторы.
Вот и все! С valueChangesOperator вам больше не нужно многократно повторять один и тот же код 🙌
Оператор для обработки HTTP-запросов
Вы также можете создавать более продвинутые операторы. Например, если в большинстве случаев мы обрабатываем HTTP-запросы аналогичным образом, мы можем создать собственный оператор и для этого.
Предположим, что в нашем приложении мы хотим отображать сообщение при успешном выполнении HTTP-запроса или возникновении ошибки. Кроме того, мы всегда используем оператор takeUntil для отписки и хотим отображать загрузчик при отправке запроса. После завершения запроса мы хотим скрыть загрузчик.
Наш пользовательский оператор RxJS для этого и пример его использования выглядит следующим образом.
Эта функция является пользовательским оператором RxJS, который возвращает MonoTypeOperatorFunction<T>. Он создает конвейер операторов, которые можно применять к входному Observable, включая tap, catchError, finalize и takeUntil.
Оператор tap используется для отображения сообщения об успехе.
Оператор catchError перехватывает любые ошибки, выдаваемые входным Observable, и обрабатывает их, отображая сообщение об ошибке и возвращая новый Observable, который выдает ошибку, используя функцию throwError.
Оператор finalize выполняет побочный эффект, когда входной Observable завершается или возникает ошибка, в этом случае устанавливая состояние загрузки на false.
Оператор takeUntil завершает вывод Observable, когда указанный Observable (this.destroy$) выдает значение. Это полезно для отмены подписки, когда компонент уничтожен.
Этот оператор имеет побочные эффекты, поэтому он должен быть создан внутри компонента. Если вы хотите использовать такой оператор в нескольких компонентах, вам необходимо изменить его и удалить побочные эффекты.
Подведение итогов
Приведенные выше примеры демонстрируют, как вы можете создавать свои собственные операторы RxJS и настраивать их в соответствии со своими конкретными потребностями. Я надеюсь, что эта статья была полезной, и благодаря этому вы сможете создавать свои собственные операторы. Если вы хотите протестировать приведенный выше код, вы можете сделать это здесь, на StackBlitz ⚡️.
Если вам понравилось это читать, пожалуйста, хлопните в ладоши 👏 . Не стесняйтесь подписываться на меня и оставлять комментарии с вашими отзывами 👇.
