1
00:00:03,950 --> 00:00:07,125
Trong bài tập trước,

2
00:00:07,125 --> 00:00:13,625
chúng tôi đã cập nhật các dịch vụ ứng dụng Angular của chúng tôi để sử dụng lời hứa,

3
00:00:13,625 --> 00:00:15,960
và cũng cập nhật các thành phần để

4
00:00:15,960 --> 00:00:19,245
đối phó với những lời hứa được trả lại bởi các dịch vụ.

5
00:00:19,245 --> 00:00:24,280
Trong bài tập này, đó là một phần mở rộng cho bài tập trước đó,

6
00:00:24,280 --> 00:00:29,485
chúng ta sẽ mô phỏng một sự chậm trễ thời gian cho lời hứa để giải quyết.

7
00:00:29,485 --> 00:00:31,240
Trong bài tập trước đó,

8
00:00:31,240 --> 00:00:33,490
những lời hứa đã được giải quyết ngay lập tức.

9
00:00:33,490 --> 00:00:35,540
Nhưng trong cuộc sống thực,

10
00:00:35,540 --> 00:00:42,934
khi bạn yêu cầu dữ liệu từ một dịch vụ và dịch vụ cung cấp một lời hứa

11
00:00:42,934 --> 00:00:44,540
, dịch vụ, lần lượt,

12
00:00:44,540 --> 00:00:47,900
cần phải đi và lấy dữ liệu từ một máy chủ back-end,

13
00:00:47,900 --> 00:00:49,295
và điều này sẽ mất thời gian.

14
00:00:49,295 --> 00:00:51,310
Vì vậy, để hứa hẹn giải quyết,

15
00:00:51,310 --> 00:00:53,740
sẽ có một khoảng thời gian trễ nhất định.

16
00:00:53,740 --> 00:00:59,880
Bây giờ, làm thế nào để chúng ta đối phó với sự chậm trễ thời gian này ở phía thành phần của chúng ta?

17
00:00:59,880 --> 00:01:04,040
Làm thế nào để chúng tôi giữ cho người dùng thông báo về thực tế là có

18
00:01:04,040 --> 00:01:09,810
một sự chậm trễ thời gian liên quan đến trước khi dữ liệu có thể được lấy và hiển thị cho người dùng?

19
00:01:10,070 --> 00:01:14,490
Làm thế nào để chúng ta đối phó với sự chậm trễ chính nó?

20
00:01:14,490 --> 00:01:15,830
Bây giờ, trong bài tập này,

21
00:01:15,830 --> 00:01:24,820
tôi sẽ mô phỏng sự chậm trễ thời gian bằng cách sử dụng một phương pháp JavaScript trong dịch vụ của tôi,

22
00:01:24,820 --> 00:01:34,190
và sau đó cũng cập nhật các thành phần để có thể hiển thị một thông báo cho người dùng bằng cách sử dụng

23
00:01:34,190 --> 00:01:41,765
các thành phần spinner tiến trình vật liệu góc để hiển thị một đĩa quay trong chế

24
00:01:41,765 --> 00:01:46,130
độ xem mẫu để giữ cho người dùng thông báo về

25
00:01:46,130 --> 00:01:51,630
thực tế là dữ liệu đang được lấy từ máy chủ,

26
00:01:51,630 --> 00:01:55,940
và chúng tôi sẽ hiển thị trong chế độ xem ngay khi dữ liệu trở nên

27
00:01:55,940 --> 00:02:00,590
có sẵn cho các thành phần khi lời hứa giải quyết.

28
00:02:00,590 --> 00:02:04,680
Hãy xem làm thế nào chúng ta có thể làm điều đó trong bài tập này.

29
00:02:04,680 --> 00:02:09,110
Một lần nữa, quay trở lại dịch vụ của tôi,

30
00:02:09,110 --> 00:02:11,990
ở đây tôi có dịch vụ món ăn mở ở đây.

31
00:02:11,990 --> 00:02:15,490
Thay vì có lời hứa

32
00:02:15,490 --> 00:02:18,620
được giải quyết ngay lập tức, bây giờ chúng ta sẽ đưa ra một lời hứa và sau đó để

