Come abbiamo già imparato nella lezione precedente,
protocollo HTTP ci permette di comunicare tra un client e un server.
Abbiamo visto alcuni dettagli sul protocollo HTTP già nella lezione precedente.
In questa lezione, andremo a esplorare il supporto angolare per HTTP.
Angular supporta HTTP tramite il client HTTP angolare.
Vedremo come possiamo sfruttare
il client HTTP angolare per la comunicazione client-server,
nella nostra applicazione angolare.
I due esercizi che seguono questa lezione,
esploreremo l'uso pratico del
client HTTP angolare all'interno della nostra applicazione Angular.
Diamo un'occhiata a un po 'dei dettagli del client HTTP in questa lezione.
Come ci aspettiamo,
Angular sfrutta il protocollo HTTP per abilitare la comunicazione tra
il nostro client Angular e il server basato su HTTP.
La maggior parte dei browser moderni, in genere utilizzati per supportare
XMLHttpRequest o il modo XHR di comunicare con il server.
Sempre più spesso, i browser stanno adottando l'API Fetch,
che è un sostituto moderno per XMLHttpRequest come
un modo per fornire comunicazione tra il browser e il server.
Angular sfrutta questo per comunicare con il server utilizzando il client HTTP.
Vedremo l'uso del client HTTP e come possiamo usare HttpClientModule,
all'interno della nostra applicazione angolare per abilitare la comunicazione client-server.
Qualsiasi comunicazione tra il client e il server come ci aspettiamo,
sarà di natura asincrona.
Quindi, il che significa che il client
deve attendere che i dati vengano consegnati dal sito del server.
Di conseguenza, il client deve essere
configurato per affrontare questo ritardo nell'ottenere i dati.
Nel modulo precedente,
avevamo già configurato le nostre applicazioni client per
essere in grado di mostrare lo spinner di avanzamento sull'interfaccia utente,
per mantenere l'utente informato sul fatto che c'è un ritardo nell'ottenere i dati,
prima che la vista venga renderizzata.
Questo ci viene in aiuto in questa lezione,
dove ovviamente dobbiamo affrontare il ritardo per ottenere dati dal sito del server.
L' accesso ai dati all'interno della nostra applicazione angolare,
è sempre meglio delegare questa responsabilità al servizio.
Quindi, lasciamo che il servizio si occupi dell'interazione con il server,
e quindi il componente ottiene i dati chiamando i metodi del servizio.
L' interazione del servizio componente che abbiamo già impostato nel modulo precedente.
Quindi, tutto ciò che dobbiamo fare,
è aggiornare i nostri servizi per sfruttare il modulo HTTP per comunicare con il server,
per ottenere i dati dal server e poi, in seguito,
fornire i dati al componente.
Il server HTTP stesso,
restituirà i dati al nostro client e il
nostro modulo HTTP restituisce i dati al nostro servizio nel follow-up osservabile.
Questo osservabile, sarà poi elaborato e
poi restituito come osservabile al nostro componente.
Quella parte che abbiamo già configurato nel modulo precedente.
Quindi, lo sfrutteremo per consentirci di
scivolare rapidamente la comunicazione HTTP tra il client e il server,
tra il servizio e il sito del server,
e quindi il resto dell'infrastruttura
che è già in atto nella nostra applicazione Angular
può facilmente gestire la consegna del osservabile al nostro componente,
e la componente già sottoscritta a tale osservatore.
L' effetto aggiuntivo che ci occuperemo
è come gestire gli errori.
Ne parleremo in modo un po 'più dettagliato nelle diapositive successive.
Quindi, come ho già detto,
il client HTTP restituisce un osservabile.
Quindi, quando chiami il modulo HTTP,
quindi imposterai il tuo servizio per fare uso del modulo HTTP,
e con il modulo HTTP,
ti fornisce diversi metodi che corrispondono ai
verbi get, put, post ed eliminare il protocollo HTTP.
Quindi, i
metodi get, put, post e delete sono supportati automaticamente dal modulo HTTP.
Quindi, si sfrutterà questi metodi per essere in grado di eseguire
quelle particolari operazioni sul sito server.
Quindi, quando si emette una chiamata HTTP get,
si richiede che i dati vengano recapitati dal server al client.
Il client HTTP, a sua volta,
elaborerà l'osservabile che viene consegnato attraverso il modulo HTTP angolare,
e quindi consegnerà tale osservabile al nostro componente.
All' interno del nostro componente, ci sottoscriviamo già
all'osservabile che viene fornito dal nostro servizio,
e quindi gestire i dati che vengono inviati attraverso l'osservabile,
è abbastanza semplice per noi.
Se l'applicazione Angular
comunica con un server che restituisce la risposta in formato JSON,
i client HTTP Angular ottengono metodo stesso
analizza la risposta JSON del server in un oggetto anonimo.
Il cliente stesso, non sa esattamente come interpretare la forma di questo oggetto.
Quindi, possiamo aiutare il client HTTP specificando la forma dell'oggetto,
specificando una dichiarazione di una classe JavaScript,
che specifica la forma dell'oggetto in modo che l'output
dal get possa essere consumato facilmente dall'applicazione.
Quindi, nell'esercizio,
mi vedrai dichiarare.
Ad esempio, diremo questo.http.get,
e poi tra parentesi angolari,
specifico piatto lì.
Quindi, in questo modo,
i dati in arrivo per la richiesta get dal sito server verranno convertiti in
un oggetto piatto e quindi possono essere consumati immediatamente
dal mio componente quando sta disponendo il contenuto.
Ora, se necessario,
è possibile ottenere l'accesso alla risposta completa proveniente dal sito del server.
Ma ciò sarebbe solo in circostanze specifiche,
in cui è necessario accedere, ad esempio, alle
intestazioni del messaggio di risposta HTTP in arrivo e così via.
Ma per la maggior parte degli scopi,
semplicemente dichiarando la forma dell'oggetto,
possiamo facilmente ottenere i dati JSON analizzati automaticamente in un modo
che può essere consumato dalla nostra applicazione Angular più facilmente.
Come ci aspettiamo,
la comunicazione tra il client e il server non sarà priva di errori.
Gli errori stanno andando a comparire per molti motivi diversi.
Potrebbe essere che la connessione non venga stabilita tra il client e il server,
potrebbe essere il fatto che la risposta dal server si perda,
potrebbe essere il fatto che il server non è in grado di trovare i dati che stai cercando,
e quindi restituisce un 404 che indica che il server
è non è in grado di fornire i dati per l'utente o i dati mancanti sul sito server e così via.
Quindi, il tuo cliente deve affrontare tutti questi errori.
Quindi, all'interno del nostro servizio,
stiamo andando a configurare il nostro servizio per essere in grado di rilevare questo errore.
Quindi, questo è dove l'uso del metodo catch supportato dall'HTTP,
ci consente di rilevare l'errore, elaborare quell'errore
e quindi inviare il messaggio di errore al nostro componente,
e quindi lasciare che il componente si occupi del messaggio di errore in
qualsiasi modo sembrava appropriato.
Ora, all'interno del nostro componente, per esempio,
mostreremo le informazioni di errore che abbiamo
ottenuto a nostro avviso per indicare all'utente,
che si è verificato un errore nell'ottenere i dati dal sito server.
Quindi, all'interno del servizio,
dobbiamo elaborare questo errore.
Ora, quando queste informazioni di errore ottenute dal
sito del server tramite il client HTTP vengono elaborate all'interno del nostro servizio,
allora lo convertiremo in una stringa,
e quella stringa verrà passata al nostro componente utilizzando il metodo di lancio osservabile.
Quindi, il metodo throw ci permette di lanciare un errore.
Quindi perché nel nostro componente ci
sottoscriviamo a questo osservabile all'interno del metodo di sottoscrizione,
allora è necessario affrontare l'errore.
Quindi, nella parte di sottoscrizione, in
precedenza abbiamo visto solo una funzione specificata per la sottoscrizione,
e che si occupa del normale funzionamento.
Ma insieme a questo,
possiamo anche fornire una seconda funzione a cui verrà consegnato l'errore.
Quindi, mi vedrai configurare la parte di sottoscrizione del mio componente
usando una seconda funzione specificata all'interno del metodo di sottoscrizione lì,
come esempio illustrato da questo codice qui.
In questo modo, l'errore verrà rilevato all'interno
del mio componente e quindi messaggio di errore appropriato,
le informazioni verranno recapitate all'utente all'interno della vista.
Quindi, vedremo che come parte del secondo esercizio in questa particolare lezione.
Con questa rapida comprensione del client HTTP,
passeremo ora agli esercizi in cui impiegheremo
il client HTTP angolare fornito attraverso il modulo HTTP della libreria HTTP angolare,
per permetterci di comunicare con il nostro server.