1
00:00:03,630 --> 00:00:08,225
Как мы уже узнали в предыдущем уроке, протокол

2
00:00:08,225 --> 00:00:15,020
HTTP позволяет нам общаться между клиентом и сервером.

3
00:00:15,020 --> 00:00:19,770
Мы видели некоторые подробности о протоколе HTTP уже в предыдущем уроке.

4
00:00:19,770 --> 00:00:25,440
В этом уроке мы рассмотрим угловую поддержку HTTP.

5
00:00:25,440 --> 00:00:29,810
Угловой поддерживает HTTP через Угловой HTTP-клиент.

6
00:00:29,810 --> 00:00:32,700
Мы рассмотрим, как мы можем использовать

7
00:00:32,700 --> 00:00:36,725
Угловой HTTP-клиент для связи клиент-сервер,

8
00:00:36,725 --> 00:00:38,925
в нашем угловом приложении.

9
00:00:38,925 --> 00:00:42,045
Два упражнения, которые следуют за этой лекцией,

10
00:00:42,045 --> 00:00:45,650
мы рассмотрим практическое использование

11
00:00:45,650 --> 00:00:49,660
Angular HTTP клиента в нашем угловом приложении.

12
00:00:49,660 --> 00:00:56,020
Давайте посмотрим немного деталей HTTP-клиента в этой лекции.

13
00:00:56,020 --> 00:00:58,415
Как мы и ожидали,

14
00:00:58,415 --> 00:01:02,975
Angular использует протокол HTTP для обеспечения связи между

15
00:01:02,975 --> 00:01:08,000
нашим Угловым клиентом и сервером на основе HTTP.

16
00:01:08,000 --> 00:01:11,820
Большинство современных браузеров, обычно используемых для поддержки

17
00:01:11,820 --> 00:01:17,820
XMLHttpRequest или XHR способа связи с сервером.

18
00:01:17,820 --> 00:01:22,519
Все чаще браузеры принимают Fetch API,

19
00:01:22,519 --> 00:01:26,900
, который является современной заменой XMLHttpRequest как

20
00:01:26,900 --> 00:01:32,225
способом обеспечения связи между браузером и сервером.

21
00:01:32,225 --> 00:01:39,960
Angular использует это для связи с сервером с помощью HTTP-клиента.

22
00:01:39,960 --> 00:01:48,450
Мы рассмотрим использование HTTP-клиента и как мы можем использовать HttpClientModule,

23
00:01:48,450 --> 00:01:52,425
в нашем угловом приложении, чтобы включить связь между клиентом и сервером.

24
00:01:52,425 --> 00:01:56,150
Любая связь между клиентом и сервером, как мы ожидаем,

25
00:01:56,150 --> 00:01:57,770
будет асинхронным по своему характеру.

26
00:01:57,770 --> 00:02:00,410
Итак, что означает, что ваш клиент должен

27
00:02:00,410 --> 00:02:03,470
ждать, пока данные будут доставлены с сайта сервера.

28
00:02:03,470 --> 00:02:06,620
Следовательно, ваш клиент должен быть настроен

29
00:02:06,620 --> 00:02:12,420
, чтобы справиться с этой задержкой в получении данных.

30
00:02:12,420 --> 00:02:16,295
В самом предыдущем модуле

31
00:02:16,295 --> 00:02:19,910
мы уже настроили наши клиентские приложения на

32
00:02:19,910 --> 00:02:24,160
быть в состоянии показать прогресс счетчика в пользовательском интерфейсе,

33
00:02:24,160 --> 00:02:28,795
держать пользователя в курсе того, что есть задержка в получении данных,

34
00:02:28,795 --> 00:02:31,985
до представления визуализируется.

35
00:02:31,985 --> 00:02:35,210
Что приходит нам на помощь в этом уроке

36
00:02:35,210 --> 00:02:42,880
, где мы, очевидно, должны иметь дело с задержкой для получения данных с сайта сервера.

37
00:02:42,880 --> 00:02:47,000
Доступ к данным в рамках нашего углового приложения

38
00:02:47,000 --> 00:02:52,150
всегда лучше делегировать эту ответственность сервису.