33
00:02:18,620 --> 00:02:22,500
lời hứa được giải quyết sau một thời gian ngắn.

34
00:02:22,500 --> 00:02:26,510
Vì vậy, để làm điều đó, quyết tâm hứa hẹn này sẽ không làm việc

35
00:02:26,510 --> 00:02:31,055
nữa như được hiển thị ở đây vì vậy tôi sẽ xóa điều đó.

36
00:02:31,055 --> 00:02:34,535
Thay vào đó, khi phương thức của tôi được gọi,

37
00:02:34,535 --> 00:02:38,915
phương thức sẽ trả về một lời hứa bằng cách tạo ra một lời hứa mới.

38
00:02:38,915 --> 00:02:42,310
Bạn nhớ lại rằng khi bạn tạo ra lời hứa mới,

39
00:02:42,310 --> 00:02:47,060
bên trong lời hứa bạn sẽ có chức năng

40
00:02:47,060 --> 00:02:52,795
với quyết tâm và từ chối như hai tham số.

41
00:02:52,795 --> 00:02:56,080
Bây giờ, tôi sẽ chỉ sử dụng phần quyết tâm của nó.

42
00:02:56,080 --> 00:03:02,665
Vì vậy, tôi sẽ thực hiện các chức năng bên trong lời hứa chỉ sử dụng một hàm mũi tên ở đây.

43
00:03:02,665 --> 00:03:04,690
Vì vậy, tôi sẽ nói quyết tâm,

44
00:03:04,690 --> 00:03:13,380
và tôi sẽ mô phỏng một sự chậm trễ ngắn cho độ phân giải này diễn ra.

45
00:03:13,380 --> 00:03:17,340
Hãy để tôi viết một bình luận.

46
00:03:17,440 --> 00:03:28,780
Mô phỏng độ trễ máy chủ với độ trễ hai giây.

47
00:03:28,780 --> 00:03:31,410
Vậy, làm thế nào để chúng ta mô phỏng điều này?

48
00:03:31,410 --> 00:03:37,380
Vì vậy, chúng tôi sử dụng phương pháp SetTimeout

49
00:03:37,380 --> 00:03:43,900
có sẵn trong JavaScript.

50
00:03:43,900 --> 00:03:45,870
Vì vậy, đối với phương pháp setTimeout, một

51
00:03:45,870 --> 00:03:48,115
lần nữa, tôi sẽ thực hiện một hàm mũi tên,

52
00:03:48,115 --> 00:03:52,625
phương pháp setTimeout không có bất kỳ tham số nào mà chúng ta cần ở đó.

53
00:03:52,625 --> 00:03:57,565
Vì vậy, khi setTimeout này thực hiện,

54
00:03:57,565 --> 00:04:04,245
sau đó nó sẽ giải quyết việc cung cấp DESS.

55
00:04:04,245 --> 00:04:08,480
Vì vậy, hãy để tôi cắt DÂY DỰNG này và sau đó dán nó vào DÂY DỰNG.

56
00:04:08,480 --> 00:04:14,650
Vì vậy, bạn thấy rằng kết quả này bây giờ là trả về kết quả ở đây,

57
00:04:14,650 --> 00:04:22,370
và kết quả này sẽ được trả lại sau hai giây trì hoãn ở đây.

58
00:04:24,880 --> 00:04:31,160
Với bản cập nhật này, lời hứa của chúng tôi bây giờ sẽ giải quyết sau hai giây.

59
00:04:31,160 --> 00:04:37,010
Vì vậy, phương pháp setTimeout có sẵn trong JavaScript mô phỏng một sự chậm trễ ngắn.

60
00:04:37,010 --> 00:04:38,710
Vì vậy, như bạn có thể thấy,

61
00:04:38,710 --> 00:04:44,345
nó mô phỏng sự chậm trễ ngắn và có một cuộc gọi lại ở đây.

62
00:04:44,345 --> 00:04:46,280
Gọi lại này như bạn có thể thấy,

63
00:04:46,280 --> 00:04:48,930
Tôi đã thực hiện nó như là một chức năng mũi tên ở đây.

