Одна из наиболее важных концепций, которую нужно понять в Angular, - это что такое Observables, как они работают и как использовать их в вашем коде. На веб-сайте Angular есть обширная документация по Observables, но в этом блоге я планирую рассказать об основах его использования и о том, что вам нужно знать, чтобы начать работу с наблюдаемыми. Поскольку я новичок в Angular, быстро стало очевидно, что раннее понимание этого потока данных облегчит мне жизнь.
Так что же такое наблюдаемые? На высоком уровне Observables - это средство передачи информации или событий между различными частями приложения. Наблюдаемые объекты помогают передавать данные асинхронно и отлично подходят для вызова API или службы, когда получение ответа может занять неизвестное время. Observable обеспечивает постоянный поток данных для передачи нашей информации.
В свою очередь, Подписка - это то, как мы получаем доступ к этим данным! Наблюдатель будет подписываться на этот объект Observable или «слушать» его и иметь доступ к предоставленным данным, а также ко всем изменениям, происходящим в потоке. Observable будет предоставлять информацию, когда Observer подписывается на него, и будет продолжать делать это до тех пор, пока он не будет отписан от подписки. Для непрерывности я буду в основном использовать язык, предоставленный в документации Angular, который вызывает объект, предоставляющий данные, subject, а любой объект, получающий данные, - наблюдателем. . Наблюдатель также можно назвать потребителем, поскольку он потребляет данные Observable
Например, если вы разработчик, ищущий работу, вы можете подписаться на веб-сайты, такие как действительно или Linkedin, чтобы получать сообщения о последних доступных вакансиях. Вы получаете электронные письма, когда появляется новая позиция, соответствующая вашему описанию. Однако, когда вы, наконец, найдете эту идеальную работу, вы можете отказаться от подписки на эти веб-сайты и (в конечном итоге) перестанете получать эти электронные письма. Linkedin действует как Observable, и для доступа к потоку данных или электронной почте вы должны подписаться на Observable.
Обзорные примеры великолепны, но мы больше заинтересованы в практическом использовании этой функции в наших приложениях. Я продемонстрирую, как использовать Observables и подписаться на них в Angular.
Как создать наблюдаемое
Для этого блога я создал приложение Angular с
ng new application-name
команда. Я не буду здесь подробно останавливаться на том, как настроить приложение Angular, но я сделаю код доступным и расскажу, что вам нужно сделать для создания наблюдаемого в стандартном приложении Angular.
В наш компонент app.component.ts добавим следующий код:
Здесь мы создаем локальную переменную observable и назначаем ее Observable, вызывая метод create для объекта Observable, импортированного из rxjs. Затем мы передаем методу create функцию наблюдателя, которая влияет на наш поток данных. В строке 13 вы можете увидеть, что когда Observable впервые подписан на подписку, он возвращает строку «Начать подписку на наблюдателя». Чтобы имитировать временную задержку HTTP-запроса, я написал две функции тайм-аута, одна из которых возвращает другую строку через 3 секунды, а другая вызывает метод complete () для наблюдателя, завершая поток.
Чтобы подписаться на этот наблюдаемый объект, мы можем вызвать метод .subscribe () для наблюдаемого объекта внутри нашей функции ngOnInit (). Это означает, что как только наш компонент инициализируется, мы начинаем подписываться на Observable. Мы можем либо подключиться к данным, предоставляемым наблюдаемым, либо к любым ошибкам, которые он может выдать, либо к тому, когда он будет завершен. ниже - демонстрация присоединения ко всем трем.
Если мы запустим наш сервер разработки с
ng serve
и перейдите к localhost: 4200, мы увидим результат нашей подписки на консоли.
Обратите внимание, что, как вы могли догадаться, «Инициализация» регистрируется сразу после «Начать подписку…». Однако журнал «Обновление данных» и журнал «Подписка завершена» появляются после. Это потому, что мы наблюдаем асинхронный Observable. Как я упоминал ранее, одно из основных применений Observables - обработка асинхронного потока данных, и здесь мы продемонстрировали это.
Чтобы продемонстрировать способность регистрировать ошибку в нашем Observable, давайте немного изменим наблюдаемый объект, чтобы вместо завершения вывести ошибку. Если мы закомментируем наш Observer.complete () setTimeout и напишем под ним новый тайм-аут, который будет выглядеть так:
Мы видим, что наша подписка в строке 31 обнаружила ошибку, и запишем сообщение в журнал.
Более практичный пример
Теперь, когда мы знаем, как работают наблюдаемые и как их создавать, мы можем создать более полезную. Документация Angular для Observables демонстрирует, как отображать текущее время, но это не полная или полностью понятная демонстрация для тех, кто плохо знаком с этой концепцией, поэтому я расширю идею.
Мы можем создать новый компонент для получения времени с помощью следующей команды:
ng generate component get-the-time
Давайте изменим код внутри только что сгенерированного файла get-the-time.component.ts. Мы создадим Observable, который будет получать текущее время каждую секунду, как в документации Angular, но мы также назначим его переменной, которую мы будем обновлять. При инициализации компонента мы подпишемся на наш time Observable и будем использовать данные из потока для обновления нашей переменной currentTime.
И мы можем показать время, просто добавив это в наш новый компонент html.
и изменив наш исходный app.component.html только на следующую строку кода
<app-get-the-time></app-get-the-time>
Теперь в браузере мы увидим часы, которые обновляют время каждую секунду!
Заключение
Это был лишь общий обзор того, что такое наблюдаемые и что мы можем делать с подписками на них. Обычно в проектах вы подписываетесь на получение данных от API и ожидаете, что они будут получены асинхронно. Самое прекрасное в Observables, в отличие от Promises, заключается в том, что Observables можно рассматривать как «каналы» данных, которые остаются открытыми до закрытия, ошибки или завершения, обеспечивая поток значений. Однако обещания предоставляют единственное значение.
Я настоятельно рекомендую попрактиковаться, создав некоторые Observables самостоятельно и используя их в своих проектах. Подумайте о сценариях, в которых вам нужно будет асинхронно получить поток данных, например, обновить погоду или заполнить список задач. Я надеюсь, что этот блог поможет любому начинающему Angular, пытающемуся понять некоторые из основных концепций. Не стесняйтесь оставлять отзывы или задавать любые вопросы, и, как всегда, счастливого кодирования!
GitHub:
Ресурсы:
