1
00:00:03,630 --> 00:00:08,225
Như chúng ta đã học được trong bài học trước đó,

2
00:00:08,225 --> 00:00:15,020
giao thức HTTP cho phép chúng ta giao tiếp giữa một khách hàng và một máy chủ.

3
00:00:15,020 --> 00:00:19,770
Chúng ta đã thấy một số chi tiết về giao thức HTTP đã có trong bài học trước đó.

4
00:00:19,770 --> 00:00:25,440
Trong bài học này, chúng ta sẽ khám phá hỗ trợ Angular cho HTTP.

5
00:00:25,440 --> 00:00:29,810
Angular hỗ trợ HTTP thông qua máy khách HTTP Angular.

6
00:00:29,810 --> 00:00:32,700
Chúng ta sẽ xem xét làm thế nào chúng ta có thể tận dụng máy

7
00:00:32,700 --> 00:00:36,725
khách HTTP Angular cho giao tiếp client-server,

8
00:00:36,725 --> 00:00:38,925
trong ứng dụng Angular của chúng tôi.

9
00:00:38,925 --> 00:00:42,045
Hai bài tập mà theo sau bài giảng này,

10
00:00:42,045 --> 00:00:45,650
chúng ta sẽ khám phá việc sử dụng thực tế

11
00:00:45,650 --> 00:00:49,660
của máy khách HTTP Angular trong ứng dụng Angular của chúng tôi.

12
00:00:49,660 --> 00:00:56,020
Hãy nhìn vào một chút chi tiết của khách hàng HTTP trong bài giảng này.

13
00:00:56,020 --> 00:00:58,415
Như chúng ta mong đợi,

14
00:00:58,415 --> 00:01:02,975
Angular tận dụng giao thức HTTP để cho phép giao tiếp giữa máy

15
00:01:02,975 --> 00:01:08,000
khách Angular của chúng tôi và máy chủ dựa trên HTTP.

16
00:01:08,000 --> 00:01:11,820
Hầu hết các trình duyệt hiện đại, thường được sử dụng để hỗ trợ

17
00:01:11,820 --> 00:01:17,820
XMLHttpRequest hoặc XHR cách giao tiếp với máy chủ. C@@

18
00:01:17,820 --> 00:01:22,519
àng ngày, các trình duyệt đang áp dụng API Fetch,

19
00:01:22,519 --> 00:01:26,900
đây là một sự thay thế hiện đại cho XMLHttpRequest như

20
00:01:26,900 --> 00:01:32,225
một cách cung cấp giao tiếp giữa trình duyệt và máy chủ.

21
00:01:32,225 --> 00:01:39,960
Góc tận dụng điều này để giao tiếp với máy chủ bằng cách sử dụng máy khách HTTP.

22
00:01:39,960 --> 00:01:48,450
Chúng ta sẽ xem xét việc sử dụng các khách hàng HTTP và làm thế nào chúng ta có thể sử dụng HttpClientModule,

23
00:01:48,450 --> 00:01:52,425
trong ứng dụng Angular của chúng tôi để kích hoạt Client-Server Communication.

24
00:01:52,425 --> 00:01:56,150
Bất kỳ giao tiếp nào giữa máy khách và máy chủ như chúng ta mong đợi,

25
00:01:56,150 --> 00:01:57,770
sẽ không đồng bộ trong tự nhiên.

26
00:01:57,770 --> 00:02:00,410
Vì vậy, điều đó có nghĩa là khách hàng của bạn

27
00:02:00,410 --> 00:02:03,470
cần phải chờ dữ liệu được gửi từ trang web máy chủ.

28
00:02:03,470 --> 00:02:06,620
Do đó, khách hàng của bạn cần phải được

29
00:02:06,620 --> 00:02:12,420
cấu hình để đối phó với sự chậm trễ này trong việc thu thập dữ liệu.

30
00:02:12,420 --> 00:02:16,295
Trong mô-đun trước đó,

31
00:02:16,295 --> 00:02:19,910
chúng tôi đã cấu hình các ứng dụng khách hàng của chúng tôi để có

