[MUSIC]
La comunicazione tra client e server non è mai un affare fatto.
Per parafrasare un famoso proverbio,
c'è molta faretra tra il client e il server.
Quindi, come affrontiamo gli errori quando si presentano,
quando stiamo comunicando tra il client e il server?
Parliamo di questo in questo esercizio.
Quando il server genera una risposta, o il client HTTP,
durante la comunicazione con il server, rileva un errore e quindi genera
una risposta di errore, questa viene fornita sotto forma di risposta di errore HTTP.
Ora, questa risposta, vogliamo essere in grado di elaborarlo e
poi trasformarlo in una stringa di messaggio di risposta, che
può essere consegnato al client in modo che il client possa visualizzare questo sullo schermo.
Quindi, per permetterci di farlo,
creeremo un nuovo servizio chiamato messaggio HTTP processo in questo, questa è cartella.
Quindi, per farlo, al prompt digitare ng,
g service services/ProcessHttpMSG
e generare il servizio ProcessHttpMsg.
Ora, una volta generato il servizio, andremo avanti e
aggiungerlo nel modulo app.
E poi aggiungeremo un metodo al servizio ProcessHttpMsg.
Ora che abbiamo creato il servizio ProcessHttpMsg,
andiamo avanti e poi aggiungere che nel file app.module.ts.
Quindi, andando al file app.module.ts,
lasciami importare il servizio ProcessHttpMsg,
From '. /services/process-httpmsg.service '.
Quindi una volta che viene importato, allora saremo in grado di usarlo nella nostra applicazione.
Quindi andiamo avanti e aggiungilo ai nostri fornitori.
Quindi, andando nei nostri fornitori,
lasciami aggiungere il ProcessHttpMsgService nei provider.
La prima cosa che faremo è includere un nuovo metodo
nel ProcessHttpMsgService chiamato handle error,
che si occuperà di gestire gli errori quando si presentano.
E poi faremo uso di loro nei servizi in cui accediamo al server.
Per iniziare, cerchiamo prima di importare,
throwError da, rxjs,
e questo ci aiuta a gettare errore ogni volta che si verifica.
E poi importiamo HttperRorResponse da,
angular/common/http.
Poi inizieremo a progettare metodo HandleError, e
questo richiede, come parametro, un errore che potrebbe essere una risposta,
che è una risposta di errore dal server,
o qualsiasi altro motivo che l'errore si verifica.
Quindi all'interno di questo metodo HandleError, cosa dovremmo fare?
Proviamo a costruire un messaggio che riassume di cosa si tratta l'errore.
Quindi includeremo una nuova variabile stringa qui.
Se error.error è un'istanza
di ErrorEvent, quindi se si tratta di un evento di errore che si verifica,
allora error.error.message conterrà informazioni.
Quindi imposteremo il messaggio di errore su
error.error.message.
Se questo non è il caso, significa che questo proviene dal lato server,
e quindi in tal caso, il messaggio di errore viene costruito dicendo uguale a backquotes,
nota le backquotes qui, e poi $ {error.status}.
Quindi stiamo estraendo le informazioni sullo stato da lì.
E poi, - error.StatusText,
se StatusText esiste, o
quella sarà una stringa vuota lì.
E poi includeremo anche l'error.error stesso,
l'oggetto errore completo stesso, proprio lì nella stringa.
E poi usalo come nostro messaggio di errore.
Ora, una volta che abbiamo il messaggio di errore,
allora saremo in grado di utilizzare ThrowError per
restituire un errore osservabile alla nostra applicazione.
Quindi ciò significa che questo sta lanciando un errore a questo punto,
con il messaggio di errore incluso lì.
Quindi questa stringa di messaggio di errore è costruita sulla base delle informazioni
che otteniamo qui, sia perché il lato server ha risposto con un errore o
l'errore potrebbe essere da altri motivi.
Quindi, in entrambi i casi, costruiremo un messaggio di errore e poi lo restituiremo.
Ora, dove facciamo uso di questo errore di handle?
Ora, all'interno dei nostri servizi, ad esempio il file dishservice.ts,
abbiamo visto che in precedenza, quando abbiamo detto questo HTTP ottenere, e poi abbiamo appena detto mappa,
e poi ipotizzato che la risposta è sempre una risposta positiva.
Ma supponiamo che la loro risposta non
sia positiva, e quindi restituisce un errore, quindi dobbiamo rilevare quell'errore.
Per aiutarci con questo, importiamo l'operatore CatchError da rxjs,
e quindi importiamo anche il ProcessHttpMsgService
che abbiamo appena creato in precedenza nel
nostro servizio piatto in modo che possiamo usare il metodo di errore handle da lì.
Quindi importiamo questo da. /process-httpmsg.service.
E poi, scendendo al costruttore,
ora iniettiamo il servizio di messaggi HTTP processo
nel costruttore, insieme al client HTTP. In
modo che possiamo fare uso di questo servizio,
in particolare il metodo di errore handle del servizio per gestire gli errori
che vengono restituiti dal nostro client HTTP lì.
Ora, una volta che abbiamo configurato il costruttore,
quindi per gestire l'errore nel metodo GetDiches per
esempio, ci reindirizzare al metodo CatchErrors.
E quindi chiamare il metodo HandleError dopo
questo.ProcessHttpMsgService all'interno del metodo CatchError.
Quindi in questo modo Quando il client HTTP restituisce un errore, questo verrà elaborato e
verrà estratto il messaggio di errore appropriato.
E poi finirà per lanciare l'errore attraverso
il metodo HandleError a quel punto.
Allo stesso modo, facciamo lo stesso con i
metodi GetDish e GetFeatureDish anche.
Ora, quando si tratta del metodo GetDish id,
dal momento che il metodo GetDish ids sta facendo uso del metodo getDishes,.
Quindi non abbiamo bisogno di chiamare esplicitamente HandleError perché se si verifica un errore,
il metodo GetDiches avrà già convertito quell'errore in una stringa di errore.
Quindi abbiamo solo bisogno di catturare l'errore e quindi restituire l'errore da GetDish Ids.
Normalmente, non saremmo nemmeno arrivati a questo punto se si verifica un errore, perché
il metodo GetDiches avrebbe gestito l'errore in modo appropriato a quel punto.
Quindi, una volta configurato il servizio piatto in modo appropriato,
allora saremo in grado di utilizzare il
metodo CatchError per affrontare gli errori che si presentano.
Ora che abbiamo aggiornato il nostro servizio per essere in grado di gestire gli errori.
Come gestiamo questo all'interno del nostro componente stessi?
Quindi all'interno di un componente, quindi per esempio, quando andiamo al componente menu.
Quello che ci rendiamo conto è che quando facciamo l'abbonamento,
ci aspettavamo che i piatti ci fossero consegnati.
Ora, è possibile che l'istruzione dei piatti,
l'errore sarà consegnato dal lancio osservabile e
quindi che si traduce nel messaggio di errore essere a nostra disposizione.
Quindi, per affrontare questa situazione, introdurrò una nuova
variabile chiamata errMess nel componente del menu che è di tipo stringa.
E poi il metodo di sottoscrizione stesso fornisce un modo per gestire gli errori.
Quindi il metodo di sottoscrizione, in questo momento abbiamo specificato solo una funzione qui.
Possiamo anche specificare una seconda funzione che
verrà chiamata quando il risultato dell'errore.
Quindi, in questo caso, posso fornire una seconda funzione di errore che dice,
errMess, che è il valore restituito
quando il lancio osservabile viene eseguito dal DishService.
Quindi in questo caso, direi this.errMess = errMess, e il gioco è fatto.
Quindi qui quello che succede è che quando l'osservabile
viene restituito da DishService è un valore,
allora sarebbe gestito dalla prima parte.
Se l'osservabile viene restituito con il lancio osservabile,
questa funzione verrà eseguita.
E in questa funzione, stiamo prendendo il messaggio di errore e
quindi catturando quel messaggio di errore in questa stringa ErrMess che abbiamo qui.
Così ora abbiamo il messaggio di errore a nostra disposizione, in modo da
poter visualizzare questo messaggio di errore sulla vista di questo componente di menu.
Quindi, come lo visualizziamo nella vista dei componenti del menu?
Così andando al file modello componenti del menu, qui vediamo che se i piatti non è nullo,
allora stiamo visualizzando il menu con tutti i piatti.
Se piatti è nullo allora questo filatore viene visualizzato lì.
Ora, aggiungeremo un altro qui,
anche se l'ErrMess che abbiamo,
la variabile, non è nullo, allora anche
lo spinner dovrebbe essere nascosto e poi,
infine, aggiungere un altro div con un NGIF.
Quindi ciò che fa è che quest'ultima immersione verrà visualizzata nel
caso in cui ci sia un errore, e il messaggio di errore.
La stringa ErrMess è impostata sul messaggio di errore.
Quindi, in tal caso, diremo semplicemente errore h2,
e poi ho intenzione di visualizzare quella stringa come,
Una stringa all'interno della vista lì, è tutto.
Puoi fare un modo più elaborato di visualizzare il messaggio di errore se lo
desideri.
Ma tutto ciò che ho intenzione di fare è se c'è un errore,
mostrerò semplicemente un errore sullo schermo e quindi visualizzerò un ErrMess.
Puoi anche modellarlo cambiando il colore in rosso e
così via, ma lo lascerò lì così.
Quindi, con questo, finiremo per visualizzare il messaggio di errore nella vista qui.
La stessa procedura può essere utilizzata anche con il componente piatto e
anche con il componente di casa a cui si accede al servizio di piatti.
Quindi, andando al componente piatto, sto andando a fare esattamente la stessa cosa,
quindi all'interno del componente piatto includerò il, ErrMess qui.
E poi proprio qui all'interno della sottoscrizione,
questo è dove stiamo ricevendo il valore del piatto.
Quindi la prima parte,
ciò che abbiamo già incluso verrà chiamato se l'osservabile restituisce un valore.
Ma se non restituisce un valore, allora abbiamo bisogno di gestire il messaggio di errore.
E useremo esattamente la stessa
funzione messaggio di errore che abbiamo definito in precedenza nel componente menu.
Quindi, diremo che this.errMess
= Ermess qui.
Questo è tutto, quindi il mio componente piatto è ora aggiornato.
Quindi ho bisogno di aggiornare il file modello del componente piatto.
Quindi, andando al file modello,
vediamo che stiamo andando a visualizzare il piatto se piatto non è nullo.
E poi qui sotto, ci occuperemo della situazione
in cui mostreremo allo spinner se il piatto è nullo.
Quindi lasciami aggiungere anche, se il messaggio di errore non è nullo, allora
dovrei mostrare il messaggio di errore piuttosto che il piatto qui, giusto?
Quindi, lasciami andare avanti e
copiare il codice dal componente del menu.
Userò esattamente lo stesso codice
anche per il file modello dei componenti di dettaglio del piatto.
Quindi, proprio li'.
Lasciami andare avanti e inserire quel codice qui.
Quindi vediamo che se ErrMess non è nullo,
allora questo errore verrà visualizzato nella vista lì.
Ora stessa cosa,
andando al componente di casa abbiamo bisogno di passare attraverso la stessa procedura.
Ora, all'interno della componente di casa, naturalmente, abbiamo piatto, promozione e leader.
Quindi definirò stringhe separate per
ognuna di esse perché l'errore potrebbe derivare da uno qualsiasi dei tre.
In questo momento abbiamo a che fare con il piatto che viene prelevato dal lato server.
I restanti due mi aspetterò che tu lo faccia come parte del compito finale.
Quindi diremo, dirò stringa errmess piatto e poi scenderemo nel codice qui.
E nel codice qui,
diremo semplicemente errmess.
Questo errore piatto = qualsiasi
errore, il gioco è fatto.
E allo stesso modo, aggiorna i file di modello dei componenti di casa.
E andando al file modello componenti di casa,
vediamo che abbiamo il cestino piatto visualizzato lì,
quindi ora per questo dovrei dire o piatto ErrMess.
E poi, qui sotto, includerò il codice
che ho copiato dal componente del menu, e
poi lo aggiorno al piatto ErrMess qui.
E anche, aggiorna questo a DisherrMess qui, è tutto.
Salviamo le modifiche.
Andando al browser, vedi che tutto funziona proprio come prima.
La casa, il componente menu e anche il componente dettaglio piatto senza alcun problema.
Ora la domanda è, come facciamo a causare errori?
Per causare errori, un modo possibile per affrontare il problema è andare a
cercare un'informazione inesistente dal server.
Lasciami andare al servizio piatto e poi causare
il mio primo problema nel DishService qui.
Quindi, per il piatto in primo piano invece di piatti, lasciami fare un errore e
dire piatti e poi salvare il resto.
Ovviamente questo significa che questo url non esiste.
Quindi, cosa succederà se accede al server?
Andando al browser quando ora scorriamo,
vedi che il piatto non viene visualizzato qui.
Dice qui Errore 404 Non trovato.
Questo perché stiamo cercando di accedere alle informazioni del piatto presso
gli URL dishees che non esiste sul lato server.
Quindi vedi come viene visualizzato il messaggio di errore qui.
Ovviamente, puoi essere un po 'più elegante e fare più lavoro su questo e
quindi visualizzare il messaggio di errore in un modo più significativo.
Ma il principio di base è evidenziato qui dicendo che è
possibile mostrare un messaggio di errore se qualcosa non viene eseguito correttamente
quando si tenta di accedere alle informazioni dal lato server.
Certo, quindi questo è un errore creato artificialmente nella mia applicazione.
Per causare un altro tipo di errore, sono andato alla mia finestra del terminale e
poi spento il server per vedere cosa farà la mia applicazione Angular in questo caso.
Quindi, dopo aver arrestato il server,
vediamo cosa visualizzerà il componente home nella sua vista.
Quindi, andando al componente home, ora vediamo che poiché la mia
applicazione Angular non è in grado di accedere al server, ha causato di nuovo un errore.
E poi mostra questa stringa lì per indicare che si è verificato un errore.
Naturalmente, questa è una stringa criptica,
non trasmette nulla di significativo su quale sia la fonte dell'errore.
Ma questo è tutto ciò che potremmo ottenere cercando di accedere al server in questa applicazione.
Stessa cosa, se vado al menu, vedrai lo stesso tipo di cosa che viene
visualizzato, perché il server non è disponibile, e quindi
le informazioni sui piatti non possono essere recuperate dal server.
Con questo completiamo questo esercizio.
In questo esercizio, abbiamo imparato come gestire gli
errori che si verificano durante la comunicazione del server client nella nostra applicazione Angular.
Questo è un buon momento per fare un commit git con il messaggio http parte due.
[ MUSIC]