Теперь, когда у вас было первое введение в реактивное программирование, RxJS,
и использование шаблона наблюдателя и
как Angular использует шаблон наблюдателя и поддерживает реактивное программирование,
давайте перейдем к нашему самому первому упражнению, чтобы получить наши ноги
мокрый, используя наблюдаемые в Angular.
В этом упражнении мы собираемся обновить наши сервисы, чтобы использовать наблюдаемые,
, потому что, когда мы перейдем к следующему модулю, где мы будем смотреть на поддержку HTTP в Angular,
мы сразу поймем, что поддержка HTTP в Angular основана вокруг наблюдаемых.
Итак, это хорошая идея для нас, чтобы познакомиться
с использованием наблюдаемых в самом уроке.
Итак, мы обновим сервисы для экспорта наблюдаемых.
После этого, в рамках наших компонентов,
мы будем подписываться на эти наблюдаемые и
получить данные, необходимые для рендеринга представлений.
Давайте перейдем к упражнению дальше.
Вам должно быть интересно,
как мы используем RxJS в пределах Angular,
и он уже доступен для нас?
Итак, вы заметите, что с угловым CLI,
, когда вы выстраиваете свое угловое приложение,
RxJS автоматически включается туда.
Итак, если вы перейдете к файлу package.json,
вы заметите, что в зависимости
библиотека RxJS уже включена в ваше приложение.
Итак, все, что вам нужно использовать из RxJS, уже доступно для вас.
Таким образом, мы можем идти вперед и использовать библиотеку RxJS прямо в нашем угловом приложении.
Если вы создаете свое угловое приложение с нуля,
, то вам нужно явно сделать npm установку RxJS.
Переходя к файлу dish.service.js,
позвольте мне сначала импортировать
из наших «rxjs» наблюдаемых.
Мы также импортируем - Теперь,
, когда вы используете RxJS в вашем угловом приложении,
вся библиотека не включается.
Вы можете импортировать только те части, которые вам нужны из библиотеки RxJS,
, а затем использовать их в приложении Angular.
Таким образом, когда ваше угловое приложение, наконец, готово к развертыванию,
только те части из RxJS, которые необходимы, будут
включены в ваше угловое приложение.
Оператор задержки.
Оператор задержки позволяет нам задерживать излучание элемента из нашего наблюдаемого.
Перейдя в методы,
мы теперь обновим эти методы, чтобы использовать наблюдаемые,
и мы вернем обещание, преобразуя
наблюдаемый в ваше обещание с помощью оператора toPromise.
Итак, если у вас уже есть компоненты, которые используют обещания,
и вы хотите не изменять компоненты,
вы можете просто преобразовать наблюдаемый в ваше обещание, а затем
отправить обещание на ваши компоненты.
Как мы поняли, обещания будут излучать только один элемент,
, тогда как вы можете видеть, что наблюдаемые основаны на потоках.
Итак, это ограничение, которое вы получите, если вы
просто используете два оператора обещания на наблюдаемых
и используете его, потому что оператор toPromise
позволит вашему наблюдаемым излучать только одно значение.
Но на данный момент давайте сделаем это как первый шаг, прежде чем мы
перейдем к полной наблюдаемой реализации наших услуг.
Итак, перейдя к методу getDishes,
я собираюсь вернуть эти блюда.
Итак, я собираюсь удалить эту часть, а затем сказать, вернуться.
Если вы хотите испускать только одно значение из наблюдаемого,
вы будете использовать метод
и который будет принимать любое значение, которое вы хотите испускать там.
Этого достаточно для нашего текущего приложения на данный момент.
Итак, мы собираемся использовать это,
, а также мы хотим отложить излучание значения на две секунды.
Итак, я собираюсь изменить эту часть кода, чтобы использовать
оператор задержки для моего наблюдаемого, используя pipe.
Мне нужно преобразовать это toPromise и дать обещание.
Итак, теперь мой метод getDises обновляется, чтобы использовать наблюдаемый,
, а затем преобразовать его в обещание, а затем отправить обещание моему компоненту.
Поэтому мне не нужно делать какие-либо обновления компонента.
Давайте использовать тот же подход для обновления оставшихся двух методов моего обслуживания здесь.
Так что я просто собираюсь скопировать эту часть,
, а затем обновить эту часть,
затем взять часть задержки,
, а затем обновить эту часть, чтобы использовать задержку
и преобразовать этот метод toPromise.
Таким образом, мой метод getDish также обновляется.
Позвольте мне сделать то же самое с методом getFeaturedDish.
Опять же, если вы хотите,
вы можете напечатать все это.
Я просто ленив только вырезать и вставить и изменить части, которые
Я хочу изменить и преобразовать этот метод toPromise.
Вот оно. Моя служба теперь обновлена, чтобы вернуть обещания от наблюдаемого здесь.
Таким образом, с этим обновлением
мой блюдо обновляется, чтобы использовать наблюдаемые, а не напрямую используя значения.
Аналогичным образом, продолжайте и обновляйте сервис лидера и службу продвижения.
Теперь вы заметили, что я уже обновил
сервис лидера, чтобы использовать наблюдаемые.
Аналогичным образом, я также обновил службу продвижения, чтобы использовать наблюдаемые.
Сохраните изменения и давайте посмотрим на наше приложение.
Когда вы заходите в браузер,
вы заметите, что ваше приложение работает точно так же, как и раньше
и извлекает данные из сервисов так же, как и раньше.
Так что не много изменений в вашем приложении как таковом.
Он выполняет точно так же.
Итак, обратите внимание, что, заменив ваши обещания наблюдаемыми,
в вашем приложении не было много изменений, как вы ожидаете этого.
Теперь пойдем на шаг дальше.
Теперь мы позволим нашим сервисам возвращать наблюдаемые,
и мы обновим компоненты, чтобы использовать наблюдаемые.
Причина, как я упоминал,
заключается в том, что, когда мы обновляем наши службы, чтобы использовать
службу HTTP, чтобы перейти на сервер для получения данных,
, то мы бы отметили, что в Angular методы HTTP будут возвращать наблюдаемые.
Службы могут просто передать наблюдаемые на наши компоненты и позволить
компоненты подписаться на эти наблюдаемые и использовать
данных, которые они получают таким образом.
Итак, это был бы промежуточный шаг для нас, чтобы выйти на эту стадию.
Мы получим, чтобы посмотреть HTTP в следующем модуле.
Возвращаясь к нашим услугам,
теперь вы можете удалить toPromise сначала, удалив
оператор toPromise, потому что нам это больше не нужно
, а затем мы просто удалим toPromise из этого,
import наблюдаемый, а затем пусть
наш метод возвращает
наблюдаемые вместо обещания.
Итак, как я уже упоминал,
любое обещание может сделать наблюдаемое также может сделать.
Итак, давайте обновим все это, чтобы вернуть наблюдаемые.
Сделайте то же самое с остальными двумя сервисами.
Теперь вы заметили, что я также обновил сервис лидера
, чтобы просто вернуть наблюдаемые вместо обещаний,
, а также служба продвижения была соответственно
обновлена, чтобы вернуть наблюдаемый вместо обещаний.
Теперь это означает, что нам нужно идти и обновлять наши компоненты
, чтобы использовать наблюдаемые, а не обещания, как мы делали раньше.
Теперь для обещания мы увидели, что нам нужно использовать.then
, чтобы получить результат, когда разрешение обещания будет выполнено.
С наблюдаемым, .then преобразуется в.subscribe.
То, как вы потребляете данные, останется точно таким же.
Таким образом, с этим незначительным изменением в ваших компонентах,
компоненты теперь смогут обрабатывать наблюдаемые, а не обещания.
Итак, перейдя ко всем четырем компонентам, которые используют сервисы,
сначала, давайте перейдем к файлу menu.component.ts.
В файле menu.component.ts
вы сразу заметите красную линию squiggly там,
под то очевидно, потому что мы не возвращаем обещание.
Вместо этого мы возвращаем наблюдаемый.
Так что просто конвертируйте это, чтобы подписаться, и это все.
Ваш компонент меню теперь может
потреблять наблюдаемые значения, испускаемые наблюдаемым.
Сделайте то же самое изменение в файле about.component.ts,
файле dishdetail.component.ts и файле home.component.ts.
После обновления оставшихся компонентов файлов Tapscott,
пойдем и посмотрим на поведение нашего приложения в браузере.
Зайдите в браузер, вы не заметите никакой разницы в поведении нашего приложения.
Эта версия нашего углового приложения обновлена, чтобы использовать
наблюдаемые вместо обещаний.
Итак, домашний компонент здесь
о компоненте выполняет точно так же, как и раньше,
и компонент меню делает точно то же самое.
Также компонент детализации блюда будет вести себя точно так же, как и раньше.
С этим мы завершаем это упражнение.
В этом упражнении мы сделали первые шаги по использованию
наблюдаемых в нашем угловом приложении, обновив
услуги и соответственно компоненты, чтобы
использовать наблюдаемые вместо обещаний.
Это хорошее время для вас, чтобы сделать git commit с сообщением RxJS часть первая.