64
00:04:48,930 --> 00:04:51,730
Vì vậy, không có tham số và sau đó khi điều này giải quyết,

65
00:04:51,730 --> 00:05:01,450
nó sẽ giải quyết trả lại DESS và sự chậm trễ cho rằng là hai giây.

66
00:05:01,450 --> 00:05:04,185
Vì vậy, phần này là chức năng,

67
00:05:04,185 --> 00:05:09,180
và đây là sự chậm trễ thời gian mà chúng ta có ở đây.

68
00:05:09,180 --> 00:05:14,590
Vì vậy, bây giờ, lời hứa của tôi sẽ giải quyết sau hai giây trì hoãn.

69
00:05:14,590 --> 00:05:19,870
Tương tự như vậy, chúng ta hãy cập nhật hai phương pháp còn lại ở đây.

70
00:05:20,720 --> 00:05:22,785
Vì vậy, để làm điều đó,

71
00:05:22,785 --> 00:05:29,430
tôi sẽ sao chép

72
00:05:29,430 --> 00:05:35,745
phần đó và sau đó chỉ cần dán nó vào đó,

73
00:05:35,745 --> 00:05:41,325
và bạn sẽ nhận thấy rằng điều đó

74
00:05:41,325 --> 00:05:51,315
sẽ và tôi cần phải nói 2000.

75
00:05:51,315 --> 00:05:56,390
Vì vậy, điều đó hoàn thành phương pháp setTimeout có.

76
00:05:56,730 --> 00:06:00,445
Bây giờ, chúng ta sẽ có

77
00:06:00,445 --> 00:06:09,705
dấu ngoặc đơn đóng theo sau.

78
00:06:09,705 --> 00:06:16,725
Tương tự như vậy, hãy để tôi cập nhật phương pháp cuối cùng cũng.

79
00:06:16,725 --> 00:06:20,340
Vì vậy, bạn thấy rằng nó giải quyết các DESS,

80
00:06:20,340 --> 00:06:26,020
và sau đó sau hai giây chậm trễ,

81
00:06:29,270 --> 00:06:32,840
và đóng phương pháp đến đó.

82
00:06:32,840 --> 00:06:36,965
Đó là nó. Vì vậy, bây giờ dịch vụ món ăn của tôi được

83
00:06:36,965 --> 00:06:43,105
cập nhật để giải quyết tất cả các lời hứa sau hai giây chậm trễ.

84
00:06:43,105 --> 00:06:47,810
Bây giờ, tương tự, cập nhật dịch vụ lãnh đạo và dịch

85
00:06:47,810 --> 00:06:52,405
vụ khuyến mãi bằng cách sử dụng cùng một mẫu như tôi đã cho bạn thấy ở đây.

86
00:06:52,405 --> 00:06:57,890
Phần thứ hai của câu hỏi là bằng cách nào đó giữ cho người dùng thông báo về

87
00:06:57,890 --> 00:07:03,260
thực tế là có một sự chậm trễ thời gian liên quan đến việc có được kết quả,

88
00:07:03,260 --> 00:07:07,700
và do đó chế độ xem sẽ cập nhật ngay sau khi kết quả thu được.

89
00:07:07,700 --> 00:07:10,690
Bạn đã thấy loại hành vi này trong nhiều ứng dụng,

90
00:07:10,690 --> 00:07:18,020
bao gồm cả các ứng dụng di động, nơi bạn sẽ có một spinner hiển thị trên màn hình để giữ cho

91
00:07:18,020 --> 00:07:21,620
người dùng thông báo về thực tế là một cái gì đó đang được tải từ

92
00:07:21,620 --> 00:07:25,445
phía sau hậu trường và khi kết quả trở nên có sẵn,

93
00:07:25,445 --> 00:07:27,275
chế độ xem sẽ được cập nhật.

94
00:07:27,275 --> 00:07:33,750
Vì vậy, chúng ta sẽ sử dụng một cách tiếp cận tương tự trong các thành phần của chúng ta.

95
00:07:33,750 --> 00:07:35,530
Để giúp chúng tôi với điều này,

96
00:07:35,530 --> 00:07:40,585
chúng tôi sẽ sử dụng thành phần spinner tiến bộ từ Vật liệu góc.

