После краткого введения к обещаниям в предыдущей лекции,
давайте перейдем к нашему следующему упражнению, где мы будем
использовать обещания в рамках нашего углового приложения.
В частности, обещания являются важным способом борьбы с задержками, особенно когда
вам нужно получить доступ и получить данные с сервера
перед доставкой компонента через ваш сервис.
Таким образом, службы часто возвращают обещания
компонентов, когда компоненты вызывают методы обслуживания,
и затем, когда обещание
разрешает, то компоненты будут иметь результаты, доступные для них.
Мы перенастроим услуги, которые у нас есть в
наше угловое приложение, чтобы вернуть
обещания, а затем мы перенастроим
наши компоненты, чтобы иметь возможность справиться с обещаниями.
Наш первый шаг в этом упражнении — перенастроить все сервисы, чтобы вернуть обещания.
Таким образом, каждый из методов в нашем сервисе вместо возврата
значение немедленно он вернет обещания.
Итак, как мы настраиваем наши услуги, чтобы возвращать обещания?
Итак, перейдя в файл dishservice.ts,
метод getDishes здесь вернет обещание вместо массива блюд.
Итак, мы настраиваем метод getDises, чтобы вернуть
обещание, заключив этот объект блюда внутри обещания.
Это означает, что если обещание разрешится, то результат, доставленный
обещанием getDishes, будет массив тарелок.
Итак, в пределах вашего компонента
вы получите массив блюд, если обещание будет правильно.
Теперь, когда мы настроили getDises, чтобы вернуть обещание,
нам нужно перенастроить код так
, что этот массив блюд будет возвращен как часть обещания.
Теперь, поскольку у нас есть результат, уже доступный для нас,
я собираюсь использовать метод ярлыка
, возвращая обещание, немедленно решив обещание.
Теперь, очевидно, это хорошо работает, если у вас есть результаты сразу же доступны.
Но, когда вы перенастроили свой сервис на
, сможете пойти и получить эти данные с сервера,
тогда нам придется переписать этот код, чтобы иметь дело с тем, что
сервис не вернет результат
сразу, вместо этого вам придется подождать некоторое время.
В следующем упражнении
мы собираемся имитировать задержку с помощью метода JavaScript, чтобы он дал вам
представление о том, что значит иметь дело с задержками в получении результата от обещания.
Теперь, когда мы настроили getDises, чтобы вернуть обещание,
аналогичным образом, мы перенастроим остальные два метода.
Так что я собираюсь скопировать это обещание из
здесь, а затем просто прикрепить это к оставшимся двум там,
, чтобы я преобразовал их также, чтобы вернуть
обещания, а затем, конечно, все, что мы
здесь, должно быть заключено внутри решения обещания.
Поэтому я просто собираюсь скопировать разрешение обещания
и заключить это внутри решения здесь.
Аналогичным образом, для избранного блюда я вложим это в обещание разрешение.
Теперь мой блюдо настроен на возвращение обещаний.
Очевидно, это также означает, что мне нужно перейти к
мои компоненты, а затем перенастроить компоненты, чтобы иметь возможность иметь дело
с тем, что они не получают данные
немедленно вместо этого они получают обещание, а затем они
должны будут реализовать метод тогда в пределах
которое обещание, когда оно будет результатом, доставит данные вам.
Итак, теперь, когда мы настроили блюдо,
мы знаем одно место, где услуга активно используется, и это компонент меню.
Итак, позвольте мне показать вам, как мы перенастроим
компонент, чтобы иметь возможность справиться с обещанием.
Так что, когда вы идете в menucomponent.ts вы сразу
заметите, что есть красная линия под посудой, потому что,
, как вы видите, теперь,
dishservice.getDishes возвращает обещание, а затем здесь у вас есть,
обещание назначается объекту массива блюд, и это не правильно.
Как перенастроить этот код?
Итак, как я уже упоминал,
, когда мы перенастраиваем код,
нам нужно реализовать то и поймать для getDishes.
Итак, позвольте мне продолжить и реализовать только тогда в этот момент
для метода getDises, потому что поймать может быть реализована позже.
Прямо сейчас мы знаем, что обещание всегда будет решаться правильно,
, поэтому мы будем реализовывать метод тогда здесь,
, а затем, внутри метода тогда,
я получу объект посуды, поступающий, когда обещание разрешится.
И когда это объект посуды приходит в качестве параметра,
, так что вы видите, что я пишу здесь функцию стрело,
Я просто вырежу это и включу это прямо там.
Вот ты идешь. Вот как ваш компонент теперь может
захватить обещание, а затем получить результаты, когда обещание будет разрешено.
Вы можете видеть, что у нас есть dishService getDishes, а затем метод
изменить к нему и, когда тогда вызывается,
, когда обещание разрешает с другой стороны,
то блюда будут доставлены вам, потому что метод getDises
возвращает обещание, но результат будет массивом тарелки.
Этот массив блюд входит в качестве параметра здесь, поэтому я пишу функцию стрелки
здесь, где я назначаю это блюдо для посуды.
Итак, когда это обещание решится, то блюда будут
назначены этим блюдам. Вот оно.
Теперь мой компонент меню готов справиться с обещанием.
Конечно, чтобы справиться с ошибкой, вам также нужно
связать метод catch в метод getDises.
Итак, тогда и поймать методы, которые
обещание предоставляет для вас, и поэтому вы реализуете это и в пределах
, который вы будете предоставлять функцию, которая имеет дело с
ситуации, когда обещание разрешает или когда обещание отвергает с ошибкой.
Теперь аналогичным образом, мы должны перенастроить метод детализации блюда
, а также домашний компонент, чтобы иметь дело с тем, что
dishService теперь предоставляет обещания, а не сразу доставляет значения.
Пока мы находимся на нем,
мы могли бы также перенастроить как лидера, так и службу продвижения.
Поэтому я оставлю его в качестве упражнения для вас, чтобы завершить,
обновление как службы лидера, так и службы продвижения, чтобы иметь возможность
, чтобы выполнить соответствующие обещания.
Также, следовательно, вам придется перенастроить
код скрипта типа компонента в компоненте about в компоненте detail,
в домашнем компоненте, чтобы иметь дело с тем, что вы
теперь получаете обещания, а не фактические результаты.
Так что я позволю вам завершить эту часть, а не проиллюстрировать все это подробно,
Я показал вам один шаг с компонентом детали блюда.
Пожалуйста, выполните шаги как с лидером, так и с рекламной службой
, а затем настройте соответствующие компоненты соответствующим образом.
Позвольте мне быстро провести вас через обновления, которые вам нужно завершить.
Так как вы видите руководство службы я обновил уже с обещанием.
Как вы можете видеть здесь,
все методы теперь были обновлены, чтобы вернуть
обещания точно так же, как мы сделали с dishService.
Аналогичным образом, услуги продвижения также обновлены до
возвращать обещания из всех методов там.
Теперь, перейдя к компоненту о
вы увидите, что в около компонента также мы настроили
получить значения в то время обещания там.
Аналогичным образом, в компоненте детализации блюда вы заметите, что я
перенастроил это, чтобы иметь дело с обещанием там.
Аналогичным образом, в домашнем компоненте
вы могли бы заметить, что внутри домашнего компонента
все три метода здесь: getFeaturedDish,
featuredPromotion, и featuredLeader были обновлены,
с затем прикреплены к каждому из них, чтобы иметь дело с обещанием.
Код в значительной степени похож на то, что я проиллюстрировал с компонентом меню.
Как только вы закончите это,
давайте быстро посмотрим на наше приложение.
Перейдя в наше приложение в браузере,
вы не увидите никакой разницы в приложении.
Он работает точно так же, как и раньше,
за исключением того, что теперь он использует обещания, когда
услуги реализованы и ваши компоненты
имеют дело с обещаниями, когда они разрешены.
Таким образом, компонент меню работает правильно и
также компонент детали блюда также работает правильно.
С этим мы завершаем это упражнение.
В этом упражнении мы увидели, как нам удалось обновить наши услуги, чтобы
предоставлять обещания, и мы также обновили наши компоненты, чтобы иметь возможность справляться с обещаниями.
Это завершает это упражнение.
Это хорошее время для вас, чтобы сделать git commit с сообщением «Обещайте часть первая».