1 00:00:03,830 --> 00:00:09,840 Después de la breve introducción a las promesas en la conferencia anterior, 2 00:00:09,840 --> 00:00:12,270 pasemos a nuestro próximo ejercicio donde 3 00:00:12,270 --> 00:00:15,235 haremos uso de las promesas dentro de nuestra aplicación angular. 4 00:00:15,235 --> 00:00:24,060 En particular, las promesas son una forma esencial de lidiar con los retrasos, especialmente cuando 5 00:00:24,060 --> 00:00:27,885 necesita acceder y obtener los datos de un servidor 6 00:00:27,885 --> 00:00:32,915 antes de ser entregados al componente a través de su servicio. 7 00:00:32,915 --> 00:00:36,440 Por lo tanto, los servicios a menudo devuelven promesas a 8 00:00:36,440 --> 00:00:41,050 los componentes cuando los componentes llaman a los métodos de servicio, 9 00:00:41,050 --> 00:00:43,490 y, a partir de entonces, cuando la promesa 10 00:00:43,490 --> 00:00:47,385 se resuelva, los componentes tendrán los resultados disponibles para ellos. 11 00:00:47,385 --> 00:00:51,920 Reconfiguraremos los servicios que tenemos dentro de 12 00:00:51,920 --> 00:00:55,970 nuestra aplicación angular para devolver 13 00:00:55,970 --> 00:00:58,550 promesas y luego reconfiguraremos 14 00:00:58,550 --> 00:01:02,390 nuestros componentes para poder hacer frente a las promesas. 15 00:01:02,390 --> 00:01:10,925 Nuestro primer paso en este ejercicio es reconfigurar todos los servicios para devolver promesas. 16 00:01:10,925 --> 00:01:14,704 Así que cada uno de los métodos dentro de nuestro servicio en lugar de devolver 17 00:01:14,704 --> 00:01:18,500 el valor inmediatamente devolverá promesas. 18 00:01:18,500 --> 00:01:21,685 Entonces, ¿cómo configuramos nuestros servicios para devolver promesas? 19 00:01:21,685 --> 00:01:26,635 Entonces, yendo al archivo dishservice.ts, 20 00:01:26,635 --> 00:01:35,390 , el método getDish aquí devolverá una promesa en lugar de la matriz de platos. 21 00:01:35,390 --> 00:01:38,840 Por lo tanto, configuramos el método GetDish para devolver la promesa 22 00:01:38,840 --> 00:01:43,695 encerrando este objeto de plato dentro de una promesa. 23 00:01:43,695 --> 00:01:49,235 Lo que esto significa es que si la promesa se resuelve, entonces el resultado entregado 24 00:01:49,235 --> 00:01:55,435 por la promesa GetDish sería una matriz de platos. 25 00:01:55,435 --> 00:01:59,164 Por lo tanto, dentro de su componente 26 00:01:59,164 --> 00:02:03,290 recibirá la matriz de platos si la promesa resulta correctamente. 27 00:02:03,290 --> 00:02:07,845 Ahora que hemos configurado GetDrices para devolver una promesa, 28 00:02:07,845 --> 00:02:10,370 necesitamos reconfigurar el código para 29 00:02:10,370 --> 00:02:14,735 que esta matriz de platos sea devuelta como parte de una promesa. 30 00:02:14,735 --> 00:02:18,770 Ahora ya que tenemos el resultado disponible para nosotros, 31 00:02:18,770 --> 00:02:22,190 voy a usar el método de acceso directo de 32 00:02:22,190 --> 00:02:27,875 devolver la promesa resolviendo la promesa inmediatamente. 33 00:02:27,875 --> 00:02:34,720 Ahora, obviamente, esto funciona bien si tiene los resultados inmediatamente disponibles con usted. 34 00:02:34,720 --> 00:02:38,120 Pero, cuando reconfigure su servicio a 35 00:02:38,120 --> 00:02:41,885 ser capaz de ir y buscar estos datos de un servidor, 36 00:02:41,885 --> 00:02:46,670 entonces tendremos que reescribir este código para hacer frente al hecho de que 37 00:02:46,670 --> 00:02:49,310 el servicio no devolverá el resultado 38 00:02:49,310 --> 00:02:52,875 inmediatamente en su lugar tendrá que esperar un tiempo. 39 00:02:52,875 --> 00:02:54,430 En el próximo ejercicio, 40 00:02:54,430 --> 00:03:03,290 vamos a simular el retraso usando un método JavaScript para que te dé 41 00:03:03,290 --> 00:03:12,875 una idea de lo que significa lidiar con retrasos en la recepción de un resultado de una promesa. 42 00:03:12,875 --> 00:03:16,865 Ahora que hemos configurado GetDrenes para devolver la promesa, 43 00:03:16,865 --> 00:03:20,770 de manera similar, reconfiguraremos los dos métodos restantes. 44 00:03:20,770 --> 00:03:24,890 Así que voy a copiar esta promesa de 45 00:03:24,890 --> 00:03:30,430 aquí y luego simplemente adjuntar esto a los dos restantes allí, 46 00:03:30,430 --> 00:03:34,220 para que los convierta también para devolver 47 00:03:34,220 --> 00:03:37,100 promesas y luego, por supuesto, lo que 48 00:03:37,100 --> 00:03:40,225 tenemos aquí debería estar encerrado dentro de la promesa de resolución. 49 00:03:40,225 --> 00:03:43,129 Así que solo voy a copiar la promesa de resolución 50 00:03:43,129 --> 00:03:50,675 y adjuntar esto dentro de la resolución aquí. 51 00:03:50,675 --> 00:04:00,080 Del mismo modo, para el plato destacado voy a incluir esto dentro de la resolución de la promesa. 52 00:04:00,080 --> 00:04:05,005 Ahora, mi servicio de plato está configurado para devolver promesas. 53 00:04:05,005 --> 00:04:07,610 Obviamente, esto también significa que necesito ir a 54 00:04:07,610 --> 00:04:11,360 mis componentes y luego reconfigurar los componentes para poder lidiar 55 00:04:11,360 --> 00:04:14,090 con el hecho de que no están recibiendo los datos 56 00:04:14,090 --> 00:04:17,720 inmediatamente en su lugar están recibiendo una promesa y luego 57 00:04:17,720 --> 00:04:21,200 tendrán que implementar el método entonces dentro de 58 00:04:21,200 --> 00:04:25,550 que la promesa cuando resulte le entregará los datos. 59 00:04:25,550 --> 00:04:28,639 Así que, ahora que hemos configurado el servicio de platos, 60 00:04:28,639 --> 00:04:35,020 conocemos un lugar donde el servicio se está utilizando activamente y que es el componente de menú. 61 00:04:35,020 --> 00:04:37,730 Así que déjame mostrarte cómo vamos a reconfigurar 62 00:04:37,730 --> 00:04:40,640 el componente para poder hacer frente a la promesa. 63 00:04:40,640 --> 00:04:44,420 Así que cuando vayas al menucomponent.ts inmediatamente 64 00:04:44,420 --> 00:04:49,984 notarás que hay una línea roja escudero debajo de los platos porque, 65 00:04:49,984 --> 00:04:51,880 como ves, ahora, 66 00:04:51,880 --> 00:04:58,875 el Dishservice.GetDish está volviendo una promesa y luego aquí tienes, 67 00:04:58,875 --> 00:05:05,660 la promesa de ser asignado a un objeto de matriz de plato y esto no es correcto. 68 00:05:05,660 --> 00:05:08,005 ¿Cómo reconfiguramos este código? 69 00:05:08,005 --> 00:05:09,559 Así que, como mencioné, 70 00:05:09,559 --> 00:05:11,440 cuando reconfiguramos el código, 71 00:05:11,440 --> 00:05:16,100 necesitamos implementar el entonces y la captura para el GetDices. 72 00:05:16,100 --> 00:05:20,820 Entonces, permítanme seguir adelante e implementar justo el entonces en este momento, 73 00:05:20,820 --> 00:05:27,360 para el método GetDRICES porque la captura se puede implementar más adelante. 74 00:05:27,360 --> 00:05:31,190 Ahora mismo sabemos que la promesa siempre se resolverá correctamente, 75 00:05:31,190 --> 00:05:33,665 así que implementaremos el método entonces aquí, 76 00:05:33,665 --> 00:05:36,645 y luego, dentro del método entonces, 77 00:05:36,645 --> 00:05:46,650 recibiré el objeto de platos que entra cuando la promesa se resuelva. 78 00:05:46,650 --> 00:05:50,400 Y cuando eso es platos objeto viene como un parámetro, 79 00:05:50,400 --> 00:05:53,190 para que veas que estoy escribiendo una función de flecha aquí, 80 00:05:53,190 --> 00:06:03,120 Solo voy a cortar eso e incluir eso justo ahí. 81 00:06:03,170 --> 00:06:09,510 Ahí tienes. Así es como su componente ahora puede 82 00:06:09,510 --> 00:06:16,775 hacerse con la promesa y luego recuperar los resultados cuando se resuelva la promesa. 83 00:06:16,775 --> 00:06:21,575 Se puede ver que tenemos el DishService GetDishDishService y luego el método 84 00:06:21,575 --> 00:06:26,560 cambia a él y por lo que cuando se llama el entonces, 85 00:06:26,560 --> 00:06:28,880 cuando la promesa se resuelve desde el otro lado, 86 00:06:28,880 --> 00:06:33,635 entonces los platos se entregarán a usted porque el método getDishes 87 00:06:33,635 --> 00:06:38,450 está devolviendo una promesa pero el resultado será una matriz de platos. 88 00:06:38,450 --> 00:06:42,320 Esa matriz de platos viene como un parámetro aquí, así que estoy escribiendo una función de flecha 89 00:06:42,320 --> 00:06:46,880 aquí donde estoy asignando esos platos a los platos. 90 00:06:46,880 --> 00:06:49,880 Entonces, cuando esta promesa se resuelva entonces los platos serán 91 00:06:49,880 --> 00:06:53,930 asignados a estos platos. Eso es todo. 92 00:06:53,930 --> 00:06:57,455 Ahora mi componente de menú está listo para hacer frente a la promesa. 93 00:06:57,455 --> 00:07:01,715 Por supuesto, para lidiar con el error también necesita 94 00:07:01,715 --> 00:07:06,130 encadenar el método catch en el método getDerres. 95 00:07:06,130 --> 00:07:08,390 Entonces, el entonces y la captura son métodos que 96 00:07:08,390 --> 00:07:11,540 la promesa proporciona para usted y por lo tanto implementa eso y dentro de 97 00:07:11,540 --> 00:07:16,790 que proporcionará la función que trata con 98 00:07:16,790 --> 00:07:23,355 la situación cuando la promesa se resuelve o cuando la promesa se rechaza con un error. 99 00:07:23,355 --> 00:07:28,850 Ahora de manera similar, debemos reconfigurar el método de detalle del plato 100 00:07:28,850 --> 00:07:33,890 y también el componente doméstico para lidiar con el hecho de que 101 00:07:33,890 --> 00:07:44,520 DishService ahora está entregando promesas en lugar de entregar los valores inmediatamente. 102 00:07:44,520 --> 00:07:46,470 Mientras estamos en ello, 103 00:07:46,470 --> 00:07:51,305 también podríamos reconfigurar tanto el líder como el servicio de promoción. 104 00:07:51,305 --> 00:07:55,100 Así que lo dejaré como un ejercicio para que completéis, 105 00:07:55,120 --> 00:07:59,930 actualizando tanto el servicio líder como el servicio de promoción para poder 106 00:07:59,930 --> 00:08:05,180 cumplir las promesas correspondientes. 107 00:08:05,180 --> 00:08:09,379 Además, en consecuencia, tendrá que reconfigurar 108 00:08:09,379 --> 00:08:18,785 el código de script de tipo de componente en el componente de detalle del plato, 109 00:08:18,785 --> 00:08:23,360 en el componente de inicio para lidiar con el hecho de que ahora está 110 00:08:23,360 --> 00:08:27,950 recibiendo promesas en lugar de los resultados reales. 111 00:08:27,950 --> 00:08:34,005 Así que te dejaré completar esa parte en lugar de ilustrar todo eso en detalle, 112 00:08:34,005 --> 00:08:37,620 Te he mostrado un paso con el componente de detalle del plato. 113 00:08:37,620 --> 00:08:42,380 Por favor, complete los pasos con el líder y el servicio de promoción 114 00:08:42,380 --> 00:08:45,890 y luego configure los componentes correspondientes en consecuencia. 115 00:08:45,890 --> 00:08:50,275 Déjame guiarte rápidamente a través de las actualizaciones que necesitas completar. 116 00:08:50,275 --> 00:08:56,365 Así que como ven el servicio de líderes que ya he actualizado con la promesa. 117 00:08:56,365 --> 00:08:57,585 Como puedes ver aquí, 118 00:08:57,585 --> 00:09:00,410 todos los métodos ahora han sido actualizados para devolver 119 00:09:00,410 --> 00:09:04,800 promesas como lo hicimos con DishService. 120 00:09:04,800 --> 00:09:08,420 Del mismo modo, los servicios de promoción también se actualizaron a 121 00:09:08,420 --> 00:09:12,660 promesas de retorno de todos los métodos allí. 122 00:09:12,660 --> 00:09:16,560 Ahora, yendo al componente sobre, 123 00:09:16,560 --> 00:09:22,160 verías que en el componente sobre también hemos configurado para 124 00:09:22,160 --> 00:09:28,790 recibir los valores dentro del entonces de la promesa allí. 125 00:09:28,790 --> 00:09:33,560 Del mismo modo, en el componente de detalle del plato notarías que tengo 126 00:09:33,560 --> 00:09:39,765 reconfigurado esto para lidiar con la promesa allí. 127 00:09:39,765 --> 00:09:43,495 Del mismo modo, en el componente home, 128 00:09:43,495 --> 00:09:46,190 notarías que dentro del componente home 129 00:09:46,190 --> 00:09:51,740 todos los tres métodos aquí: getFeaturedDish, 130 00:09:51,740 --> 00:09:54,650 FeaturedPromotion y FeaturedLeader se han actualizado, 131 00:09:54,650 --> 00:09:59,330 con el entonces adjunto a cada uno de ellos para hacer frente a la promesa. 132 00:09:59,330 --> 00:10:06,355 El código es bastante similar a lo que he ilustrado con el componente de menú. 133 00:10:06,355 --> 00:10:08,570 Una vez completado esto, 134 00:10:08,570 --> 00:10:12,995 echemos un vistazo rápido a nuestra aplicación. 135 00:10:12,995 --> 00:10:15,665 Al ir a nuestra aplicación en el navegador, 136 00:10:15,665 --> 00:10:18,870 no verás ninguna diferencia en la aplicación. 137 00:10:18,870 --> 00:10:21,409 Funciona exactamente de la misma manera que antes, 138 00:10:21,409 --> 00:10:26,385 excepto que ahora está usando promesas cuando 139 00:10:26,385 --> 00:10:29,615 los servicios se implementan y sus componentes 140 00:10:29,615 --> 00:10:33,080 están tratando con las promesas cuando se resuelven. 141 00:10:33,080 --> 00:10:36,530 Así que el componente de menú funciona correctamente y 142 00:10:36,530 --> 00:10:40,440 también el componente de detalle del plato también funciona correctamente. 143 00:10:40,440 --> 00:10:43,150 Con esto, completamos este ejercicio. 144 00:10:43,150 --> 00:10:49,130 En este ejercicio, vimos cómo pudimos actualizar nuestros servicios a 145 00:10:49,130 --> 00:10:55,990 cumplir promesas y también actualizamos nuestros componentes para poder hacer frente a las promesas. 146 00:10:55,990 --> 00:10:58,710 Esto completa este ejercicio. 147 00:10:58,710 --> 00:11:06,300 Este es un buen momento para que hagas un commit de git con el mensaje 'Promesa parte uno'.