39
00:02:52,150 --> 00:02:56,450
Итак, мы позволяем сервису заниматься взаимодействием с сервером

40
00:02:56,450 --> 00:03:02,795
, а затем ваш компонент получает данные, вызвав методы сервиса.

41
00:03:02,795 --> 00:03:08,405
Взаимодействие службы компонентов, которое мы уже настроили в предыдущем модуле.

42
00:03:08,405 --> 00:03:09,970
Итак, все, что нам нужно сделать,

43
00:03:09,970 --> 00:03:16,700
это обновить наши услуги, чтобы использовать модуль HTTP для связи с сервером,

44
00:03:16,700 --> 00:03:20,060
для получения данных с сервера, а затем,

45
00:03:20,060 --> 00:03:22,635
предоставить данные компоненту.

46
00:03:22,635 --> 00:03:26,645
Сам HTTP сервер,

47
00:03:26,645 --> 00:03:30,980
вернет данные нашему клиенту и

48
00:03:30,980 --> 00:03:37,245
наш модуль HTTP возвращает данные к нашему сервису в последующем наблюдаемом.

49
00:03:37,245 --> 00:03:40,010
Этот наблюдаемый, будет затем обработан и

50
00:03:40,010 --> 00:03:43,030
затем возвращен как наблюдаемый к нашему компоненту.

51
00:03:43,030 --> 00:03:46,760
Эту часть мы уже настроили в предыдущем модуле.

52
00:03:46,760 --> 00:03:51,380
Таким образом, мы будем использовать это, чтобы позволить нам быстро

53
00:03:51,380 --> 00:03:56,315
проскальзывания HTTP-связи между клиентом и сервером,

54
00:03:56,315 --> 00:04:00,145
между службой и сайтом сервера,

55
00:04:00,145 --> 00:04:03,080
, а затем остальная часть инфраструктуры

56
00:04:03,080 --> 00:04:05,900
, которая уже на месте в нашем угловом приложении

57
00:04:05,900 --> 00:04:12,010
может легко справиться с доставка наблюдаемого к нашему компоненту,

58
00:04:12,010 --> 00:04:15,130
и компонент, уже подписанный на этого наблюдателя.

59
00:04:15,130 --> 00:04:18,200
Дополнительный эффект, с которым мы будем иметь дело,

60
00:04:18,200 --> 00:04:21,040
- это как обрабатывать ошибки.

61
00:04:21,040 --> 00:04:25,340
Мы поговорим об этом чуть более подробно в последующих слайдах.

62
00:04:25,340 --> 00:04:27,625
Итак, как я уже упоминал,

63
00:04:27,625 --> 00:04:30,850
HTTP-клиент возвращает наблюдаемый.

64
00:04:30,850 --> 00:04:33,845
Итак, когда вы вызываете модуль HTTP,

65
00:04:33,845 --> 00:04:38,040
, чтобы вы настроили свой сервис, чтобы использовать модуль HTTP,

66
00:04:38,040 --> 00:04:40,295
и с модулем HTTP,

67
00:04:40,295 --> 00:04:46,290
он предоставляет вам несколько методов, которые соответствуют get,

68
00:04:46,290 --> 00:04:49,800
put, post и удалить глаголы протокола HTTP.

69
00:04:49,800 --> 00:04:50,870
Таким образом, методы get, put, post,

70
00:04:50,870 --> 00:04:54,960
и delete автоматически поддерживаются модулем HTTP.

71
00:04:54,960 --> 00:04:59,165
Таким образом, вы будете использовать эти методы, чтобы иметь возможность выполнять

72
00:04:59,165 --> 00:05:03,330
те конкретные операции на сайте сервера.

73
00:05:03,330 --> 00:05:06,365
Итак, когда вы выполняете вызов HTTP get,

74
00:05:06,365 --> 00:05:11,000
вы запрашиваете доставку данных с сервера клиенту.

75
00:05:11,000 --> 00:05:13,195
HTTP-клиент, в свою очередь,

76
00:05:13,195 --> 00:05:18,170
будет обрабатывать наблюдаемые, которые доставляются через модуль Угловой HTTP,

