Después de la breve introducción a las promesas en la conferencia anterior,
pasemos a nuestro próximo ejercicio donde
haremos uso de las promesas dentro de nuestra aplicación angular.
En particular, las promesas son una forma esencial de lidiar con los retrasos, especialmente cuando
necesita acceder y obtener los datos de un servidor
antes de ser entregados al componente a través de su servicio.
Por lo tanto, los servicios a menudo devuelven promesas a
los componentes cuando los componentes llaman a los métodos de servicio,
y, a partir de entonces, cuando la promesa
se resuelva, los componentes tendrán los resultados disponibles para ellos.
Reconfiguraremos los servicios que tenemos dentro de
nuestra aplicación angular para devolver
promesas y luego reconfiguraremos
nuestros componentes para poder hacer frente a las promesas.
Nuestro primer paso en este ejercicio es reconfigurar todos los servicios para devolver promesas.
Así que cada uno de los métodos dentro de nuestro servicio en lugar de devolver
el valor inmediatamente devolverá promesas.
Entonces, ¿cómo configuramos nuestros servicios para devolver promesas?
Entonces, yendo al archivo dishservice.ts,
, el método getDish aquí devolverá una promesa en lugar de la matriz de platos.
Por lo tanto, configuramos el método GetDish para devolver la promesa
encerrando este objeto de plato dentro de una promesa.
Lo que esto significa es que si la promesa se resuelve, entonces el resultado entregado
por la promesa GetDish sería una matriz de platos.
Por lo tanto, dentro de su componente
recibirá la matriz de platos si la promesa resulta correctamente.
Ahora que hemos configurado GetDrices para devolver una promesa,
necesitamos reconfigurar el código para
que esta matriz de platos sea devuelta como parte de una promesa.
Ahora ya que tenemos el resultado disponible para nosotros,
voy a usar el método de acceso directo de
devolver la promesa resolviendo la promesa inmediatamente.
Ahora, obviamente, esto funciona bien si tiene los resultados inmediatamente disponibles con usted.
Pero, cuando reconfigure su servicio a
ser capaz de ir y buscar estos datos de un servidor,
entonces tendremos que reescribir este código para hacer frente al hecho de que
el servicio no devolverá el resultado
inmediatamente en su lugar tendrá que esperar un tiempo.
En el próximo ejercicio,
vamos a simular el retraso usando un método JavaScript para que te dé
una idea de lo que significa lidiar con retrasos en la recepción de un resultado de una promesa.
Ahora que hemos configurado GetDrenes para devolver la promesa,
de manera similar, reconfiguraremos los dos métodos restantes.
Así que voy a copiar esta promesa de
aquí y luego simplemente adjuntar esto a los dos restantes allí,
para que los convierta también para devolver
promesas y luego, por supuesto, lo que
tenemos aquí debería estar encerrado dentro de la promesa de resolución.
Así que solo voy a copiar la promesa de resolución
y adjuntar esto dentro de la resolución aquí.
Del mismo modo, para el plato destacado voy a incluir esto dentro de la resolución de la promesa.
Ahora, mi servicio de plato está configurado para devolver promesas.
Obviamente, esto también significa que necesito ir a
mis componentes y luego reconfigurar los componentes para poder lidiar
con el hecho de que no están recibiendo los datos
inmediatamente en su lugar están recibiendo una promesa y luego
tendrán que implementar el método entonces dentro de
que la promesa cuando resulte le entregará los datos.
Así que, ahora que hemos configurado el servicio de platos,
conocemos un lugar donde el servicio se está utilizando activamente y que es el componente de menú.
Así que déjame mostrarte cómo vamos a reconfigurar
el componente para poder hacer frente a la promesa.
Así que cuando vayas al menucomponent.ts inmediatamente
notarás que hay una línea roja escudero debajo de los platos porque,
como ves, ahora,
el Dishservice.GetDish está volviendo una promesa y luego aquí tienes,
la promesa de ser asignado a un objeto de matriz de plato y esto no es correcto.
¿Cómo reconfiguramos este código?
Así que, como mencioné,
cuando reconfiguramos el código,
necesitamos implementar el entonces y la captura para el GetDices.
Entonces, permítanme seguir adelante e implementar justo el entonces en este momento,
para el método GetDRICES porque la captura se puede implementar más adelante.
Ahora mismo sabemos que la promesa siempre se resolverá correctamente,
así que implementaremos el método entonces aquí,
y luego, dentro del método entonces,
recibiré el objeto de platos que entra cuando la promesa se resuelva.
Y cuando eso es platos objeto viene como un parámetro,
para que veas que estoy escribiendo una función de flecha aquí,
Solo voy a cortar eso e incluir eso justo ahí.
Ahí tienes. Así es como su componente ahora puede
hacerse con la promesa y luego recuperar los resultados cuando se resuelva la promesa.
Se puede ver que tenemos el DishService GetDishDishService y luego el método
cambia a él y por lo que cuando se llama el entonces,
cuando la promesa se resuelve desde el otro lado,
entonces los platos se entregarán a usted porque el método getDishes
está devolviendo una promesa pero el resultado será una matriz de platos.
Esa matriz de platos viene como un parámetro aquí, así que estoy escribiendo una función de flecha
aquí donde estoy asignando esos platos a los platos.
Entonces, cuando esta promesa se resuelva entonces los platos serán
asignados a estos platos. Eso es todo.
Ahora mi componente de menú está listo para hacer frente a la promesa.
Por supuesto, para lidiar con el error también necesita
encadenar el método catch en el método getDerres.
Entonces, el entonces y la captura son métodos que
la promesa proporciona para usted y por lo tanto implementa eso y dentro de
que proporcionará la función que trata con
la situación cuando la promesa se resuelve o cuando la promesa se rechaza con un error.
Ahora de manera similar, debemos reconfigurar el método de detalle del plato
y también el componente doméstico para lidiar con el hecho de que
DishService ahora está entregando promesas en lugar de entregar los valores inmediatamente.
Mientras estamos en ello,
también podríamos reconfigurar tanto el líder como el servicio de promoción.
Así que lo dejaré como un ejercicio para que completéis,
actualizando tanto el servicio líder como el servicio de promoción para poder
cumplir las promesas correspondientes.
Además, en consecuencia, tendrá que reconfigurar
el código de script de tipo de componente en el componente de detalle del plato,
en el componente de inicio para lidiar con el hecho de que ahora está
recibiendo promesas en lugar de los resultados reales.
Así que te dejaré completar esa parte en lugar de ilustrar todo eso en detalle,
Te he mostrado un paso con el componente de detalle del plato.
Por favor, complete los pasos con el líder y el servicio de promoción
y luego configure los componentes correspondientes en consecuencia.
Déjame guiarte rápidamente a través de las actualizaciones que necesitas completar.
Así que como ven el servicio de líderes que ya he actualizado con la promesa.
Como puedes ver aquí,
todos los métodos ahora han sido actualizados para devolver
promesas como lo hicimos con DishService.
Del mismo modo, los servicios de promoción también se actualizaron a
promesas de retorno de todos los métodos allí.
Ahora, yendo al componente sobre,
verías que en el componente sobre también hemos configurado para
recibir los valores dentro del entonces de la promesa allí.
Del mismo modo, en el componente de detalle del plato notarías que tengo
reconfigurado esto para lidiar con la promesa allí.
Del mismo modo, en el componente home,
notarías que dentro del componente home
todos los tres métodos aquí: getFeaturedDish,
FeaturedPromotion y FeaturedLeader se han actualizado,
con el entonces adjunto a cada uno de ellos para hacer frente a la promesa.
El código es bastante similar a lo que he ilustrado con el componente de menú.
Una vez completado esto,
echemos un vistazo rápido a nuestra aplicación.
Al ir a nuestra aplicación en el navegador,
no verás ninguna diferencia en la aplicación.
Funciona exactamente de la misma manera que antes,
excepto que ahora está usando promesas cuando
los servicios se implementan y sus componentes
están tratando con las promesas cuando se resuelven.
Así que el componente de menú funciona correctamente y
también el componente de detalle del plato también funciona correctamente.
Con esto, completamos este ejercicio.
En este ejercicio, vimos cómo pudimos actualizar nuestros servicios a
cumplir promesas y también actualizamos nuestros componentes para poder hacer frente a las promesas.
Esto completa este ejercicio.
Este es un buen momento para que hagas un commit de git con el mensaje 'Promesa parte uno'.