1
00:00:03,630 --> 00:00:08,225
Come abbiamo già imparato nella lezione precedente,

2
00:00:08,225 --> 00:00:15,020
protocollo HTTP ci permette di comunicare tra un client e un server.

3
00:00:15,020 --> 00:00:19,770
Abbiamo visto alcuni dettagli sul protocollo HTTP già nella lezione precedente.

4
00:00:19,770 --> 00:00:25,440
In questa lezione, andremo a esplorare il supporto angolare per HTTP.

5
00:00:25,440 --> 00:00:29,810
Angular supporta HTTP tramite il client HTTP angolare.

6
00:00:29,810 --> 00:00:32,700
Vedremo come possiamo sfruttare

7
00:00:32,700 --> 00:00:36,725
il client HTTP angolare per la comunicazione client-server,

8
00:00:36,725 --> 00:00:38,925
nella nostra applicazione angolare.

9
00:00:38,925 --> 00:00:42,045
I due esercizi che seguono questa lezione,

10
00:00:42,045 --> 00:00:45,650
esploreremo l'uso pratico del

11
00:00:45,650 --> 00:00:49,660
client HTTP angolare all'interno della nostra applicazione Angular.

12
00:00:49,660 --> 00:00:56,020
Diamo un'occhiata a un po 'dei dettagli del client HTTP in questa lezione.

13
00:00:56,020 --> 00:00:58,415
Come ci aspettiamo,

14
00:00:58,415 --> 00:01:02,975
Angular sfrutta il protocollo HTTP per abilitare la comunicazione tra

15
00:01:02,975 --> 00:01:08,000
il nostro client Angular e il server basato su HTTP.

16
00:01:08,000 --> 00:01:11,820
La maggior parte dei browser moderni, in genere utilizzati per supportare

17
00:01:11,820 --> 00:01:17,820
XMLHttpRequest o il modo XHR di comunicare con il server.

18
00:01:17,820 --> 00:01:22,519
Sempre più spesso, i browser stanno adottando l'API Fetch,

19
00:01:22,519 --> 00:01:26,900
che è un sostituto moderno per XMLHttpRequest come

20
00:01:26,900 --> 00:01:32,225
un modo per fornire comunicazione tra il browser e il server.

21
00:01:32,225 --> 00:01:39,960
Angular sfrutta questo per comunicare con il server utilizzando il client HTTP.

22
00:01:39,960 --> 00:01:48,450
Vedremo l'uso del client HTTP e come possiamo usare HttpClientModule,

23
00:01:48,450 --> 00:01:52,425
all'interno della nostra applicazione angolare per abilitare la comunicazione client-server.

24
00:01:52,425 --> 00:01:56,150
Qualsiasi comunicazione tra il client e il server come ci aspettiamo,

25
00:01:56,150 --> 00:01:57,770
sarà di natura asincrona.

26
00:01:57,770 --> 00:02:00,410
Quindi, il che significa che il client

27
00:02:00,410 --> 00:02:03,470
deve attendere che i dati vengano consegnati dal sito del server.

28
00:02:03,470 --> 00:02:06,620
Di conseguenza, il client deve essere

29
00:02:06,620 --> 00:02:12,420
configurato per affrontare questo ritardo nell'ottenere i dati.

30
00:02:12,420 --> 00:02:16,295
Nel modulo precedente,

31
00:02:16,295 --> 00:02:19,910
avevamo già configurato le nostre applicazioni client per

32
00:02:19,910 --> 00:02:24,160
essere in grado di mostrare lo spinner di avanzamento sull'interfaccia utente,

33
00:02:24,160 --> 00:02:28,795
per mantenere l'utente informato sul fatto che c'è un ritardo nell'ottenere i dati,

34
00:02:28,795 --> 00:02:31,985
prima che la vista venga renderizzata.

35
00:02:31,985 --> 00:02:35,210
Questo ci viene in aiuto in questa lezione,

36
00:02:35,210 --> 00:02:42,880
dove ovviamente dobbiamo affrontare il ritardo per ottenere dati dal sito del server.

37
00:02:42,880 --> 00:02:47,000
L' accesso ai dati all'interno della nostra applicazione angolare,

38
00:02:47,000 --> 00:02:52,150
è sempre meglio delegare questa responsabilità al servizio.