97
00:07:40,585 --> 00:07:43,330
Vì vậy, để sử dụng các thành phần spinner tiến bộ,

98
00:07:43,330 --> 00:07:47,625
trước tiên chúng ta hãy đi đến các

99
00:07:47,625 --> 00:07:52,725
tập tin module.s ứng dụng và sau đó nhập các mô-đun spinner tiến bộ trong đó.

100
00:07:52,725 --> 00:07:55,180
Vì vậy, đi đến ứng dụng module.t.

101
00:07:55,180 --> 00:08:01,595
Đầu tiên chúng tôi sẽ đi lên đây để nhập khẩu

102
00:08:01,595 --> 00:08:12,150
MatProgressSpinnerModule từ góc độ/vật liệu/tiến điểm-spinner.

103
00:08:17,560 --> 00:08:23,025
Một khi chúng tôi đã nhập khẩu này vào tập tin,

104
00:08:23,025 --> 00:08:28,415
sau đó chúng tôi sẽ đi vào trang trí mô-đun ng vào nhập khẩu,

105
00:08:28,415 --> 00:08:34,290
và sau đó thêm vào MatProgressSpinnerModule vào đó.

106
00:08:34,290 --> 00:08:35,650
Một khi chúng tôi hoàn thành điều này,

107
00:08:35,650 --> 00:08:42,075
sau đó chúng tôi có thể cập nhật các thành phần để sử dụng các spinner tiến bộ.

108
00:08:42,075 --> 00:08:45,970
Vì vậy, ở đây, tôi sẽ chỉ cho bạn một ví dụ bằng cách

109
00:08:45,970 --> 00:08:51,555
minh họa cách chúng ta có thể cập nhật thành phần menu để hiển thị thông tin này.

110
00:08:51,555 --> 00:08:55,505
Vì vậy, đi vào tập tin bố trí các thành phần trình đơn.

111
00:08:55,505 --> 00:09:02,425
Ở đây, chúng ta thấy rằng chúng ta đang hiển thị menu bằng cách sử dụng danh sách lưới ở đây.

112
00:09:02,425 --> 00:09:06,880
Vì vậy, những gì chúng ta sẽ làm là, cho div này,

113
00:09:06,880 --> 00:09:14,060
tôi sẽ sử dụng chỉ thị NGIf và nói rằng điều này sẽ được hiển thị.

114
00:09:14,060 --> 00:09:18,465
Menu chỉ nên được hiển thị khi các món ăn không phải là null.

115
00:09:18,465 --> 00:09:23,670
Vì vậy, ban đầu, trong tập tin kịch bản tab thành phần của

116
00:09:23,670 --> 00:09:27,325
bạn, bạn sẽ thấy rằng khi bạn đi đến tập tin kịch bản tab thành phần bạn sẽ thấy rằng các

117
00:09:27,325 --> 00:09:32,250
món ăn của bạn hiện chỉ là một đối tượng chưa xác định ở đây,

118
00:09:32,250 --> 00:09:39,255
và rằng các món ăn sẽ được gán cho giá trị món ăn chỉ khi các vấn đề giải quyết.

119
00:09:39,255 --> 00:09:40,995
Vì vậy, cho đến thời điểm đó,

120
00:09:40,995 --> 00:09:43,145
các món ăn sẽ là một giá trị không xác định.

121
00:09:43,145 --> 00:09:45,665
Vì vậy, chúng ta có thể tận dụng lợi thế của thực tế đó,

122
00:09:45,665 --> 00:09:49,270
và sau đó thiết kế lại mẫu của chúng tôi như vậy mà,

123
00:09:49,270 --> 00:09:58,955
chúng ta sẽ nói cho thấy div này chỉ khi các món ăn không phải là một không xác định hoặc không phải là một đối tượng null.

124
00:09:58,955 --> 00:10:01,970
Khi nó là không rõ,

125
00:10:01,970 --> 00:10:10,210
sau đó tôi sẽ sử dụng một div thứ hai ở đây với các thuộc tính ẩn liên quan đến nó.