32
00:02:19,910 --> 00:02:24,160
thể hiển thị các spinner tiến trình trên giao diện người dùng,

33
00:02:24,160 --> 00:02:28,795
để giữ cho người dùng thông báo về thực tế là có một sự chậm trễ trong việc thu thập dữ liệu,

34
00:02:28,795 --> 00:02:31,985
trước khi xem được hiển thị. Điều

35
00:02:31,985 --> 00:02:35,210
đó đến với sự trợ giúp của chúng tôi trong bài học này,

36
00:02:35,210 --> 00:02:42,880
nơi chúng tôi rõ ràng phải đối phó với sự chậm trễ để thu thập dữ liệu từ trang web máy chủ.

37
00:02:42,880 --> 00:02:47,000
Việc truy cập dữ liệu trong ứng dụng Angular của chúng tôi,

38
00:02:47,000 --> 00:02:52,150
nó luôn luôn là tốt hơn để ủy thác trách nhiệm này cho dịch vụ.

39
00:02:52,150 --> 00:02:56,450
Vì vậy, chúng tôi để cho dịch vụ đối phó với sự tương tác với máy chủ,

40
00:02:56,450 --> 00:03:02,795
và sau đó thành phần của bạn có được dữ liệu bằng cách gọi các phương thức của dịch vụ.

41
00:03:02,795 --> 00:03:08,405
Tương tác dịch vụ thành phần mà chúng tôi đã thiết lập trong mô-đun trước đó.

42
00:03:08,405 --> 00:03:09,970
Vì vậy, tất cả những gì chúng ta cần làm,

43
00:03:09,970 --> 00:03:16,700
là cập nhật các dịch vụ của chúng tôi để tận dụng mô-đun HTTP để giao tiếp với máy chủ,

44
00:03:16,700 --> 00:03:20,060
để lấy dữ liệu từ máy chủ và sau đó,

45
00:03:20,060 --> 00:03:22,635
cung cấp dữ liệu cho các thành phần.

46
00:03:22,635 --> 00:03:26,645
Các máy chủ HTTP chính nó,

47
00:03:26,645 --> 00:03:30,980
sẽ trả lại dữ liệu cho khách hàng của chúng

48
00:03:30,980 --> 00:03:37,245
tôi và mô-đun HTTP của chúng tôi trả về dữ liệu cho dịch vụ của chúng tôi trong tiếp theo quan sát được.

49
00:03:37,245 --> 00:03:40,010
Điều này quan sát được, sau đó sẽ được xử lý và

50
00:03:40,010 --> 00:03:43,030
sau đó trả lại như là một quan sát được để thành phần của chúng tôi.

51
00:03:43,030 --> 00:03:46,760
Phần đó chúng tôi đã thiết lập trong mô-đun trước đó.

52
00:03:46,760 --> 00:03:51,380
Vì vậy, chúng tôi sẽ tận dụng điều đó để cho phép chúng tôi nhanh chóng

53
00:03:51,380 --> 00:03:56,315
trượt giao tiếp HTTP giữa khách hàng và máy chủ,

54
00:03:56,315 --> 00:04:00,145
giữa dịch vụ và trang web máy chủ,

55
00:04:00,145 --> 00:04:03,080
và sau đó phần còn lại của cơ sở hạ tầng

56
00:04:03,080 --> 00:04:05,900
đã được đặt trong ứng dụng Angular của chúng tôi

57
00:04:05,900 --> 00:04:12,010
có thể dễ dàng đối phó với việc cung cấp của quan sát được thành phần của chúng tôi,

58
00:04:12,010 --> 00:04:15,130
và các thành phần đã đăng ký để quan sát viên đó.

59
00:04:15,130 --> 00:04:18,200
Hiệu ứng bổ sung mà chúng tôi sẽ giải quyết,

60
00:04:18,200 --> 00:04:21,040
là làm thế nào để xử lý lỗi.

61
00:04:21,040 --> 00:04:25,340
Chúng ta sẽ nói về điều đó trong một chút chi tiết hơn trong các trang trình bày sau này.

