En el ejercicio anterior,
actualizamos nuestros servicios de aplicaciones Angular para usar promesas,
y también actualizar los componentes para
hacer frente a las promesas que son devueltas por los servicios.
En este ejercicio, que es una extensión al anterior,
vamos a simular un retraso de tiempo para que la promesa se resuelva.
En el ejercicio anterior,
las promesas se resolvieron inmediatamente.
Pero en la vida real,
cuando solicita datos de un servicio y el servicio entrega una promesa,
el servicio, a su vez,
necesita ir y buscar los datos de un servidor back-end,
y esto llevará tiempo.
Así que, para que la promesa se resuelva,
habrá una cierta cantidad de tiempo de retraso.
Ahora, ¿cómo lidiar con este retraso de tiempo en nuestro lado de componentes?
¿Cómo mantenemos informado al usuario sobre el hecho de que hay
un retraso de tiempo involucrado antes de que los datos puedan ser recuperados y mostrados al usuario?
¿Cómo lidiamos con el retraso en sí?
Ahora, en este ejercicio,
voy a simular el retardo de tiempo usando un método JavaScript dentro de mis servicios,
y luego también actualizar los componentes para poder mostrar un mensaje al usuario usando
el componente de hilandero de progreso de material angular para mostrar un disco giratorio en
la plantilla para mantener al usuario informado sobre
el hecho de que los datos se están recuperando del servidor,
y vamos a renderizar en la vista tan pronto como los datos estén
disponibles para el componente cuando se resuelva la promesa.
Veamos cómo podemos hacerlo en este ejercicio.
De nuevo, volviendo a mi servicio,
aquí tengo el servicio de platos abierto aquí.
En lugar de tener la promesa resuelta inmediatamente,
ahora vamos a entregar una promesa y luego dejar que
la promesa se resuelva después de un corto período de tiempo.
Entonces, para hacer eso, esta resolución de promesa ya no funcionará
como se muestra aquí, así que voy a eliminar eso.
En su lugar, cuando se llama a mi método,
el método devolverá una promesa creando una nueva promesa.
Recordáis que cuando creáis la nueva promesa,
dentro de la promesa tendréis la función
con la resolución y el rechazo como los dos parámetros.
Ahora, voy a usar solo la parte de resolución.
Entonces, implementaré la función dentro de la promesa solo usando una función de flecha aquí.
Por lo tanto, voy a decir resolver,
y voy a simular un breve retraso para que esta resolución tenga lugar.
Déjame escribir un comentario.
Simule la latencia del servidor con retraso de dos segundos.
Entonces, ¿cómo simulamos esto?
Por lo tanto, utilizamos el método setTimeout
que está disponible en JavaScript.
Entonces, para el método setTimeout,
nuevamente, implementaré una función de flecha,
el método setTimeout no tiene ningún parámetro que necesitemos allí.
Entonces, cuando se ejecute este setTimeout,
resolverá la entrega de los platos.
Así que, déjame cortar este plato y luego pegarlo en los platos.
Por lo tanto, verá que este resultado ahora está devolviendo el resultado aquí,
y este resultado será devuelto después de dos segundos de retraso aquí.
Con esta actualización, nuestra promesa ahora se resolverá después de dos segundos.
Entonces, el método setTimeout disponible en JavaScript simula un retraso corto.
Así que, como pueden ver,
simula el retraso corto y toma una devolución de llamada aquí.
Esta devolución de llamada como puede ver,
lo he implementado como una función de flecha aquí.
Entonces, no hay parámetros y luego cuando esto se resuelva,
va a resolver devolviendo los platos y el retraso para eso es de dos segundos.
Entonces, esta parte es la función,
y este es el retraso de tiempo que tenemos aquí.
Así que, ahora, mi promesa se resolverá después de un retraso de dos segundos.
Del mismo modo, vamos a actualizar los dos métodos restantes aquí.
Así que, para hacer eso,
sólo voy a copiar
esa parte y luego simplemente pegar eso allí,
y te darías cuenta de que
lo hará y necesito decir 2000.
Entonces, eso completa el método setTimeout allí.
Ahora, vamos a tener
el paréntesis de cierre seguido.
Del mismo modo, permítanme actualizar el último método también.
Entonces, ves que resuelve los platos,
y luego después de dos segundos de retraso,
y cierra el método hasta allí.
Eso es todo. Por lo tanto, ahora mi servicio de plato es
actualizado para resolver todas las promesas después de dos segundos de retraso.
Ahora, de manera similar, actualiza el servicio líder y
el servicio de promoción utilizando el mismo patrón que te he mostrado aquí.
La segunda parte de la pregunta es mantener informado al usuario sobre
el hecho de que hay un retraso de tiempo involucrado en la obtención de los resultados,
y así la vista se actualizará tan pronto como se obtengan los resultados.
Usted ha visto este tipo de comportamiento en muchas aplicaciones,
incluyendo aplicaciones móviles donde tendría un spinner mostrado en la pantalla para mantener
el usuario informado sobre el hecho de que algo se está cargando desde detrás
las escenas y cuando los resultados estén disponibles,
la vista se actualizará.
Por lo tanto, vamos a utilizar un enfoque similar dentro de nuestros componentes.
Para ayudarnos con esto,
usaremos el componente spinner de progreso de Material angular.
Entonces, para usar el componente spinner de progreso,
primero vayamos al archivo
module.ts de la aplicación y luego importemos el módulo spinner de progreso allí.
Entonces, yendo a la aplicación module.ts.
Primero iremos aquí para importar
el MatProgressSpinnerModule desde angular/material/progress-spinner.
Una vez que hayamos importado esto en el archivo,
luego entraremos en el decorador del módulo ng en las importaciones,
y luego agregaremos el MatProgressSpinnerModule en eso.
Una vez que completemos esto,
podremos actualizar los componentes para hacer uso del spinner de progreso.
Así que aquí, les mostraré un ejemplo de
que ilustra cómo podemos actualizar el componente de menú para mostrar esta información.
Por lo tanto, vaya al archivo de diseño de componentes del menú.
Aquí, vemos que estamos mostrando el menú usando la lista de cuadrícula aquí.
Entonces, lo que haremos es, para este div,
voy a usar la directiva nGIF y decir que esto debería mostrarse.
El menú debe mostrarse sólo cuando los platos no son nulos.
Así que inicialmente, en su archivo de script de la pestaña de componentes,
verá que cuando vaya al archivo de script de la pestaña de componentes verá que
sus platos actualmente es solo un objeto indefinido aquí,
y que los platos se asignarán al valor de los platos solo cuando los problemas se resuelvan.
Así que, hasta ese punto,
los platos serán un valor indefinido.
Entonces, podemos aprovechar ese hecho,
y luego rediseñar nuestra plantilla de tal manera que,
diríamos mostrar este div solo si los platos no son un objeto indefinido o no nulo.
Cuando es desconocido,
entonces usaré un segundo div aquí con el atributo oculto asociado con él.
Por lo tanto, usted ha visto ocultado ser usado antes.
Entonces, voy a usar eso para definir el tallo.
Entonces, lo que esto significa es que si los platos no son nulos,
entonces este div estará oculto.
Si los platos son nulos,
entonces se mostrará este div.
Entonces, ahora ves que tienes dos divs aquí.
El primero se mostrará si los platos no es null dish array.
De lo contrario, se mostrará la segunda parte.
Así que, con este pequeño cambio en mi plantilla,
soy capaz de ocultar el menú hasta el punto en que la matriz de platos esté disponible para mí,
y cuando la matriz de platos esté disponible,
entonces voy a mostrar el menú.
Hasta ese punto, voy a mostrar un mat-spinner.
Que es un spinner de progreso no determinado
que está disponible como un componente de material angular.
Entonces, esto se mostrará como un círculo giratorio en mi opinión,
para este componente de menú hasta el punto en que se obtengan los resultados,
cuando se resuelvan los problemas.
Además, también usaré h4, y dentro del h4,
diré cargando, por favor espere.
Entonces, lo que sucede es que cuando los platos aún no se hayan resuelto,
el spinner y este mensaje se mostrarán en la pantalla.
En el momento en que los platos estén disponibles cuando los resultados prometidos,
entonces el menú se mostrará en la pantalla.
Ahora, vamos a hacer actualizaciones similares sobre el componente,
el componente de hogar, y el componente de detalle de plato también.
En consecuencia, actualizaremos el servicio líder,
y el servicio de promoción también para simular el retraso de tiempo.
Así que, usando el patrón que acabo de ilustrarte,
continúe y actualice los servicios y también las plantillas correspondientes,
y veremos el resultado después de terminar la actualización.
Después de completar las actualizaciones de todos los servicios y
las plantillas correspondientes para los componentes,
déjame ejecutarlo rápidamente a través de los archivos actualizados aquí.
Entonces, este es el servicio líder.
Entonces, puedes ver que en el servicio líder,
he actualizado GetLeaders para usar el setTimeout exactamente como hicimos con los platos,
y getLeader y getFeaturedLeader también.
Del mismo modo, en el servicio de promoción,
hemos actualizado el id getPromotions GetPromotion y getFeaturedPromotion también.
Por lo tanto, los tres servicios ahora se actualizan
para causar un retraso de tiempo antes de que devuelvan el resultado.
Ahora, en términos de las plantillas,
ya hemos actualizado la plantilla menu.component.
Echemos un vistazo a las plantillas de home.components.
Así que, dentro del home.component,
te das cuenta de que cuando diseñamos el home.component,
ya habíamos configurado las tarjetas con el plato estrella nGIF.
Entonces, todo lo que necesitamos hacer es,
abajo aquí agregamos un div con
lo oculto y el plato aquí, pero el spinner al igual que hicimos con el menu.component.
Del mismo modo, para la promoción la mat-card ya tiene el nGIF en su lugar,
así que solo tenemos que añadir este div adicional aquí con la promoción oculta allí,
y también para el líder aquí abajo.
Del mismo modo, yendo al componente de detalle del plato.
En el componente de detalle plato,
ya teníamos la lista con el plato nGif para los comentarios.
Además, el plato nGif para la tarjeta que muestra los detalles del plato.
Entonces, todo lo que necesitamos hacer es agregar este nuevo div con el plato oculto aquí,
y el div spinner en su lugar.
Del mismo modo, en el componente sobre,
cuando se entra en el componente sobre,
se vería que teníamos los líderes corporativos aquí,
y ya teníamos la lista con la estrella nGIF con líderes.
Entonces, todo lo que necesitamos hacer es agregar el div con
oculto y líderes aquí con un spinner en su lugar. Eso es todo.
Nuestra aplicación ya está actualizada.
Echemos un vistazo a la aplicación actualizada en el navegador a continuación.
Al ir al navegador,
verás que cuando intentes cargar en el componente home,
hay un corto período de tiempo cuando ves el spinner en
la pantalla antes de que las tarjetas se carguen.
Del mismo modo, cuando vas al menu.component,
verías el spinner en el lado izquierdo durante
dos segundos antes de que el menú real se actualiza,
y cuando vas a un plato individual también ves que
el spinner en la pantalla antes de que los detalles del plato se renderizan,
y en el componente sobre también de manera similar, verá que,
tendrá el círculo giratorio allí antes de que se actualice la información del líder.
Cada vez que nos movemos a cualquiera de estos,
verías un breve retraso similar antes de que la inflamación se actualice en la pantalla.
Así que, con esto usted ve cómo puede lidiar con el retraso en la obtención de los resultados,
o el retraso en la resolución de la promesa desde el lado del servicio dentro de su componente
y mantener al usuario informado sobre el hecho de que hay
un breve retraso antes de que la pantalla se actualice.
Esto completa este ejercicio.
En este ejercicio, vimos cómo podemos simular un pequeño retraso con nuestras promesas.
Resolviendo de los servicios,
y también vimos cómo mantener informado al usuario usando el MD spinner
componentes de material angular para mostrar en la pantalla durante
la duración cuando los resultados aún no están disponibles,
es decir para la duración hasta que la promesa se resuelva.
Esto completa este ejercicio.
Este es un buen momento para que hagas un commit de git con la promesa del mensaje Segunda parte.