126
00:10:10,210 --> 00:10:14,310
Vì vậy, bạn đã thấy ẩn được sử dụng trước đây.

127
00:10:14,310 --> 00:10:18,685
Vì vậy, tôi sẽ sử dụng nó để xác định thân cây.

128
00:10:18,685 --> 00:10:23,350
Vì vậy, những gì điều này có nghĩa là nếu các món ăn không phải là null,

129
00:10:23,350 --> 00:10:25,145
sau đó div này sẽ được ẩn.

130
00:10:25,145 --> 00:10:26,865
Nếu món ăn là null,

131
00:10:26,865 --> 00:10:28,405
sau đó div này sẽ được hiển thị.

132
00:10:28,405 --> 00:10:31,435
Vì vậy, bây giờ bạn thấy rằng bạn có hai divs ở đây.

133
00:10:31,435 --> 00:10:39,840
Đầu tiên sẽ được hiển thị nếu các món ăn không phải là mảng đĩa null.

134
00:10:39,840 --> 00:10:42,365
Nếu không, phần thứ hai sẽ được hiển thị.

135
00:10:42,365 --> 00:10:46,120
Vì vậy, với sự thay đổi nhỏ này đối với mẫu của

136
00:10:46,120 --> 00:10:54,745
tôi, tôi có thể ẩn menu cho đến khi mảng món ăn trở nên có sẵn cho tôi,

137
00:10:54,745 --> 00:10:57,350
và khi mảng món ăn trở nên có sẵn,

138
00:10:57,350 --> 00:10:58,660
sau đó tôi sẽ hiển thị menu.

139
00:10:58,660 --> 00:11:06,000
Cho đến thời điểm đó, tôi sẽ cho thấy một mat-spinner. Đó

140
00:11:06,000 --> 00:11:11,295
là spinner tiến độ chưa xác định

141
00:11:11,295 --> 00:11:14,635
mà có sẵn như là một thành phần vật liệu góc cạnh.

142
00:11:14,635 --> 00:11:20,565
Vì vậy, điều này sẽ hiển thị như một vòng tròn xoay trong quan

143
00:11:20,565 --> 00:11:27,185
điểm của tôi, cho thành phần trình đơn này cho đến khi kết quả thu được,

144
00:11:27,185 --> 00:11:29,605
khi các vấn đề giải quyết.

145
00:11:29,605 --> 00:11:35,330
Ngoài ra, tôi cũng sẽ sử dụng h4, và trong h4,

146
00:11:35,330 --> 00:11:43,680
tôi sẽ nói tải, xin vui lòng chờ đợi.

147
00:11:43,680 --> 00:11:48,205
Vì vậy, những gì xảy ra là khi các món ăn chưa được giải quyết,

148
00:11:48,205 --> 00:11:51,575
spinner và thông báo này sẽ được hiển thị trên màn hình.

149
00:11:51,575 --> 00:11:55,210
Thời điểm các món ăn trở nên có sẵn khi kết quả đã hứa,

150
00:11:55,210 --> 00:11:58,015
sau đó menu sẽ được hiển thị trên màn hình.

151
00:11:58,015 --> 00:12:03,685
Bây giờ, chúng tôi sẽ cập nhật tương tự về thành phần,

152
00:12:03,685 --> 00:12:07,985
thành phần nhà, và thành phần chi tiết món ăn cũng.

153
00:12:07,985 --> 00:12:13,135
Tương ứng, chúng tôi sẽ cập nhật các dịch vụ lãnh đạo,

154
00:12:13,135 --> 00:12:18,570
và các dịch vụ khuyến mãi cũng để mô phỏng sự chậm trễ thời gian.

155
00:12:18,570 --> 00:12:22,000
Vì vậy, bằng cách sử dụng mô hình mà tôi vừa minh họa cho bạn,

156
00:12:22,000 --> 00:12:26,660
tiếp tục và cập nhật các dịch vụ cũng như các mẫu tương ứng,

157
00:12:26,660 --> 00:12:31,135
và chúng tôi sẽ thấy kết quả sau khi chúng tôi hoàn thành bản cập nhật.