62
00:04:25,340 --> 00:04:27,625
Vì vậy, như tôi đã đề cập,

63
00:04:27,625 --> 00:04:30,850
khách hàng HTTP trả về một quan sát được.

64
00:04:30,850 --> 00:04:33,845
Vì vậy, khi bạn gọi mô-đun HTTP,

65
00:04:33,845 --> 00:04:38,040
vì vậy bạn sẽ thiết lập dịch vụ của bạn để sử dụng mô-đun HTTP,

66
00:04:38,040 --> 00:04:40,295
và với mô-đun HTTP,

67
00:04:40,295 --> 00:04:46,290
nó cung cấp cho bạn một số phương pháp phù hợp với get,

68
00:04:46,290 --> 00:04:49,800
put, post, và xóa động từ của giao thức HTTP.

69
00:04:49,800 --> 00:04:50,870
Vì vậy, các

70
00:04:50,870 --> 00:04:54,960
phương pháp get, put, post, và delete được tự động hỗ trợ bởi mô-đun HTTP.

71
00:04:54,960 --> 00:04:59,165
Vì vậy, bạn sẽ tận dụng các phương pháp này để có thể thực hiện

72
00:04:59,165 --> 00:05:03,330
các hoạt động cụ thể trên trang web máy chủ.

73
00:05:03,330 --> 00:05:06,365
Vì vậy, khi bạn phát hành một cuộc gọi HTTP get,

74
00:05:06,365 --> 00:05:11,000
bạn đang yêu cầu cho dữ liệu được chuyển từ máy chủ đến máy khách.

75
00:05:11,000 --> 00:05:13,195
Các khách hàng HTTP lần lượt,

76
00:05:13,195 --> 00:05:18,170
sẽ xử lý quan sát được cung cấp thông qua các mô-đun HTTP góc,

77
00:05:18,170 --> 00:05:22,470
và sau đó cung cấp mà quan sát được để thành phần của chúng tôi.

78
00:05:22,470 --> 00:05:25,550
Trong thành phần của chúng tôi, chúng tôi đã đăng ký

79
00:05:25,550 --> 00:05:28,340
để quan sát được cung cấp bởi dịch vụ của chúng tôi,

80
00:05:28,340 --> 00:05:32,580
và do đó xử lý dữ liệu được gửi qua quan sát,

81
00:05:32,580 --> 00:05:35,500
là khá thẳng về phía trước cho chúng tôi.

82
00:05:35,500 --> 00:05:38,900
Nếu các ứng dụng góc là

83
00:05:38,900 --> 00:05:43,705
giao tiếp với một máy chủ đó là trả về các phản ứng trong định dạng JSON,

84
00:05:43,705 --> 00:05:47,280
các khách hàng HTTP góc có được phương pháp chính nó

85
00:05:47,280 --> 00:05:51,750
phân tích các phản ứng JSON của máy chủ vào một đối tượng ẩn danh.

86
00:05:51,750 --> 00:05:58,070
Các khách hàng chính nó, không biết chính xác làm thế nào để giải thích hình dạng của đối tượng này.

87
00:05:58,070 --> 00:06:04,220
Vì vậy, chúng ta có thể hỗ trợ các khách hàng HTTP bằng cách xác định hình dạng của đối tượng,

88
00:06:04,220 --> 00:06:10,170
bằng cách xác định một khai báo của một lớp JavaScript,

89
00:06:10,170 --> 00:06:13,520
trong đó xác định hình dạng của đối tượng sao cho đầu ra

90
00:06:13,520 --> 00:06:17,025
từ get có thể được tiêu thụ một cách dễ dàng bởi các ứng dụng.

91
00:06:17,025 --> 00:06:19,330
Vì vậy, trong bài tập,

92
00:06:19,330 --> 00:06:20,500
bạn sẽ thấy tôi tuyên bố.

93
00:06:20,500 --> 00:06:23,560
Ví dụ, chúng ta sẽ nói này.http.get,