39
00:02:52,150 --> 00:02:56,450
Quindi, lasciamo che il servizio si occupi dell'interazione con il server,

40
00:02:56,450 --> 00:03:02,795
e quindi il componente ottiene i dati chiamando i metodi del servizio.

41
00:03:02,795 --> 00:03:08,405
L' interazione del servizio componente che abbiamo già impostato nel modulo precedente.

42
00:03:08,405 --> 00:03:09,970
Quindi, tutto ciò che dobbiamo fare,

43
00:03:09,970 --> 00:03:16,700
è aggiornare i nostri servizi per sfruttare il modulo HTTP per comunicare con il server,

44
00:03:16,700 --> 00:03:20,060
per ottenere i dati dal server e poi, in seguito,

45
00:03:20,060 --> 00:03:22,635
fornire i dati al componente.

46
00:03:22,635 --> 00:03:26,645
Il server HTTP stesso,

47
00:03:26,645 --> 00:03:30,980
restituirà i dati al nostro client e il

48
00:03:30,980 --> 00:03:37,245
nostro modulo HTTP restituisce i dati al nostro servizio nel follow-up osservabile.

49
00:03:37,245 --> 00:03:40,010
Questo osservabile, sarà poi elaborato e

50
00:03:40,010 --> 00:03:43,030
poi restituito come osservabile al nostro componente.

51
00:03:43,030 --> 00:03:46,760
Quella parte che abbiamo già configurato nel modulo precedente.

52
00:03:46,760 --> 00:03:51,380
Quindi, lo sfrutteremo per consentirci di

53
00:03:51,380 --> 00:03:56,315
scivolare rapidamente la comunicazione HTTP tra il client e il server,

54
00:03:56,315 --> 00:04:00,145
tra il servizio e il sito del server,

55
00:04:00,145 --> 00:04:03,080
e quindi il resto dell'infrastruttura

56
00:04:03,080 --> 00:04:05,900
che è già in atto nella nostra applicazione Angular

57
00:04:05,900 --> 00:04:12,010
può facilmente gestire la consegna del osservabile al nostro componente,

58
00:04:12,010 --> 00:04:15,130
e la componente già sottoscritta a tale osservatore.

59
00:04:15,130 --> 00:04:18,200
L' effetto aggiuntivo che ci occuperemo

60
00:04:18,200 --> 00:04:21,040
è come gestire gli errori.

61
00:04:21,040 --> 00:04:25,340
Ne parleremo in modo un po 'più dettagliato nelle diapositive successive.

62
00:04:25,340 --> 00:04:27,625
Quindi, come ho già detto,

63
00:04:27,625 --> 00:04:30,850
il client HTTP restituisce un osservabile.

64
00:04:30,850 --> 00:04:33,845
Quindi, quando chiami il modulo HTTP,

65
00:04:33,845 --> 00:04:38,040
quindi imposterai il tuo servizio per fare uso del modulo HTTP,

66
00:04:38,040 --> 00:04:40,295
e con il modulo HTTP,

67
00:04:40,295 --> 00:04:46,290
ti fornisce diversi metodi che corrispondono ai

68
00:04:46,290 --> 00:04:49,800
verbi get, put, post ed eliminare il protocollo HTTP.

69
00:04:49,800 --> 00:04:50,870
Quindi, i

70
00:04:50,870 --> 00:04:54,960
metodi get, put, post e delete sono supportati automaticamente dal modulo HTTP.

71
00:04:54,960 --> 00:04:59,165
Quindi, si sfrutterà questi metodi per essere in grado di eseguire

72
00:04:59,165 --> 00:05:03,330
quelle particolari operazioni sul sito server.

73
00:05:03,330 --> 00:05:06,365
Quindi, quando si emette una chiamata HTTP get,

74
00:05:06,365 --> 00:05:11,000
si richiede che i dati vengano recapitati dal server al client.

75
00:05:11,000 --> 00:05:13,195
Il client HTTP, a sua volta,

76
00:05:13,195 --> 00:05:18,170
elaborerà l'osservabile che viene consegnato attraverso il modulo HTTP angolare,

77
00:05:18,170 --> 00:05:22,470
e quindi consegnerà tale osservabile al nostro componente.

