Всем привет! В этой статье мы попытаемся понять одну из самых важных тем Angular, то есть Observables.

Для понимания этой статьи мы будем использовать несколько примеров. Мой подход заключается в том, чтобы как можно меньше использовать технический жаргон, чтобы вы могли понимать Observables, не отвлекаясь на другие термины.

Кроме того, поскольку мы уже друзья, я не позволю вам просто скопировать и вставить код. Мне нужно, чтобы вы программировали вместе со мной, чтобы вы могли правильно понять эту концепцию. Для этого я буду помещать скриншоты кода вместо того, чтобы помещать его в текстовый редактор, чтобы заставить вас действительно написать код и чему-то научиться из него. Это очень поможет вам, поверьте мне в этом. 😊 Теперь, когда у нас состоялись первые переговоры, давайте взглянем на Observables—

Что такое Наблюдаемый?

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

— Угловые документы

Простое наблюдаемое

Передача сообщений, хм. Что это значит? Что ж, представьте Observables как информационные бюллетени, в которых у нас есть отправитель и получатель. Для каждого получателя (подписчика) создается информационный бюллетень (подписка). Давайте разберемся в этом на простом примере.

Давайте обсудим, что здесь происходит.

  1. of — это оператор rxjs, который создает поток значений. Рассматривайте его как поставщика подписки на информационный бюллетень. Значения 1,2,3,4,5 можно рассматривать как информационные бюллетени.
  2. Считайте observable$ подписчиком новостной рассылки. Обратите внимание, мы использовали знак доллара в конце этой переменной? Хорошей практикой является добавление к имени Observable суффикса знак доллара, чтобы можно было принять его за Observable при первом просмотре.
  3. Чтобы выполнить созданный нами наблюдаемый объект и начать получать значения, мы вызываем метод .subscribe(), передавая наблюдатель. Считай это подпиской на рассылку новостей.

Теперь, если мы пойдем и проверим консоль браузера, мы получим ожидаемый результат:

Это было довольно гладко, правда? Теперь давайте углубимся, воспользовавшись простым запросом HTTP.

HTTP-запрос

Итак, давайте посмотрим, что здесь происходит. Если вы следуете инструкциям, не забудьте добавить HttpClientModule в файл app.module.ts, что позволит нам использовать HttpClient в файл компонента.

Если вы внимательно посмотрите, то заметите, что мы сделали реализацию на тех же строках, что и в предыдущем примере, так что у нас есть:

  1. HTTP-запрос к общедоступному API. Этот запрос возвращает наблюдаемое. (Поставщик подписки)
  2. Предоставление ссылки на этот Observable на posts$. (Подписчик)
  3. Подписка на этот наблюдаемый с помощью метода .subscribe(). (Подписка)
  4. Затем выполняйте обычные операции javascript, такие как отображение массива.

Теперь в консоли браузера вы увидите список сообщений, как и ожидалось.

Теперь, когда мы немного освоились с общим понятием подписки, давайте посмотрим, что еще мы можем сделать с подпиской.

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

  • next(): это обработчик для каждого доставленного значения. Он вызывается всякий раз, когда мы получаем уведомление (новые данные) от наблюдаемого.
  • error(): это обработчик, который обрабатывает любые ошибки.
  • complete(): это обработчик завершения выполнения. Он вызывается после получения всех уведомлений.

Теперь, если мы проверим консоль браузера, мы увидим следующий вывод:

Кажется вполне разумным, не так ли? Теперь, когда мы немного поиграли с HttpClient, давайте поработаем с шаблоном файлом и посмотрим, какие стратегии мы можем использовать для отображения данные.

Использование метода .subscribe()

Здесь мы просто помещаем весь результат в переменную posts, которую можем использовать в файле шаблона. Теперь внутри файла шаблона мы можем перебирать данные следующим образом:

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

  1. Нам нужно управлять подпиской вручную.
  2. Повышает сложность со стороны компонента, что еще больше приводит к сложному тестированию.
  3. Если мы плохо управляем подписками, это может привести к утечке памяти.

2. Использование асинхронной трубы

асинхронный канал подписывается на Observable и возвращает последнее значение, которое он выдал. Когда выдается новое значение, асинхронный канал помечает компонент для проверки изменений. Когда компонент уничтожается, асинхронный канал отменяет подписку автоматически, чтобы избежать утечек памяти. Давайте посмотрим на этот пример -

Здесь мы не подписываемся на наблюдаемое в самом компоненте. Мы будем использовать асинхронный канал в файле шаблона следующим образом:

Вот, | async — это то, что здесь называется асинхронным каналом. Помимо асинхронного канала, есть еще несколько каналов, о которых мы поговорим в другой статье. Использование асинхронного канала имеет следующие преимущества:

  • Он отвечает за автоматическую подписку и отмену подписки на Observable.
  • Природа асинхронного канала предотвращает потенциальные утечки памяти в приложении.

В целом, можно с уверенностью сделать вывод, что мы должны более широко использовать асинхронный канал по сравнению с методом .subscribe() из-за его характера работы с подписками. автоматически.

Заключение

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

Если вам понравилась эта статья, нажмите кнопку хлопка и подпишитесь на mind.bubble.

Спасибо за чтение.

Если вам нравится читать подобные истории и вы хотите поддержать нас, купите нам кофе в buymeacoffee и подумайте о том, чтобы зарегистрироваться, чтобы стать участником Medium. Это 5 долларов в месяц, что дает вам неограниченный доступ к историям на Medium. Если вы зарегистрируетесь по нашей ссылке, мы заработаем небольшую комиссию (без дополнительных затрат для вас). Спасибо! :)

Дополнительные материалы на PlainEnglish.io. Подпишитесь на нашу бесплатную еженедельную рассылку новостей. Подпишитесь на нас в Twitter и LinkedIn. Посетите наш Community Discord и присоединитесь к нашему Коллективу талантов.