[MUSIC]
La comunicación entre el cliente y el servidor nunca es un trato hecho.
Parafraseando un famoso proverbio,
hay muchos alcaj entre el cliente y el servidor.
Entonces, ¿cómo tratamos los errores cuando surgen,
cuando nos estamos comunicando entre el cliente y el servidor?
Hablemos de eso en este ejercicio.
Cuando el servidor genera una respuesta, o el cliente HTTP,
mientras se comunica con el servidor, encuentra un error y, a continuación, genera
una respuesta de error, esto se entrega en forma de respuesta de error HTTP.
Ahora, esta respuesta, queremos poder procesarla y
luego convertirla en una cadena de mensaje de respuesta, que
se puede entregar al cliente para que el cliente pueda mostrar esto en la pantalla.
Así que para permitirnos hacer eso,
vamos a crear un nuevo servicio llamado proceso HTTP mensaje en este, esto es carpeta.
Así que para hacer eso, en el prompt escriba ng,
g service services/processhttpMsg,
y genere el servicio processhttpMsg.
Ahora, una vez que se genere el servicio, continuaremos y
lo agregaremos al módulo de la aplicación.
Y luego agregaremos un método al servicio ProcessHTTPMsg.
Ahora que hemos creado el servicio ProcessHTTPMSG,
vamos a seguir adelante y luego agregar eso en el archivo app.module.ts.
Así que yendo al archivo app.module.ts,
déjame importar el servicio ProcessHTTPMSG,
From './services/process-httpmsg.service '.
Así que una vez que se importa, entonces podremos usarlo en nuestra aplicación.
Así que sigamos adelante y añadamos eso a nuestros proveedores.
Así que entrando en nuestros proveedores,
permítanme agregar en ProcessHTTPMsgService a los proveedores.
Lo primero que haremos es incluir un nuevo método en
el processhttpMsgService llamado handle errors,
que se encargará de manejar errores cuando surjan.
Y luego haremos uso de ellos en los servicios donde accedemos al servidor.
Para empezar, primero importemos,
throwError from, rxjs,
y esto nos ayuda a arrojar errores cada vez que surge.
Y luego importamos HttpErrorResponse desde,
angular/common/http.
Entonces comenzaremos a diseñar el método HandleError, y
esto toma, como parámetro, un error que podría ser una respuesta,
que es una respuesta de error del servidor,
o cualquier otra razón por la que se produzca el error.
Entonces, dentro de este método HandleError, ¿qué se supone que debemos hacer?
Tratemos de construir un mensaje que resume de qué se trata el error.
Así que incluiremos una nueva variable de cadena aquí.
Si error.error es una instancia
de ErrorEvent, por lo que si se trata de un evento de error que se produce,
, error.message contendrá información.
Así que vamos a establecer el mensaje de error en
error.message.
Si ese no es el caso, entonces eso significa que esto viene del lado del servidor,
y así en ese caso, el mensaje de error se construye diciendo igual a comillas atrás,
anote las comillas atrás aquí, y luego ${error.status}.
Así que estamos extrayendo la información de estado de allí.
Y luego, - error.statusText,
si el StatusText existe, o
que será una cadena vacía allí.
Y luego también incluiremos el error.error en sí,
el objeto de error completo en sí, justo allí en la cadena.
Y luego usar eso como nuestro mensaje de error.
Ahora, una vez que tengamos el mensaje de error,
entonces podremos usar el throwError para
devolver un error observable a nuestra aplicación.
Así que lo que esto significa es que esto está lanzando un error en este punto,
con el mensaje de error incluido allí.
Así que esta cadena de mensaje de error se construye en base a la información
que obtenemos aquí, ya sea porque el lado del servidor respondió con un error o
el error podría deberse a otras razones.
Así que en cualquier caso, construiremos un mensaje de error y luego lo devolveremos.
Ahora, ¿dónde hacemos uso de este error de manejador?
Ahora, dentro de nuestros servicios, por ejemplo el archivo dishservice.ts,
vimos que antes cuando dijimos este HTTP get, y luego simplemente dijimos mapa,
y luego asumimos que la respuesta es siempre una respuesta positiva.
Pero supongamos que su respuesta no es positiva, y
luego devuelve un error, entonces tenemos que detectar ese error.
Para ayudarnos con esto, importamos el operador CatchError de rxjs,
y luego también importamos el ProcessHTTPMsgService
que acabamos de crear anteriormente en
nuestro servicio dish para que podamos usar el método de error handle desde allí.
Así que importamos esto desde el./process-httpmsg.service.
Y luego, bajando al constructor,
ahora inyectamos el servicio de mensajes HTTP de proceso
en el constructor, junto con el cliente HTTP.
Para que podamos hacer uso de este servicio,
especialmente el método de error handle del servicio para manejar los errores
que son devueltos por nuestro cliente HTTP allí.
Ahora, una vez que hayamos configurado el constructor,
a continuación, para manejar el error en el método GetDerrs para
ejemplo, vamos a canalizar al método CatchErrors.
Y luego llame al método HandleError después de
this.processhttpMsgService dentro del método CatchError.
Así que de esta manera Cuando el cliente HTTP devuelve un error, esto se procesará y
se extraerá el mensaje de error apropiado.
Y luego terminará arrojando el error a través de
el método HandleError en ese punto.
Del mismo modo, hagamos lo mismo con los métodos getDish y
los getFeatureDish también.
Ahora, cuando se trata del método getDish ids,
ya que el método getDish ids está haciendo uso del método getDish,.
Así que no necesitamos llamar explícitamente al HandleError porque si surge algún error
, el método GetDerres ya habrá convertido ese error en una cadena de error.
Así que solo necesitamos detectar el error y luego devolver el error de GetDish Ids.
Normalmente, ni siquiera llegaríamos a este punto si surge un error, porque
el método GetDRIESS habría manejado el error apropiadamente en ese punto.
Así que una vez que hayamos configurado correctamente el servicio de platos,
entonces podremos hacer uso del método catchError
para tratar los errores que se produzcan.
Ahora que hemos actualizado nuestro servicio para poder hacer frente a errores.
¿Cómo manejamos esto dentro de nuestro propio componente?
Así que dentro de un componente, por ejemplo, cuando vamos al componente de menú.
Lo que nos damos cuenta es que cuando hacemos la suscripción,
esperábamos que los platos fueran entregados a nosotros.
Ahora, es posible que la instrucción de los platos,
el error será entregado por el lanzamiento observable y
entonces resulta en que el mensaje de error esté disponible para nosotros.
Entonces, para lidiar con esa situación, introduciré una nueva variable
llamada errMess en el componente de menú que es de tipo string.
Y luego el método de suscripción en sí proporciona una forma de manejar errores.
Así que el método de suscripción, en este momento solo hemos especificado una función aquí.
También podemos especificar una segunda función que se llamará
cuando el resultado del error.
Entonces, en este caso, puedo proporcionar una segunda función de error diciendo,
errMess, que es el valor devuelto en
cuando el lanzamiento observable es hecho por DishService.
Entonces, en este caso, diría this.errMess = errMess, y eso es todo.
Así que aquí lo que sucede es que cuando el
observable es devuelto por el DishService es un Valor,
entonces eso sería manejado por la primera parte.
Si el observable es devuelto con el lanzamiento observable,
entonces esta función será ejecutada.
Y en esta función, estamos tomando el mensaje de error y
luego capturando ese mensaje de error en esta cadena ErrMess que tenemos aquí.
Así que ahora tenemos el mensaje de error disponible para nosotros, por lo que
podemos mostrar este mensaje de error en la vista de este componente de menú.
Entonces, ¿cómo mostramos esto en la vista de componentes del menú?
Así que vamos al archivo de plantilla de componentes de menú, aquí vemos que si los platos no es nulo,
entonces estamos mostrando el menú con todos los platos.
Si los platos son nulos, entonces este spinner se muestra allí.
Ahora, vamos a añadir en uno más aquí,
incluso si el errMess que tenemos,
la variable, no es nulo, entonces también
el spinner debe estar oculto y luego,
finalmente, añadir en un div más con un nGIF.
Así que lo que esto hace es que esta última inmersión se mostrará en
caso de que haya un error, y el mensaje de error.
La cadena errMess está configurada para el mensaje de error.
Así que en ese caso, simplemente diremos error h2,
y luego solo voy a mostrar esa cadena como,
Una cadena dentro de la vista allí, eso es todo.
Puede hacer una forma más elaborada de mostrar el mensaje de error si lo desea
.
Pero todo lo que voy a hacer es si hay un error,
simplemente mostraré el error en la pantalla y luego mostraré un errMess.
Incluso puedes peinarlo cambiando el color a rojo y
así sucesivamente, pero lo dejaré así allí.
Entonces, con esto, terminaremos mostrando el mensaje de error en la vista aquí.
El mismo procedimiento también se puede utilizar con el componente de plato y
también con el componente de hogar donde estamos accediendo al servicio de plato.
Así que yendo al componente del plato, voy a hacer exactamente la misma cosa,
así que dentro del componente del plato incluiré el, errMess aquí.
Y luego aquí dentro de la suscripción,
aquí es donde estamos recibiendo el valor del plato.
Así que la primera parte,
lo que ya hemos incluido se llamará si el observable devuelve un valor.
Pero si no devuelve un valor, entonces tenemos que lidiar con el mensaje de error.
Y usaremos exactamente la misma función de mensaje de error
que hemos definido anteriormente en el componente de menú.
Por lo tanto, diremos que this.errMess
= Ermess aquí.
Eso es todo, por lo que mi componente de plato ahora está actualizado.
Así que necesito actualizar el archivo de plantilla del componente del plato.
Así que yendo al archivo de plantilla,
vemos que vamos a mostrar el plato si el plato no es nulo.
Y luego abajo aquí, estamos manejando la situación
donde mostraremos el spinner si el plato es nulo.
Así que permítanme agregar también, si el mensaje de error no es nulo, entonces debería
mostrar el mensaje de error en lugar del plato aquí, ¿verdad?
Entonces, déjame seguir adelante y
copiar el código del componente de menú.
Voy a usar exactamente el mismo código para
el archivo de plantilla de componentes de detalle plato también.
Así que, justo ahí.
Déjame seguir adelante e insertar ese código aquí.
Así que vemos que si errMess no es nulo,
entonces este error se mostrará en la vista allí.
Ahora mismo,
yendo al componente de hogar tenemos que pasar por el mismo procedimiento.
Ahora dentro del componente doméstico, por supuesto, tenemos plato, promoción y líder.
Así que voy a definir separadas, cadenas para
cada una de ellas porque el error podría surgir de cualquiera de las tres.
En este momento solo estamos tratando con el plato que se obtiene desde el lado del servidor.
Los dos restantes esperaré que hagas eso como parte de la, Asignación Final.
Así que vamos, voy a decir cadena de error plato y luego bajar al código aquí.
Y en el código aquí,
simplemente diremos errmess.
Este errmess plato = cualquier errmess
, eso es todo.
Y de manera similar, actualice los archivos de plantilla de componentes de inicio.
Y yendo al archivo de plantilla de componentes del hogar,
vemos que tenemos la bandeja de platos que se muestra allí,
así que ahora para este debería decir o plato errMess.
Y luego, abajo aquí, incluiré el código
que he copiado del componente de menú, y
luego lo actualizo a dish errMess aquí.
Y también, actualiza esto a DisherrMess aquí, eso es todo.
Guardemos los cambios.
Al ir al navegador, verás que todo funciona igual que antes.
El hogar, el componente de menú y también el componente de detalle del plato sin ningún problema.
Ahora la pregunta es, ¿cómo causamos errores?
Para causar errores, una posible forma de tratar el problema es ir y
buscar una información inexistente del servidor.
Déjame ir al servicio de platos y luego causar
mi primer problema en el servicio de platos aquí.
Así que para el plato destacado en lugar de platos, déjame cometer un error y
decir dishees y luego guardar el cambio.
Obviamente eso significa que esta url no existe.
Entonces, ¿qué pasará si accede al servidor?
Ir al navegador cuando ahora nos desplazamos,
ves que el plato no se muestra aquí.
Dice aquí Error 404 No encontrado.
Esto se debe a que estamos tratando de acceder a la información del plato en
la URL dishees que no existe en el lado del servidor.
Así que verá cómo se muestra el mensaje de error aquí.
Por supuesto, puede ser un poco más elegante y hacer más trabajo alrededor de esto y
luego mostrar el mensaje de error de una manera más significativa.
Pero el principio básico se resalta aquí diciendo que
puede mostrar un mensaje de error si algo no se ejecuta correctamente
cuando intenta acceder a la información desde el lado del servidor.
Por supuesto, por lo que este es un error creado artificialmente en mi aplicación.
Para causar otro tipo de error, he ido a mi ventana de terminal y
luego apago el servidor para ver qué hará mi aplicación Angular en este caso.
Así que después de apagar el servidor,
vamos a ver lo que el componente de inicio mostrará en su vista.
Así que yendo al componente de inicio, ahora vemos que debido a que mi aplicación Angular
no puede acceder al servidor, ha causado un error nuevamente.
Y luego muestra esta cadena allí para indicar que se ha producido algún error.
Por supuesto, esta es una cadena críptica,
no transmite nada significativo sobre cuál es la fuente del error.
Pero eso es todo lo que pudimos conseguir intentando acceder al servidor en esta aplicación.
Lo mismo, si voy al menú, verá el mismo tipo de cosas que se muestra
, porque el servidor no está disponible, y por lo tanto
la información del plato no se puede obtener del servidor.
Con esto completamos este ejercicio.
En este ejercicio, hemos aprendido cómo lidiar con errores
que surgen durante la comunicación con el servidor cliente en nuestra aplicación Angular.
Este es un buen momento para que hagas un commit de git con el mensaje http parte dos.
[MÚSICA]