77
00:05:18,170 --> 00:05:22,470
, а затем доставлять это наблюдаемое нашему компоненту.

78
00:05:22,470 --> 00:05:25,550
В рамках нашего компонента, мы уже подписываемся

79
00:05:25,550 --> 00:05:28,340
на наблюдаемый, который доставляется нашим сервисом,

80
00:05:28,340 --> 00:05:32,580
и поэтому обработка данных, которые отправляются через наблюдаемый,

81
00:05:32,580 --> 00:05:35,500
является довольно прямой для нас.

82
00:05:35,500 --> 00:05:38,900
Если угловое приложение

83
00:05:38,900 --> 00:05:43,705
взаимодействует с сервером, который возвращает ответ в формате JSON,

84
00:05:43,705 --> 00:05:47,280
Angular HTTP клиенты получают сам метод

85
00:05:47,280 --> 00:05:51,750
анализирует ответ сервера JSON в анонимный объект.

86
00:05:51,750 --> 00:05:58,070
Сам клиент, точно не знает, как интерпретировать форму этого объекта.

87
00:05:58,070 --> 00:06:04,220
Таким образом, мы можем помочь HTTP-клиенту, указав форму объекта,

88
00:06:04,220 --> 00:06:10,170
, указав объявление класса JavaScript,

89
00:06:10,170 --> 00:06:13,520
которые определяют форму объекта, так что вывод

90
00:06:13,520 --> 00:06:17,025
из get может быть легко потреблен приложением.

91
00:06:17,025 --> 00:06:19,330
Итак, в упражнении

92
00:06:19,330 --> 00:06:20,500
вы увидите, как я объявляю.

93
00:06:20,500 --> 00:06:23,560
Например, скажем это.http.get,

94
00:06:23,560 --> 00:06:27,695
, а затем в угловых скобках,

95
00:06:27,695 --> 00:06:29,940
я укажу блюдо там.

96
00:06:29,940 --> 00:06:31,555
Таким образом,

97
00:06:31,555 --> 00:06:37,400
входящие данные для запроса get с сайта сервера будут преобразованы в

98
00:06:37,400 --> 00:06:41,660
объект блюдо, а затем могут быть потреблены немедленно

99
00:06:41,660 --> 00:06:47,185
моим компонентом, когда он выкладывает контент.

100
00:06:47,185 --> 00:06:48,990
Теперь, если вам требуется,

101
00:06:48,990 --> 00:06:54,315
вы можете получить доступ к полному ответу, поступающей с сайта сервера.

102
00:06:54,315 --> 00:06:57,810
Но это было бы только при определенных обстоятельствах,

103
00:06:57,810 --> 00:07:00,320
, где вам нужен доступ к например,

104
00:07:00,320 --> 00:07:05,820
заголовки входящего сообщения HTTP ответа и так далее.

105
00:07:05,820 --> 00:07:08,300
Но для большинства целей

106
00:07:08,300 --> 00:07:11,380
просто объявив форму объекта,

107
00:07:11,380 --> 00:07:16,100
мы можем легко получить данные JSON автоматически разобраны в способ

108
00:07:16,100 --> 00:07:21,410
, который может быть потреблен нашим угловым приложением более легко.

109
00:07:21,410 --> 00:07:24,140
Как мы и ожидаем, связь

110
00:07:24,140 --> 00:07:27,845
между клиентом и сервером не будет без ошибок.

111
00:07:27,845 --> 00:07:32,060
Ошибки будут возникать по разным причинам.

112
00:07:32,060 --> 00:07:36,740
Может быть, что соединение не устанавливается между клиентом и сервером,

113
00:07:36,740 --> 00:07:40,130
это может быть тот факт, что ответ с сервера теряется,

114
00:07:40,130 --> 00:07:47,660
это может быть тот факт, что сервер не может найти данные, которые вы ищете,

115
00:07:47,660 --> 00:07:54,005
и поэтому возвращает 404, указывающий, что сервер

116
00:07:54,005 --> 00:08:00,515
не может предоставить данные для вас или отсутствующие данные на сайте сервера и так далее.

117
00:08:00,515 --> 00:08:04,070
Таким образом, ваш клиент должен иметь дело со всеми этими ошибками.