158
00:12:31,135 --> 00:12:34,710
Sau khi bạn hoàn thành các bản cập nhật của tất cả các dịch vụ và

159
00:12:34,710 --> 00:12:38,255
các mẫu tương ứng cho các thành phần,

160
00:12:38,255 --> 00:12:43,565
hãy để tôi nhanh chóng chạy bạn thông qua các tập tin cập nhật ở đây.

161
00:12:43,565 --> 00:12:45,290
Vì vậy, đây là dịch vụ lãnh đạo.

162
00:12:45,290 --> 00:12:47,320
Vì vậy, bạn có thể thấy rằng trong dịch vụ lãnh đạo,

163
00:12:47,320 --> 00:12:54,675
tôi đã cập nhật các GetLeaders để sử dụng setTimeout chính xác như chúng tôi đã làm với các món ăn,

164
00:12:54,675 --> 00:12:58,880
và GetLeader và GetFeaturedLeader cũng.

165
00:12:58,880 --> 00:13:01,650
Tương tự như vậy, trong dịch vụ khuyến mãi,

166
00:13:01,650 --> 00:13:08,190
chúng tôi đã cập nhật id GetPromotion GetPromotion và GetFeaturedPromotion cũng.

167
00:13:08,190 --> 00:13:11,545
Vì vậy, ba dịch vụ bây giờ được cập nhật

168
00:13:11,545 --> 00:13:15,955
để gây ra một thời gian chậm trễ trước khi họ trả lại kết quả.

169
00:13:15,955 --> 00:13:18,325
Bây giờ, về mặt các mẫu,

170
00:13:18,325 --> 00:13:22,150
chúng tôi đã cập nhật mẫu menu.component.

171
00:13:22,150 --> 00:13:26,140
Hãy nhìn vào các mẫu home.components.

172
00:13:26,140 --> 00:13:27,985
Vì vậy, trong nhà.component,

173
00:13:27,985 --> 00:13:31,100
bạn nhận ra rằng khi chúng tôi thiết kế home.component,

174
00:13:31,100 --> 00:13:36,420
chúng tôi đã cấu hình các thẻ với món ăn NGIf sao.

175
00:13:36,420 --> 00:13:38,320
Vì vậy, tất cả những gì chúng ta cần làm là,

176
00:13:38,320 --> 00:13:40,630
xuống dưới đây chúng ta thêm một div với

177
00:13:40,630 --> 00:13:47,490
ẩn và món ăn ở đây nhưng spinner giống như chúng ta đã làm với menu.component.

178
00:13:47,490 --> 00:13:53,265
Tương tự như vậy, đối với chương trình khuyến mãi mat-card đã có NGIF tại chỗ,

179
00:13:53,265 --> 00:14:00,530
vì vậy chúng tôi chỉ cần thêm div bổ sung này ở đây với chương trình khuyến mãi ẩn ở đó,

180
00:14:00,530 --> 00:14:05,015
và cũng cho các nhà lãnh đạo ở đây xuống dưới đây.

181
00:14:05,015 --> 00:14:09,220
Tương tự như vậy, đi đến thành phần chi tiết món ăn.

182
00:14:09,220 --> 00:14:10,810
Trong thành phần chi tiết món ăn,

183
00:14:10,810 --> 00:14:17,105
chúng tôi đã có danh sách với món ăn NGIf cho các ý kiến.

184
00:14:17,105 --> 00:14:23,250
Ngoài ra, món ăn NGIf cho thẻ hiển thị các chi tiết của món ăn.

185
00:14:23,250 --> 00:14:30,440
Vì vậy, tất cả những gì chúng ta cần làm là thêm vào div mới này với các món ăn ẩn ở đây,

186
00:14:30,440 --> 00:14:32,970
và div spinner tại chỗ.

187
00:14:32,970 --> 00:14:36,295
Tương tự như vậy, trong thành phần về,

188
00:14:36,295 --> 00:14:39,015
khi bạn đi vào thành phần về,

189
00:14:39,015 --> 00:14:42,515
bạn sẽ thấy rằng chúng tôi có các nhà lãnh đạo công ty ở đây,