94
00:06:23,560 --> 00:06:27,695
và sau đó trong ngoặc vuông góc,

95
00:06:27,695 --> 00:06:29,940
tôi chỉ định món ăn ở đó.

96
00:06:29,940 --> 00:06:31,555
Vì vậy, theo cách đó,

97
00:06:31,555 --> 00:06:37,400
dữ liệu đến cho yêu cầu get từ trang web máy chủ sẽ được chuyển đổi thành

98
00:06:37,400 --> 00:06:41,660
một đối tượng món ăn và sau đó có thể được tiêu thụ ngay lập tức

99
00:06:41,660 --> 00:06:47,185
bởi thành phần của tôi khi nó được đặt ra nội dung.

100
00:06:47,185 --> 00:06:48,990
Bây giờ, nếu bạn yêu cầu,

101
00:06:48,990 --> 00:06:54,315
bạn có thể truy cập vào phản hồi hoàn chỉnh đến từ trang web máy chủ.

102
00:06:54,315 --> 00:06:57,810
Nhưng điều đó sẽ chỉ trong những trường hợp cụ thể,

103
00:06:57,810 --> 00:07:00,320
nơi bạn cần truy cập vào ví dụ,

104
00:07:00,320 --> 00:07:05,820
các tiêu đề của thông báo phản hồi HTTP đến và vân vân.

105
00:07:05,820 --> 00:07:08,300
Nhưng đối với hầu hết các mục đích,

106
00:07:08,300 --> 00:07:11,380
chỉ bằng cách khai báo hình dạng của đối tượng,

107
00:07:11,380 --> 00:07:16,100
chúng ta có thể dễ dàng nhận được dữ liệu JSON tự động phân tích thành một cách

108
00:07:16,100 --> 00:07:21,410
có thể được tiêu thụ bởi ứng dụng Angular của chúng tôi dễ dàng hơn.

109
00:07:21,410 --> 00:07:24,140
Như chúng ta mong đợi, giao

110
00:07:24,140 --> 00:07:27,845
tiếp giữa máy khách và máy chủ sẽ không được lỗi miễn phí.

111
00:07:27,845 --> 00:07:32,060
Lỗi sẽ xuất hiện vì nhiều lý do khác nhau.

112
00:07:32,060 --> 00:07:36,740
Nó có thể là kết nối không được thiết lập giữa máy khách và máy chủ,

113
00:07:36,740 --> 00:07:40,130
nó có thể là một thực tế là trả lời từ máy chủ bị mất,

114
00:07:40,130 --> 00:07:47,660
nó có thể là một thực tế rằng máy chủ không thể tìm thấy dữ liệu mà bạn đang tìm kiếm,

115
00:07:47,660 --> 00:07:54,005
và do đó trả về một 404 chỉ ra rằng máy chủ

116
00:07:54,005 --> 00:08:00,515
là không thể cung cấp dữ liệu cho bạn hoặc thiếu dữ liệu trên trang web máy chủ, và như vậy.

117
00:08:00,515 --> 00:08:04,070
Vì vậy, khách hàng của bạn cần phải đối phó với tất cả các lỗi này.

118
00:08:04,070 --> 00:08:05,745
Vì vậy, trong dịch vụ của

119
00:08:05,745 --> 00:08:09,200
chúng tôi, chúng tôi sẽ cấu hình dịch vụ của chúng tôi để có thể bắt gặp lỗi này.

120
00:08:09,200 --> 00:08:13,935
Vì vậy, đây là nơi việc sử dụng các phương pháp bắt được hỗ trợ bởi HTTP,

121
00:08:13,935 --> 00:08:17,870
cho phép chúng tôi để bắt lỗi, xử lý lỗi đó,

122
00:08:17,870 --> 00:08:21,745
và sau đó gửi các thông báo lỗi cho thành phần của chúng tôi,

123
00:08:21,745 --> 00:08:24,920
và sau đó cho các thành phần đối phó với các thông báo lỗi trong

124
00:08:24,920 --> 00:08:28,340
bất cứ cách nào nó có vẻ thích hợp.

