1
00:00:03,830 --> 00:00:09,840
После краткого введения к обещаниям в предыдущей лекции,

2
00:00:09,840 --> 00:00:12,270
давайте перейдем к нашему следующему упражнению, где мы будем

3
00:00:12,270 --> 00:00:15,235
использовать обещания в рамках нашего углового приложения.

4
00:00:15,235 --> 00:00:24,060
В частности, обещания являются важным способом борьбы с задержками, особенно когда

5
00:00:24,060 --> 00:00:27,885
вам нужно получить доступ и получить данные с сервера

6
00:00:27,885 --> 00:00:32,915
перед доставкой компонента через ваш сервис.

7
00:00:32,915 --> 00:00:36,440
Таким образом, службы часто возвращают обещания

8
00:00:36,440 --> 00:00:41,050
компонентов, когда компоненты вызывают методы обслуживания,

9
00:00:41,050 --> 00:00:43,490
и затем, когда обещание

10
00:00:43,490 --> 00:00:47,385
разрешает, то компоненты будут иметь результаты, доступные для них.

11
00:00:47,385 --> 00:00:51,920
Мы перенастроим услуги, которые у нас есть в

12
00:00:51,920 --> 00:00:55,970
наше угловое приложение, чтобы вернуть

13
00:00:55,970 --> 00:00:58,550
обещания, а затем мы перенастроим

14
00:00:58,550 --> 00:01:02,390
наши компоненты, чтобы иметь возможность справиться с обещаниями.

15
00:01:02,390 --> 00:01:10,925
Наш первый шаг в этом упражнении — перенастроить все сервисы, чтобы вернуть обещания.

16
00:01:10,925 --> 00:01:14,704
Таким образом, каждый из методов в нашем сервисе вместо возврата

17
00:01:14,704 --> 00:01:18,500
значение немедленно он вернет обещания.

18
00:01:18,500 --> 00:01:21,685
Итак, как мы настраиваем наши услуги, чтобы возвращать обещания?

19
00:01:21,685 --> 00:01:26,635
Итак, перейдя в файл dishservice.ts,

20
00:01:26,635 --> 00:01:35,390
метод getDishes здесь вернет обещание вместо массива блюд.

21
00:01:35,390 --> 00:01:38,840
Итак, мы настраиваем метод getDises, чтобы вернуть

22
00:01:38,840 --> 00:01:43,695
обещание, заключив этот объект блюда внутри обещания.

23
00:01:43,695 --> 00:01:49,235
Это означает, что если обещание разрешится, то результат, доставленный

24
00:01:49,235 --> 00:01:55,435
обещанием getDishes, будет массив тарелок.

25
00:01:55,435 --> 00:01:59,164
Итак, в пределах вашего компонента

26
00:01:59,164 --> 00:02:03,290
вы получите массив блюд, если обещание будет правильно.

27
00:02:03,290 --> 00:02:07,845
Теперь, когда мы настроили getDises, чтобы вернуть обещание,

28
00:02:07,845 --> 00:02:10,370
нам нужно перенастроить код так

29
00:02:10,370 --> 00:02:14,735
, что этот массив блюд будет возвращен как часть обещания.

30
00:02:14,735 --> 00:02:18,770
Теперь, поскольку у нас есть результат, уже доступный для нас,

31
00:02:18,770 --> 00:02:22,190
я собираюсь использовать метод ярлыка

32
00:02:22,190 --> 00:02:27,875
, возвращая обещание, немедленно решив обещание.

33
00:02:27,875 --> 00:02:34,720
Теперь, очевидно, это хорошо работает, если у вас есть результаты сразу же доступны.

34
00:02:34,720 --> 00:02:38,120
Но, когда вы перенастроили свой сервис на

35
00:02:38,120 --> 00:02:41,885
, сможете пойти и получить эти данные с сервера,

36
00:02:41,885 --> 00:02:46,670
тогда нам придется переписать этот код, чтобы иметь дело с тем, что

37
00:02:46,670 --> 00:02:49,310
сервис не вернет результат