118
00:08:04,070 --> 00:08:05,745
Итак, в рамках нашего сервиса

119
00:08:05,745 --> 00:08:09,200
мы собираемся настроить наш сервис, чтобы иметь возможность поймать эту ошибку.

120
00:08:09,200 --> 00:08:13,935
Таким образом, здесь использование метода catch, который поддерживается HTTP,

121
00:08:13,935 --> 00:08:17,870
позволяет нам поймать ошибку, обработать эту ошибку,

122
00:08:17,870 --> 00:08:21,745
, а затем отправить сообщение об ошибке нашему компоненту,

123
00:08:21,745 --> 00:08:24,920
, а затем позволить компоненту справиться с сообщением об ошибке в

124
00:08:24,920 --> 00:08:28,340
каким бы то ни было образом это казалось целесообразным.

125
00:08:28,340 --> 00:08:30,485
Теперь, в рамках нашего компонента, например,

126
00:08:30,485 --> 00:08:33,530
мы будем отображать информацию об ошибке, которую мы

127
00:08:33,530 --> 00:08:36,980
получили на наш взгляд, чтобы указать пользователю,

128
00:08:36,980 --> 00:08:40,755
, что произошла ошибка при получении данных с сайта сервера.

129
00:08:40,755 --> 00:08:43,210
Итак, в рамках сервиса

130
00:08:43,210 --> 00:08:45,015
нам нужно обработать эту ошибку.

131
00:08:45,015 --> 00:08:48,710
Теперь, когда эта информация об ошибке, полученная от

132
00:08:48,710 --> 00:08:52,615
сайта сервера через HTTP-клиент, обрабатывается в рамках нашего сервиса,

133
00:08:52,615 --> 00:08:54,815
, тогда мы преобразуем это в строку,

134
00:08:54,815 --> 00:08:59,905
и эта строка будет передана нашему компоненту с помощью наблюдаемого метода броска.

135
00:08:59,905 --> 00:09:02,785
Таким образом, метод throw позволяет нам выбросить ошибку.

136
00:09:02,785 --> 00:09:05,770
Тогда, потому что в нашем компоненте мы

137
00:09:05,770 --> 00:09:08,770
подписываемся на этот наблюдаемый в рамках метода подписки,

138
00:09:08,770 --> 00:09:10,520
то вам нужно иметь дело с ошибкой.

139
00:09:10,520 --> 00:09:12,505
Итак, в части подписки

140
00:09:12,505 --> 00:09:17,120
ранее мы видели только одну функцию, указываемую для подписки,

141
00:09:17,120 --> 00:09:19,820
и которая имеет дело с нормальной работой.

142
00:09:19,820 --> 00:09:21,490
Но вместе с этим

143
00:09:21,490 --> 00:09:27,270
мы также можем предоставить вторую функцию, к которой будет доставлена ошибка.

144
00:09:27,270 --> 00:09:32,450
Итак, вы увидите, что я настраиваю подписку части моего компонента

145
00:09:32,450 --> 00:09:38,480
, используя вторую функцию, указанную в методе subscribe,

146
00:09:38,480 --> 00:09:44,475
в качестве примера, иллюстрированного этим кодом здесь.

147
00:09:44,475 --> 00:09:47,780
Таким образом, ошибка будет поймана в пределах

148
00:09:47,780 --> 00:09:50,890
моего компонента, а затем соответствующее сообщение об ошибке,

149
00:09:50,890 --> 00:09:54,380
информация будет доставлена пользователю в представлении.

150
00:09:54,380 --> 00:10:00,825
Итак, мы увидим это как часть второго упражнения в этом конкретном уроке.

151
00:10:00,825 --> 00:10:07,010
С этим быстрым пониманием HTTP клиента,

152
00:10:07,010 --> 00:10:11,335
мы теперь перейдем к упражнениям, где мы будем использовать

153
00:10:11,335 --> 00:10:17,795
Угловой HTTP-клиент, предоставляемый через модуль HTTP библиотеки Angular HTTP,

154
00:10:17,795 --> 00:10:22,740
, чтобы позволить нам общаться с нашим сервером.