190
00:14:42,515 --> 00:14:47,330
và chúng tôi đã có danh sách với các ngôi sao NGIf với các nhà lãnh đạo.

191
00:14:47,330 --> 00:14:50,950
Vì vậy, tất cả những gì chúng ta cần làm là thêm vào div với

192
00:14:50,950 --> 00:14:55,715
ẩn và các nhà lãnh đạo ở đây với một spinner tại chỗ. Đó là nó.

193
00:14:55,715 --> 00:14:58,155
Ứng dụng của chúng tôi bây giờ đã được cập nhật.

194
00:14:58,155 --> 00:15:04,665
Chúng ta hãy xem ứng dụng được cập nhật trong trình duyệt tiếp theo.

195
00:15:04,665 --> 00:15:06,530
Đi đến trình duyệt,

196
00:15:06,530 --> 00:15:10,275
bạn sẽ thấy rằng khi bạn cố gắng tải vào thành phần nhà,

197
00:15:10,275 --> 00:15:14,520
có một khoảng thời gian ngắn khi bạn nhìn thấy máy quay trên

198
00:15:14,520 --> 00:15:18,730
màn hình trước khi thẻ được nạp.

199
00:15:18,730 --> 00:15:21,520
Tương tự như vậy, khi bạn đi đến menu.component,

200
00:15:21,520 --> 00:15:24,765
bạn sẽ thấy spinner ở phía bên trái trong

201
00:15:24,765 --> 00:15:28,995
hai giây trước khi menu thực tế được cập nhật,

202
00:15:28,995 --> 00:15:33,395
và khi bạn đi đến một món ăn cá nhân cũng bạn thấy rằng

203
00:15:33,395 --> 00:15:38,505
spinner trên màn hình trước khi các chi tiết của món ăn được hiển thị,

204
00:15:38,505 --> 00:15:42,500
và trong về thành phần cũng tương tự, bạn sẽ thấy rằng,

205
00:15:42,500 --> 00:15:50,400
bạn sẽ có vòng tròn quay ở đó trước khi thông tin của nhà lãnh đạo được cập nhật. Bất

206
00:15:50,400 --> 00:15:53,520
cứ khi nào chúng tôi di chuyển đến bất kỳ trong số này,

207
00:15:53,520 --> 00:16:02,190
bạn sẽ thấy một sự chậm trễ ngắn tương tự trước khi viêm được cập nhật trên màn hình.

208
00:16:04,030 --> 00:16:12,860
Vì vậy, với điều này bạn thấy làm thế nào bạn có thể đối phó với sự chậm trễ trong việc có được kết quả,

209
00:16:12,860 --> 00:16:18,874
hoặc chậm trễ trong lời hứa giải quyết từ phía dịch vụ trong thành phần của bạn

210
00:16:18,874 --> 00:16:21,830
và giữ cho người dùng thông báo về thực tế là có

211
00:16:21,830 --> 00:16:25,495
một sự chậm trễ ngắn trước khi màn hình được cập nhật.

212
00:16:25,495 --> 00:16:28,260
Điều này hoàn thành bài tập này.

213
00:16:28,260 --> 00:16:35,420
Trong bài tập này, chúng tôi đã thấy làm thế nào chúng tôi có thể mô phỏng một sự chậm trễ ngắn với lời hứa của chúng tôi.

214
00:16:35,420 --> 00:16:38,575
Nhận được giải quyết từ các dịch vụ,

215
00:16:38,575 --> 00:16:45,185
và chúng tôi cũng thấy làm thế nào để giữ

216
00:16:45,185 --> 00:16:49,460
cho người dùng thông báo bằng cách sử dụng các thành phần vật liệu góc quay MD để hiển thị trên màn hình trong

217
00:16:49,460 --> 00:16:53,900
suốt thời gian khi kết quả chưa có sẵn,

218
00:16:53,900 --> 00:16:59,025
đó là trong thời gian cho đến khi lời hứa được giải quyết.

219
00:16:59,025 --> 00:17:01,470
Điều này hoàn thành bài tập này.

220
00:17:01,470 --> 00:17:07,770
Đây là thời điểm tốt để bạn thực hiện một cam kết git với lời hứa thông điệp Phần hai.