38
00:02:49,310 --> 00:02:52,875
сразу, вместо этого вам придется подождать некоторое время.

39
00:02:52,875 --> 00:02:54,430
В следующем упражнении

40
00:02:54,430 --> 00:03:03,290
мы собираемся имитировать задержку с помощью метода JavaScript, чтобы он дал вам

41
00:03:03,290 --> 00:03:12,875
представление о том, что значит иметь дело с задержками в получении результата от обещания.

42
00:03:12,875 --> 00:03:16,865
Теперь, когда мы настроили getDises, чтобы вернуть обещание,

43
00:03:16,865 --> 00:03:20,770
аналогичным образом, мы перенастроим остальные два метода.

44
00:03:20,770 --> 00:03:24,890
Так что я собираюсь скопировать это обещание из

45
00:03:24,890 --> 00:03:30,430
здесь, а затем просто прикрепить это к оставшимся двум там,

46
00:03:30,430 --> 00:03:34,220
, чтобы я преобразовал их также, чтобы вернуть

47
00:03:34,220 --> 00:03:37,100
обещания, а затем, конечно, все, что мы

48
00:03:37,100 --> 00:03:40,225
здесь, должно быть заключено внутри решения обещания.

49
00:03:40,225 --> 00:03:43,129
Поэтому я просто собираюсь скопировать разрешение обещания

50
00:03:43,129 --> 00:03:50,675
и заключить это внутри решения здесь.

51
00:03:50,675 --> 00:04:00,080
Аналогичным образом, для избранного блюда я вложим это в обещание разрешение.

52
00:04:00,080 --> 00:04:05,005
Теперь мой блюдо настроен на возвращение обещаний.

53
00:04:05,005 --> 00:04:07,610
Очевидно, это также означает, что мне нужно перейти к

54
00:04:07,610 --> 00:04:11,360
мои компоненты, а затем перенастроить компоненты, чтобы иметь возможность иметь дело

55
00:04:11,360 --> 00:04:14,090
с тем, что они не получают данные

56
00:04:14,090 --> 00:04:17,720
немедленно вместо этого они получают обещание, а затем они

57
00:04:17,720 --> 00:04:21,200
должны будут реализовать метод тогда в пределах

58
00:04:21,200 --> 00:04:25,550
которое обещание, когда оно будет результатом, доставит данные вам.

59
00:04:25,550 --> 00:04:28,639
Итак, теперь, когда мы настроили блюдо,

60
00:04:28,639 --> 00:04:35,020
мы знаем одно место, где услуга активно используется, и это компонент меню.

61
00:04:35,020 --> 00:04:37,730
Итак, позвольте мне показать вам, как мы перенастроим

62
00:04:37,730 --> 00:04:40,640
компонент, чтобы иметь возможность справиться с обещанием.

63
00:04:40,640 --> 00:04:44,420
Так что, когда вы идете в menucomponent.ts вы сразу

64
00:04:44,420 --> 00:04:49,984
заметите, что есть красная линия под посудой, потому что,

65
00:04:49,984 --> 00:04:51,880
, как вы видите, теперь,

66
00:04:51,880 --> 00:04:58,875
dishservice.getDishes возвращает обещание, а затем здесь у вас есть,

67
00:04:58,875 --> 00:05:05,660
обещание назначается объекту массива блюд, и это не правильно.

68
00:05:05,660 --> 00:05:08,005
Как перенастроить этот код?

69
00:05:08,005 --> 00:05:09,559
Итак, как я уже упоминал,

70
00:05:09,559 --> 00:05:11,440
, когда мы перенастраиваем код,

71
00:05:11,440 --> 00:05:16,100
нам нужно реализовать то и поймать для getDishes.

72
00:05:16,100 --> 00:05:20,820
Итак, позвольте мне продолжить и реализовать только тогда в этот момент

73
00:05:20,820 --> 00:05:27,360
для метода getDises, потому что поймать может быть реализована позже.

74
00:05:27,360 --> 00:05:31,190
Прямо сейчас мы знаем, что обещание всегда будет решаться правильно,