78
00:05:22,470 --> 00:05:25,550
All' interno del nostro componente, ci sottoscriviamo già

79
00:05:25,550 --> 00:05:28,340
all'osservabile che viene fornito dal nostro servizio,

80
00:05:28,340 --> 00:05:32,580
e quindi gestire i dati che vengono inviati attraverso l'osservabile,

81
00:05:32,580 --> 00:05:35,500
è abbastanza semplice per noi.

82
00:05:35,500 --> 00:05:38,900
Se l'applicazione Angular

83
00:05:38,900 --> 00:05:43,705
comunica con un server che restituisce la risposta in formato JSON,

84
00:05:43,705 --> 00:05:47,280
i client HTTP Angular ottengono metodo stesso

85
00:05:47,280 --> 00:05:51,750
analizza la risposta JSON del server in un oggetto anonimo.

86
00:05:51,750 --> 00:05:58,070
Il cliente stesso, non sa esattamente come interpretare la forma di questo oggetto.

87
00:05:58,070 --> 00:06:04,220
Quindi, possiamo aiutare il client HTTP specificando la forma dell'oggetto,

88
00:06:04,220 --> 00:06:10,170
specificando una dichiarazione di una classe JavaScript,

89
00:06:10,170 --> 00:06:13,520
che specifica la forma dell'oggetto in modo che l'output

90
00:06:13,520 --> 00:06:17,025
dal get possa essere consumato facilmente dall'applicazione.

91
00:06:17,025 --> 00:06:19,330
Quindi, nell'esercizio,

92
00:06:19,330 --> 00:06:20,500
mi vedrai dichiarare.

93
00:06:20,500 --> 00:06:23,560
Ad esempio, diremo questo.http.get,

94
00:06:23,560 --> 00:06:27,695
e poi tra parentesi angolari,

95
00:06:27,695 --> 00:06:29,940
specifico piatto lì.

96
00:06:29,940 --> 00:06:31,555
Quindi, in questo modo,

97
00:06:31,555 --> 00:06:37,400
i dati in arrivo per la richiesta get dal sito server verranno convertiti in

98
00:06:37,400 --> 00:06:41,660
un oggetto piatto e quindi possono essere consumati immediatamente

99
00:06:41,660 --> 00:06:47,185
dal mio componente quando sta disponendo il contenuto.

100
00:06:47,185 --> 00:06:48,990
Ora, se necessario,

101
00:06:48,990 --> 00:06:54,315
è possibile ottenere l'accesso alla risposta completa proveniente dal sito del server.

102
00:06:54,315 --> 00:06:57,810
Ma ciò sarebbe solo in circostanze specifiche,

103
00:06:57,810 --> 00:07:00,320
in cui è necessario accedere, ad esempio, alle

104
00:07:00,320 --> 00:07:05,820
intestazioni del messaggio di risposta HTTP in arrivo e così via.

105
00:07:05,820 --> 00:07:08,300
Ma per la maggior parte degli scopi,

106
00:07:08,300 --> 00:07:11,380
semplicemente dichiarando la forma dell'oggetto,

107
00:07:11,380 --> 00:07:16,100
possiamo facilmente ottenere i dati JSON analizzati automaticamente in un modo

108
00:07:16,100 --> 00:07:21,410
che può essere consumato dalla nostra applicazione Angular più facilmente.

109
00:07:21,410 --> 00:07:24,140
Come ci aspettiamo,

110
00:07:24,140 --> 00:07:27,845
la comunicazione tra il client e il server non sarà priva di errori.

111
00:07:27,845 --> 00:07:32,060
Gli errori stanno andando a comparire per molti motivi diversi.

112
00:07:32,060 --> 00:07:36,740
Potrebbe essere che la connessione non venga stabilita tra il client e il server,

113
00:07:36,740 --> 00:07:40,130
potrebbe essere il fatto che la risposta dal server si perda,

114
00:07:40,130 --> 00:07:47,660
potrebbe essere il fatto che il server non è in grado di trovare i dati che stai cercando,

115
00:07:47,660 --> 00:07:54,005
e quindi restituisce un 404 che indica che il server

116
00:07:54,005 --> 00:08:00,515
è non è in grado di fornire i dati per l'utente o i dati mancanti sul sito server e così via.