125
00:08:28,340 --> 00:08:30,485
Bây giờ, trong thành phần của chúng tôi ví dụ,

126
00:08:30,485 --> 00:08:33,530
chúng tôi sẽ hiển thị thông tin lỗi mà chúng tôi

127
00:08:33,530 --> 00:08:36,980
thu được trong quan điểm của chúng tôi để chỉ ra cho người dùng,

128
00:08:36,980 --> 00:08:40,755
rằng một lỗi đã xảy ra trong việc lấy dữ liệu từ trang web máy chủ.

129
00:08:40,755 --> 00:08:43,210
Vì vậy, trong dịch vụ,

130
00:08:43,210 --> 00:08:45,015
chúng ta cần phải xử lý lỗi này.

131
00:08:45,015 --> 00:08:48,710
Bây giờ, khi thông tin lỗi này thu được từ

132
00:08:48,710 --> 00:08:52,615
trang web máy chủ thông qua HTTP client được xử lý trong dịch vụ của chúng tôi,

133
00:08:52,615 --> 00:08:54,815
sau đó chúng tôi sẽ chuyển đổi nó thành một chuỗi,

134
00:08:54,815 --> 00:08:59,905
và chuỗi đó sẽ được chuyển đến thành phần của chúng tôi bằng cách sử dụng phương pháp ném quan sát được.

135
00:08:59,905 --> 00:09:02,785
Vì vậy, phương pháp ném cho phép chúng ta ném một lỗi.

136
00:09:02,785 --> 00:09:05,770
Sau đó, bởi vì trong thành phần của chúng tôi, chúng tôi

137
00:09:05,770 --> 00:09:08,770
đăng ký vào điều này quan sát được trong phương pháp đăng ký,

138
00:09:08,770 --> 00:09:10,520
sau đó bạn cần phải đối phó với lỗi.

139
00:09:10,520 --> 00:09:12,505
Vì vậy, trong phần đăng ký,

140
00:09:12,505 --> 00:09:17,120
trước đó chúng tôi đã thấy chỉ có một chức năng được chỉ định cho các đăng ký,

141
00:09:17,120 --> 00:09:19,820
và rằng giao dịch với các hoạt động bình thường.

142
00:09:19,820 --> 00:09:21,490
Nhưng cùng với điều đó,

143
00:09:21,490 --> 00:09:27,270
chúng tôi cũng có thể cung cấp một chức năng thứ hai mà lỗi sẽ được phân phối.

144
00:09:27,270 --> 00:09:32,450
Vì vậy, bạn sẽ thấy tôi cấu hình phần đăng ký của thành phần của tôi

145
00:09:32,450 --> 00:09:38,480
bằng cách sử dụng một chức năng thứ hai được chỉ định trong phương thức đăng ký ở đó,

146
00:09:38,480 --> 00:09:44,475
như một ví dụ minh họa bởi mã này ở đây.

147
00:09:44,475 --> 00:09:47,780
Bằng cách đó, lỗi sẽ bị bắt trong

148
00:09:47,780 --> 00:09:50,890
thành phần của tôi và sau đó thông báo lỗi thích hợp,

149
00:09:50,890 --> 00:09:54,380
thông tin sẽ được gửi đến người dùng trong chế độ xem.

150
00:09:54,380 --> 00:10:00,825
Vì vậy, chúng ta sẽ thấy rằng như là một phần của bài tập thứ hai trong bài học đặc biệt này.

151
00:10:00,825 --> 00:10:07,010
Với sự hiểu biết nhanh chóng này của HTTP client,

152
00:10:07,010 --> 00:10:11,335
bây giờ chúng ta sẽ chuyển sang các bài tập mà chúng tôi sẽ sử dụng máy

153
00:10:11,335 --> 00:10:17,795
khách HTTP góc được cung cấp thông qua mô-đun HTTP của thư viện Angular HTTP,

154
00:10:17,795 --> 00:10:22,740
để cho phép chúng tôi giao tiếp với máy chủ của chúng tôi.