75
00:05:31,190 --> 00:05:33,665
, поэтому мы будем реализовывать метод тогда здесь,

76
00:05:33,665 --> 00:05:36,645
, а затем, внутри метода тогда,

77
00:05:36,645 --> 00:05:46,650
я получу объект посуды, поступающий, когда обещание разрешится.

78
00:05:46,650 --> 00:05:50,400
И когда это объект посуды приходит в качестве параметра,

79
00:05:50,400 --> 00:05:53,190
, так что вы видите, что я пишу здесь функцию стрело,

80
00:05:53,190 --> 00:06:03,120
Я просто вырежу это и включу это прямо там.

81
00:06:03,170 --> 00:06:09,510
Вот ты идешь. Вот как ваш компонент теперь может

82
00:06:09,510 --> 00:06:16,775
захватить обещание, а затем получить результаты, когда обещание будет разрешено.

83
00:06:16,775 --> 00:06:21,575
Вы можете видеть, что у нас есть dishService getDishes, а затем метод

84
00:06:21,575 --> 00:06:26,560
изменить к нему и, когда тогда вызывается,

85
00:06:26,560 --> 00:06:28,880
, когда обещание разрешает с другой стороны,

86
00:06:28,880 --> 00:06:33,635
то блюда будут доставлены вам, потому что метод getDises

87
00:06:33,635 --> 00:06:38,450
возвращает обещание, но результат будет массивом тарелки.

88
00:06:38,450 --> 00:06:42,320
Этот массив блюд входит в качестве параметра здесь, поэтому я пишу функцию стрелки

89
00:06:42,320 --> 00:06:46,880
здесь, где я назначаю это блюдо для посуды.

90
00:06:46,880 --> 00:06:49,880
Итак, когда это обещание решится, то блюда будут

91
00:06:49,880 --> 00:06:53,930
назначены этим блюдам. Вот оно.

92
00:06:53,930 --> 00:06:57,455
Теперь мой компонент меню готов справиться с обещанием.

93
00:06:57,455 --> 00:07:01,715
Конечно, чтобы справиться с ошибкой, вам также нужно

94
00:07:01,715 --> 00:07:06,130
связать метод catch в метод getDises.

95
00:07:06,130 --> 00:07:08,390
Итак, тогда и поймать методы, которые

96
00:07:08,390 --> 00:07:11,540
обещание предоставляет для вас, и поэтому вы реализуете это и в пределах

97
00:07:11,540 --> 00:07:16,790
, который вы будете предоставлять функцию, которая имеет дело с

98
00:07:16,790 --> 00:07:23,355
ситуации, когда обещание разрешает или когда обещание отвергает с ошибкой.

99
00:07:23,355 --> 00:07:28,850
Теперь аналогичным образом, мы должны перенастроить метод детализации блюда

100
00:07:28,850 --> 00:07:33,890
, а также домашний компонент, чтобы иметь дело с тем, что

101
00:07:33,890 --> 00:07:44,520
dishService теперь предоставляет обещания, а не сразу доставляет значения.

102
00:07:44,520 --> 00:07:46,470
Пока мы находимся на нем,

103
00:07:46,470 --> 00:07:51,305
мы могли бы также перенастроить как лидера, так и службу продвижения.

104
00:07:51,305 --> 00:07:55,100
Поэтому я оставлю его в качестве упражнения для вас, чтобы завершить,

105
00:07:55,120 --> 00:07:59,930
обновление как службы лидера, так и службы продвижения, чтобы иметь возможность

106
00:07:59,930 --> 00:08:05,180
, чтобы выполнить соответствующие обещания.

107
00:08:05,180 --> 00:08:09,379
Также, следовательно, вам придется перенастроить

108
00:08:09,379 --> 00:08:18,785
код скрипта типа компонента в компоненте about в компоненте detail,

109
00:08:18,785 --> 00:08:23,360
в домашнем компоненте, чтобы иметь дело с тем, что вы

110
00:08:23,360 --> 00:08:27,950
теперь получаете обещания, а не фактические результаты.