117
00:08:00,515 --> 00:08:04,070
Quindi, il tuo cliente deve affrontare tutti questi errori.

118
00:08:04,070 --> 00:08:05,745
Quindi, all'interno del nostro servizio,

119
00:08:05,745 --> 00:08:09,200
stiamo andando a configurare il nostro servizio per essere in grado di rilevare questo errore.

120
00:08:09,200 --> 00:08:13,935
Quindi, questo è dove l'uso del metodo catch supportato dall'HTTP,

121
00:08:13,935 --> 00:08:17,870
ci consente di rilevare l'errore, elaborare quell'errore

122
00:08:17,870 --> 00:08:21,745
e quindi inviare il messaggio di errore al nostro componente,

123
00:08:21,745 --> 00:08:24,920
e quindi lasciare che il componente si occupi del messaggio di errore in

124
00:08:24,920 --> 00:08:28,340
qualsiasi modo sembrava appropriato.

125
00:08:28,340 --> 00:08:30,485
Ora, all'interno del nostro componente, per esempio,

126
00:08:30,485 --> 00:08:33,530
mostreremo le informazioni di errore che abbiamo

127
00:08:33,530 --> 00:08:36,980
ottenuto a nostro avviso per indicare all'utente,

128
00:08:36,980 --> 00:08:40,755
che si è verificato un errore nell'ottenere i dati dal sito server.

129
00:08:40,755 --> 00:08:43,210
Quindi, all'interno del servizio,

130
00:08:43,210 --> 00:08:45,015
dobbiamo elaborare questo errore.

131
00:08:45,015 --> 00:08:48,710
Ora, quando queste informazioni di errore ottenute dal

132
00:08:48,710 --> 00:08:52,615
sito del server tramite il client HTTP vengono elaborate all'interno del nostro servizio,

133
00:08:52,615 --> 00:08:54,815
allora lo convertiremo in una stringa,

134
00:08:54,815 --> 00:08:59,905
e quella stringa verrà passata al nostro componente utilizzando il metodo di lancio osservabile.

135
00:08:59,905 --> 00:09:02,785
Quindi, il metodo throw ci permette di lanciare un errore.

136
00:09:02,785 --> 00:09:05,770
Quindi perché nel nostro componente ci

137
00:09:05,770 --> 00:09:08,770
sottoscriviamo a questo osservabile all'interno del metodo di sottoscrizione,

138
00:09:08,770 --> 00:09:10,520
allora è necessario affrontare l'errore.

139
00:09:10,520 --> 00:09:12,505
Quindi, nella parte di sottoscrizione, in

140
00:09:12,505 --> 00:09:17,120
precedenza abbiamo visto solo una funzione specificata per la sottoscrizione,

141
00:09:17,120 --> 00:09:19,820
e che si occupa del normale funzionamento.

142
00:09:19,820 --> 00:09:21,490
Ma insieme a questo,

143
00:09:21,490 --> 00:09:27,270
possiamo anche fornire una seconda funzione a cui verrà consegnato l'errore.

144
00:09:27,270 --> 00:09:32,450
Quindi, mi vedrai configurare la parte di sottoscrizione del mio componente

145
00:09:32,450 --> 00:09:38,480
usando una seconda funzione specificata all'interno del metodo di sottoscrizione lì,

146
00:09:38,480 --> 00:09:44,475
come esempio illustrato da questo codice qui.

147
00:09:44,475 --> 00:09:47,780
In questo modo, l'errore verrà rilevato all'interno

148
00:09:47,780 --> 00:09:50,890
del mio componente e quindi messaggio di errore appropriato,

149
00:09:50,890 --> 00:09:54,380
le informazioni verranno recapitate all'utente all'interno della vista.

150
00:09:54,380 --> 00:10:00,825
Quindi, vedremo che come parte del secondo esercizio in questa particolare lezione.

151
00:10:00,825 --> 00:10:07,010
Con questa rapida comprensione del client HTTP,

152
00:10:07,010 --> 00:10:11,335
passeremo ora agli esercizi in cui impiegheremo

153
00:10:11,335 --> 00:10:17,795
il client HTTP angolare fornito attraverso il modulo HTTP della libreria HTTP angolare,

154
00:10:17,795 --> 00:10:22,740
per permetterci di comunicare con il nostro server.