В предыдущем упражнении
мы обновили наши службы угловых приложений, чтобы использовать обещания,
, а также обновление компонентов для
иметь дело с обещаниями, которые возвращаются службами.
В этом упражнении, которое является продолжением предыдущего упражнения,
мы собираемся имитировать задержку времени для разрешения обещания.
В предыдущем упражнении
обещания решались немедленно.
Но в реальной жизни
, когда вы запрашиваете данные от сервиса и сервис предоставляет обещание,
сервис, в свою очередь,
должен идти и извлекать данные с серверного сервера,
, и это займет время.
Итак, для обещания разрешить
будет определенное количество временной задержки.
Теперь, как мы справляемся с этой задержкой времени на нашей компонентной стороне?
Как мы информируем пользователя о том, что существует
задержка времени, прежде чем данные могут быть получены и показаны пользователю?
Как мы справляемся с самой задержкой?
Теперь, в этом упражнении,
я собираюсь имитировать задержку времени, используя метод JavaScript в моих службах,
, а затем также обновить компоненты, чтобы иметь возможность показать сообщение пользователю, используя
компонент углового материала прогресса spinner, чтобы показать вращающийся диск в
шаблон чтобы держать пользователя в курсе
о том, что данные извлекаются с сервера,
и мы будем визуализировать в представлении, как только данные становятся
доступными для компонента при разрешении обещания.
Давайте посмотрим, как мы можем это сделать в этом упражнении.
Опять же, возвращаясь к моему обслуживанию,
здесь у меня есть блюдо сервис открыт здесь.
Вместо того, чтобы немедленно решить обещание,
мы теперь собираемся дать обещание, а затем дать
обещание решить через короткий промежуток времени.
Итак, чтобы сделать это, это разрешение обещания больше не будет работать
, как показано здесь, поэтому я собираюсь удалить это.
Вместо этого, когда мой метод вызывается,
метод вернет обещание, создав новое обещание.
Вы помните, что когда вы создали новое обещание,
внутри обещания, у вас будет функция
с разрешением и отклонение как два параметра.
Теперь я иду использовать только разрешимую часть этого.
Итак, я реализую функцию внутри обещания, просто используя функцию стрелки здесь.
Итак, я скажу решимость,
и я буду имитировать короткую задержку для этого решения.
Позвольте мне написать комментарий.
Имитация задержки сервера с двухсекундной задержкой.
Итак, как мы это смоделируем?
Итак, мы используем метод setTimeout
, который доступен в JavaScript.
Итак, для метода setTimeout,
снова, я буду реализовывать функцию стрелки,
метод setTimeout не имеет никаких параметров, которые нам там нужны.
Таким образом, когда этот setTimeout выполняется,
, то он решит доставку BISHES.
Итак, позвольте мне сократить эти БЛЮДИ, а затем вставить их в БЛЮДИ.
Итак, вы видите, что этот результат теперь возвращает результат здесь,
и этот результат будет возвращен через две секунды задержки здесь.
С этим обновлением наше обещание решится через две секунды.
Таким образом, метод setTimeout, доступный в JavaScript, имитирует короткую задержку.
Итак, как вы можете видеть,
он имитирует короткую задержку и принимает обратный вызов здесь.
Этот обратный вызов, как вы можете видеть,
Я реализовал его как функцию стрелки здесь.
Таким образом, никаких параметров, а затем, когда это решится,
он собирается разрешить возврат BISHES и задержка для этого составляет две секунды.
Итак, эта часть является функцией
и это временная задержка, которую мы имеем здесь.
Итак, теперь мое обещание решится после двухсекундной задержки.
Аналогично, давайте обновим остальные два метода здесь.
Итак, чтобы сделать это,
Я просто собираюсь скопировать
эту часть, а затем просто вставить, что там,
, и вы заметите, что это
будет, и мне нужно сказать 2000.
Итак, это завершает метод setTimeout.
Теперь мы будем иметь
закрывающую скобку.
Аналогичным образом, позвольте мне также обновить последний метод.
Итак, вы видите, что он разрешает ДИШЕС,
, а затем через две секунды задержки,
и закрыть метод туда.
Вот оно. Итак, теперь мой блюдо обновляется
, чтобы разрешить все обещания после двух секунд задержки.
Теперь, аналогичным образом, обновите сервис лидера и
услугу продвижения, используя тот же шаблон, что я вам показал здесь.
Вторая часть вопроса заключается в том, чтобы каким-то образом держать пользователя в курсе
о том, что есть временная задержка, задействованная в получении результатов,
и поэтому представление будет обновляться, как только будут получены результаты.
Вы видели такое поведение во многих приложениях,
включая мобильные приложения, где у вас будет счетчик показан на экране, чтобы держать
пользователя в курсе того, что что-то загружается из-за
сцены и когда результаты становятся доступными,
представление будет обновлен.
Итак, мы собираемся использовать аналогичный подход в наших компонентах.
Чтобы помочь нам в этом,
мы будем использовать компонент spinner прогресса из Angular Material.
Итак, чтобы использовать компонент spinner прогресса,
давайте сначала перейти в файл приложения
module.ts, а затем импортировать модуль spinner прогресса там.
Итак, идем в приложение module.ts.
Мы сначала пойдем сюда, чтобы импортировать
MatProgressSpinnerModule из угловой/материал/прогресс спиннер.
После того, как мы импортировали это в файл,
, то мы перейдем в ng модуль декоратор в импорт,
, а затем добавить в MatProgressSpinnerModule в это.
После того, как мы закончим это,
, мы можем обновить компоненты, чтобы использовать прогресс счетчик.
Итак, здесь я покажу вам пример
, иллюстрирующий, как мы можем обновить компонент меню, чтобы показать эту информацию.
Итак, перейдите в файл компоновки компонентов меню.
Здесь мы видим, что мы показываем меню, используя список сетки здесь.
Итак, что мы сделаем, это для этого div
я собираюсь использовать директиву ngIf и сказать, что это должно отображаться.
Меню должно отображаться только тогда, когда блюда не являются нулевыми.
Так что изначально, в вашем файле скрипта вкладки компонентов
вы увидите, что при переходе на вкладку компонентов файл скрипта вы увидите, что
ваши блюда в настоящее время просто неопределенным объектом здесь,
и что блюда будут назначены значению блюд только тогда, когда проблемы решаются.
Итак, до этого момента
блюда будут неопределенным значением.
Таким образом, мы можем воспользоваться этим фактом,
, а затем перепроектировать наш шаблон таким образом, что
мы бы сказали показать этот div только в том случае, если блюда не являются неопределенными или не нулевым объектом.
Когда неизвестно,
, тогда я буду использовать второй div здесь со скрытым атрибутом, связанным с ним.
Итак, вы видели, как скрытые используются раньше.
Итак, я собираюсь использовать это для определения стебля.
Итак, это означает, что если блюда не null,
, то этот div будет скрыт.
Если блюда равно null,
, то будет показан этот div.
Итак, теперь вы видите, что у вас здесь два дива.
Первый будет показан, если блюда не являются нулевым массивом тарелок.
В противном случае будет показана вторая часть.
Итак, с этим небольшим изменением в моем шаблоне,
я могу скрыть меню до тех пор, пока массив блюд станет доступным для меня,
и когда массив посуды станет доступен,
то я покажу меню.
До этого момента я покажу коврик-спиннер.
Который является неопределенным прогрессом счетчик
, который доступен как угловой компонент материала.
Таким образом, это будет отображаться как вращающийся круг на мой взгляд,
для этого компонента меню до точки, что результаты будут получены,
, когда проблемы решаются.
Кроме того, я также буду использовать h4, и в пределах h4,
я скажу, что загрузка, пожалуйста, подождите.
Итак, что происходит, когда блюда еще не разрешены,
счетчик и это сообщение будет отображаться на экране.
В момент, когда блюда становятся доступными при обещанных результатах,
то меню будет отображаться на экране.
Теперь мы будем делать аналогичные обновления о компоненте,
домашнем компоненте, а также компоненте детализации блюда.
Соответственно, мы обновим сервис лидера
и сервис продвижения, чтобы имитировать задержку времени.
Итак, используя шаблон, который я только что проиллюстрировал вам,
идти вперед и обновить услуги, а также соответствующие шаблоны,
и мы увидим результат после того, как мы закончим обновление.
После завершения обновления всех служб и
соответствующих шаблонов для компонентов,
позвольте мне быстро запустить вас через обновленные файлы здесь.
Итак, это служба лидеров.
Итак, вы можете видеть, что в службе лидера
я обновил getLeaders использовать setTimeout точно так же, как мы делали с блюдами,
и getLeader и getFeaturedLeader также.
Аналогичным образом, в службе продвижения
мы обновили идентификатор getPromotions getPromotions и getFeaturedPromotions также.
Таким образом, три службы теперь обновляются
, чтобы вызвать задержку времени, прежде чем они вернут результат.
Теперь, с точки зрения шаблонов,
мы уже обновили шаблон menu.ponent.
Давайте посмотрим на шаблоны home.components.
Итак, в рамках home.component,
вы понимаете, что когда мы разработали home.component,
мы уже настроили карты со звездой ngIf блюдо.
Итак, все, что нам нужно сделать, это
ниже здесь мы добавляем div с
скрытые и блюдо здесь, но прядильщик так же, как мы сделали с menu.component.
Аналогичным образом, для продвижения mat-card уже имеет ngIf на месте,
так что нам просто нужно добавить этот дополнительный div здесь со скрытым продвижением там,
, а также для лидера здесь внизу.
Аналогично, идет к компоненту детали блюда.
В компоненте детализации блюда
у нас уже был список с ngIf блюдо для комментариев.
Также ngIf блюдо для карты, которая отображает детали блюда.
Итак, все, что нам нужно сделать, это добавить в этот новый div со скрытым блюдом здесь
и div spinner на месте.
Аналогично, в около компонента,
когда вы идете в о компоненте,
вы увидите, что у нас были корпоративные лидеры здесь,
и у нас уже был список со звездой ngIf с лидерами.
Итак, все, что нам нужно сделать, это добавить в div с
скрытые и лидеры здесь с прядильщик на месте. Вот оно.
Наше приложение теперь обновлено.
Давайте посмотрим на обновленное приложение в браузере дальше.
Перейдя в браузер,
вы увидите, что при попытке загрузить в домашний компонент,
есть короткий промежуток времени, когда вы видите счетчик на
экран перед загрузкой карт.
Аналогичным образом, когда вы идете в menu.component,
вы увидите прядильщик на левой стороне для
за две секунды до фактического меню обновляется,
и когда вы идете к отдельному блюду также вы видите, что
прядильщик на экране, прежде чем детали блюдо визуализируются,
и в о компоненте также аналогично, вы увидите, что,
у вас будет вращающийся круг там до того, как информация лидера будет обновлена.
Каждый раз, когда мы перейдем к любому из них,
вы увидите аналогичную короткую задержку перед обновлением воспаления на экране.
Итак, с этим вы видите, как вы можете справиться с задержкой в получении результатов,
или задержкой в разрешении обещания со стороны сервиса в пределах вашего компонента
и держать пользователя в курсе того, что есть
короткая задержка перед обновлением экрана.
Это завершает это упражнение.
В этом упражнении мы увидели, как мы можем имитировать короткую задержку с нашими обещаниями.
Получение разрешения от услуг,
и мы также видели, как держать пользователя в курсе, используя компоненты углового материала MD spinner
, чтобы показать на экране для
длительность, когда результаты еще не доступны,
, что на время до тех пор, пока обещание не будет разрешено.
Это завершает это упражнение.
Это хорошее время для вас, чтобы сделать git commit с сообщением обещание Часть вторая.