111
00:08:27,950 --> 00:08:34,005
Так что я позволю вам завершить эту часть, а не проиллюстрировать все это подробно,

112
00:08:34,005 --> 00:08:37,620
Я показал вам один шаг с компонентом детали блюда.

113
00:08:37,620 --> 00:08:42,380
Пожалуйста, выполните шаги как с лидером, так и с рекламной службой

114
00:08:42,380 --> 00:08:45,890
, а затем настройте соответствующие компоненты соответствующим образом.

115
00:08:45,890 --> 00:08:50,275
Позвольте мне быстро провести вас через обновления, которые вам нужно завершить.

116
00:08:50,275 --> 00:08:56,365
Так как вы видите руководство службы я обновил уже с обещанием.

117
00:08:56,365 --> 00:08:57,585
Как вы можете видеть здесь,

118
00:08:57,585 --> 00:09:00,410
все методы теперь были обновлены, чтобы вернуть

119
00:09:00,410 --> 00:09:04,800
обещания точно так же, как мы сделали с dishService.

120
00:09:04,800 --> 00:09:08,420
Аналогичным образом, услуги продвижения также обновлены до

121
00:09:08,420 --> 00:09:12,660
возвращать обещания из всех методов там.

122
00:09:12,660 --> 00:09:16,560
Теперь, перейдя к компоненту о

123
00:09:16,560 --> 00:09:22,160
вы увидите, что в около компонента также мы настроили

124
00:09:22,160 --> 00:09:28,790
получить значения в то время обещания там.

125
00:09:28,790 --> 00:09:33,560
Аналогичным образом, в компоненте детализации блюда вы заметите, что я

126
00:09:33,560 --> 00:09:39,765
перенастроил это, чтобы иметь дело с обещанием там.

127
00:09:39,765 --> 00:09:43,495
Аналогичным образом, в домашнем компоненте

128
00:09:43,495 --> 00:09:46,190
вы могли бы заметить, что внутри домашнего компонента

129
00:09:46,190 --> 00:09:51,740
все три метода здесь: getFeaturedDish,

130
00:09:51,740 --> 00:09:54,650
featuredPromotion, и featuredLeader были обновлены,

131
00:09:54,650 --> 00:09:59,330
с затем прикреплены к каждому из них, чтобы иметь дело с обещанием.

132
00:09:59,330 --> 00:10:06,355
Код в значительной степени похож на то, что я проиллюстрировал с компонентом меню.

133
00:10:06,355 --> 00:10:08,570
Как только вы закончите это,

134
00:10:08,570 --> 00:10:12,995
давайте быстро посмотрим на наше приложение.

135
00:10:12,995 --> 00:10:15,665
Перейдя в наше приложение в браузере,

136
00:10:15,665 --> 00:10:18,870
вы не увидите никакой разницы в приложении.

137
00:10:18,870 --> 00:10:21,409
Он работает точно так же, как и раньше,

138
00:10:21,409 --> 00:10:26,385
за исключением того, что теперь он использует обещания, когда

139
00:10:26,385 --> 00:10:29,615
услуги реализованы и ваши компоненты

140
00:10:29,615 --> 00:10:33,080
имеют дело с обещаниями, когда они разрешены.

141
00:10:33,080 --> 00:10:36,530
Таким образом, компонент меню работает правильно и

142
00:10:36,530 --> 00:10:40,440
также компонент детали блюда также работает правильно.

143
00:10:40,440 --> 00:10:43,150
С этим мы завершаем это упражнение.

144
00:10:43,150 --> 00:10:49,130
В этом упражнении мы увидели, как нам удалось обновить наши услуги, чтобы

145
00:10:49,130 --> 00:10:55,990
предоставлять обещания, и мы также обновили наши компоненты, чтобы иметь возможность справляться с обещаниями.

146
00:10:55,990 --> 00:10:58,710
Это завершает это упражнение.

147
00:10:58,710 --> 00:11:06,300
Это хорошее время для вас, чтобы сделать git commit с сообщением «Обещайте часть первая».