Ahora que has tenido tu primera introducción a la Programación Reactiva, RxJS,
y el uso del patrón de observador y
cómo Angular aprovecha el patrón de observador y soporta la Programación Reactiva,
pasemos a nuestro primer ejercicio para mojar nuestros pies
usando los observables en Angular.
En este ejercicio, vamos a actualizar nuestros servicios para hacer uso de observables,
porque cuando pasemos al siguiente módulo donde veremos el soporte HTTP en Angular,
comprenderemos inmediatamente que el soporte HTTP en Angular está basado en observables.
Por lo tanto, es una buena idea para nosotros familiarizarnos
con el uso de observables en esta lección misma.
Por lo tanto, actualizaremos los servicios para exportar observables.
A partir de entonces, dentro de nuestros componentes,
nos suscribiremos a estos observables y
obtenemos los datos necesarios para representar las vistas.
Pasemos al ejercicio siguiente.
Debes estar preguntándote,
¿cómo hacemos uso de RxJS dentro de Angular,
y ya está disponible para nosotros?
Así que lo que notará es que con la CLI Angular,
cuando scaffold su aplicación Angular,
RxJS se incluye automáticamente allí.
Entonces, si va al archivo package.json,
notará que dentro de las dependencias,
la biblioteca RxJS ya está incluida dentro de su aplicación.
Por lo tanto, lo que necesite usar de RxJS ya está disponible para usted.
Así que podemos seguir adelante y usar la biblioteca RxJS de inmediato dentro de nuestra aplicación Angular.
Si está construyendo su aplicación Angular desde cero,
entonces necesita hacer explícitamente una instalación npm de RxJS.
Al ir al archivo dish.service.js,
déjame primero importar el de
de nuestros observables 'rxjs'.
También importaremos - Ahora,
cuando uses RxJS dentro de tu aplicación Angular,
toda la biblioteca no se incluye.
Solo puede importar las partes que necesite de la biblioteca RxJS,
y luego usarla dentro de su aplicación Angular.
Entonces, cuando su aplicación Angular esté finalmente preparada para la implementación,
solo aquellas partes de RxJS que sean necesarias se incluirán
dentro de su aplicación Angular.
El operador de retardo.
El operador de retardo nos permite retrasar la emisión del artículo desde nuestro observable.
Entrando en los métodos,
vamos a actualizar estos métodos para hacer uso de observables,
y vamos a devolver una promesa convirtiendo el
observable en su promesa usando el operador ToPromise.
Entonces, si ya está teniendo componentes que están usando promesas,
y desea no modificar los componentes,
simplemente puede convertir un observable a su promesa y luego
enviar la promesa a sus componentes.
Como nos dimos cuenta, las promesas emitieron solo un elemento,
mientras que se puede ver que los observables se basan en flujos.
Entonces, esa es la limitación que obtendrá si
solo usa el operador de dos promesas en observables
y lo usa porque el operador ToPromise
permitirá que su observable solo emita un valor.
Pero por el momento hagámoslo como el primer paso antes de que
nos adentremos en la plena implementación observable de nuestros servicios.
Así que, yendo al método GetDRIces,
voy a devolver estos platos.
Así que, voy a quitar esa parte y luego decir, retorno de.
Si desea emitir solo un valor de su observable,
usará el método of,
y que tomará cualquier valor que desee emitir allí.
Eso es suficiente para nuestra aplicación actual en este momento.
Así que vamos a hacer uso de eso,
y también queremos retrasar la emisión del valor en dos segundos.
Entonces, voy a cambiar esta parte del código para usar
el operador de retardo para mi observable, usando pipe.
Necesito convertir esto a Promise y emitir la promesa.
Así que ahora, mi método GetDices se actualiza para hacer uso de un observable,
y luego convertir eso en una promesa y luego enviar la promesa a mi componente.
Así que no necesito hacer ninguna actualización del componente.
Usemos el mismo enfoque para actualizar los dos métodos restantes de mi servicio aquí.
Así que voy a copiar esta parte,
y luego actualizar esa parte,
luego tomar la parte de retraso de la misma,
y luego actualizar esta parte para usar el delay
y convertir este método toPromise.
Entonces, con eso, mi método getDish también se actualiza.
Déjame hacer lo mismo con el método getFeaturedDish.
De nuevo, si quieres,
puedes escribir todo el asunto.
Solo estoy siendo perezoso para cortar y pegar solo y cambiar las partes que
Quiero cambiar y convertir este método ToPromise.
Eso es todo. Mi servicio ahora está actualizado para devolver promesas de un observable aquí.
Entonces, con esta actualización,
mi servicio de plato se actualiza para hacer uso de observables en lugar de
usando directamente los valores.
Del mismo modo, continúe y actualice el servicio líder y el servicio de promoción.
Ahora notarías que ya he actualizado
el servicio líder para hacer uso de observables.
Del mismo modo, también he actualizado el servicio de promoción para hacer uso de observables.
Guarde los cambios y vamos a echar un vistazo a nuestra aplicación.
Cuando vaya al navegador,
notará que su aplicación funciona exactamente de la misma manera que antes
y recupera los datos de los servicios al igual que antes.
Así que no hay mucho cambio dentro de su aplicación como tal.
Se realiza exactamente lo mismo.
Por lo tanto, observe que al sustituir sus promesas por observables,
no ha habido mucho cambio dentro de su aplicación como lo espera.
Ahora, vamos un paso más allá.
Ahora dejaremos que nuestros servicios devuelvan observables,
y actualizaremos los componentes para hacer uso de observables.
La razón como mencioné,
es porque cuando actualizamos nuestros servicios para usar
el servicio HTTP para ir a un servidor a buscar los datos,
entonces notaríamos que en Angular los métodos HTTP devolverán observables.
Los servicios pueden simplemente pasar los observables a nuestros componentes y dejar que
los componentes se suscriban a estos observables y hagan uso
de los datos que obtienen con ello.
Por lo tanto, este sería un paso intermedio para que llegáramos a esa etapa.
Vamos a llegar a ver HTTP en el siguiente módulo.
Volviendo a nuestros servicios,
ahora puede eliminar el ToPromise primero eliminando
el operador ToPromise porque ya no lo necesitamos
y luego simplemente eliminaremos el ToPromise de esto,
importar observable y luego dejar
nuestro método devolver
observables en lugar de promesas.
Así que como mencioné,
cualquier cosa que una promesa pueda hacer, un observable también puede hacer.
Entonces, actualicemos todos estos para devolver observables.
Haga lo mismo con los dos servicios restantes.
Ahora notarías que también he actualizado el servicio de líderes
para simplemente devolver observables en lugar de promesas,
y también el servicio de promoción ha sido correspondientemente
actualizado para volver observable en lugar de promesas.
Ahora lo que esto significa es que tenemos que ir y actualizar nuestros componentes
para hacer uso de observables en lugar de promesas como hicimos antes.
Ahora, por promesa, vimos que necesitamos usar el.then
para obtener el resultado cuando se ejecuta la resolución de la promesa.
Con un observable, el.then se convierte a.subscribe.
La forma en que consuma los datos seguirá siendo exactamente la misma.
Así que con ese cambio menor dentro de sus componentes,
los componentes ahora podrán manejar observables en lugar de promesas.
Entonces, yendo a los cuatro componentes que hacen uso de los servicios,
primero, vamos al archivo menu.component.ts.
En el archivo menu.component.ts,
usted notaría inmediatamente la línea roja escudero allí,
bajo el entonces obviamente porque no estamos devolviendo una promesa.
En su lugar estamos devolviendo un observable.
Así que simplemente convierte eso luego para suscribirse y eso es todo.
Su componente de menú ahora es capaz de
consumir los valores observables que está siendo emitido por el observable.
Realice el mismo cambio en el archivo about.component.ts,
el archivo dishdetail.component.ts y el archivo home.component.ts.
Después de actualizar los archivos Tapscott componentes restantes,
vamos a ir y ver el comportamiento de nuestra aplicación en el navegador.
Entra en el navegador, no notarás ninguna diferencia en el comportamiento de nuestra aplicación.
Esta versión de nuestra aplicación Angular se actualiza para usar
observables en lugar de promesas.
Entonces, el componente de inicio aquí,
sobre el componente funciona exactamente de la misma manera que antes,
y el componente de menú hace exactamente lo mismo.
También el componente de detalle del plato se comportará exactamente de la misma manera que antes.
Con esto, completamos este ejercicio.
En este ejercicio, dimos nuestros primeros pasos hacia el uso de
observables dentro de nuestra aplicación Angular actualizando
los servicios y correspondientemente los componentes para
hacer uso de observables en lugar de promesas.
Este es un buen momento para que hagas un commit de git con el mensaje RxJS parte uno.