1 00:00:01,340 --> 00:00:03,150 ‫Instructor: Hablemos ahora de 2 00:00:03,150 --> 00:00:06,643 ‫una característica sorprendente de JavaScript asincrónico llamada async / await. 3 00:00:08,040 --> 00:00:11,023 ‫Así que las promesas ya han mejorado mucho nuestro 4 00:00:11,023 --> 00:00:13,340 ‫código, pero aún podemos hacerlo mejor. 5 00:00:13,340 --> 00:00:16,400 ‫Entonces, en lugar de consumir promesas, con el método then, que 6 00:00:16,400 --> 00:00:19,380 ‫aún nos hace usar todas estas funciones de devolución de llamada, 7 00:00:19,380 --> 00:00:21,440 ‫podemos usar algo llamado async / await. 8 00:00:21,440 --> 00:00:25,040 ‫Esa es una nueva característica introducida en JavaScript en ES8, que 9 00:00:25,040 --> 00:00:27,710 ‫nos hará la vida mucho más fácil. 10 00:00:27,710 --> 00:00:29,370 ‫Por lo general, cuando 11 00:00:29,370 --> 00:00:32,020 ‫escribimos código, consumiremos promesas todo el tiempo, 12 00:00:32,020 --> 00:00:34,380 ‫pero generalmente no las produciremos tanto. 13 00:00:34,380 --> 00:00:38,510 ‫Y así, async / await lo hace mucho más fácil de hacer. 14 00:00:38,510 --> 00:00:40,070 ‫Ahora, para usar async 15 00:00:40,070 --> 00:00:42,623 ‫/ await, necesitamos crear una función llamada async. 16 00:00:44,610 --> 00:00:47,570 ‫Así que comentemos esta parte aquí, para que no 17 00:00:47,570 --> 00:00:50,520 ‫la perdamos por completo, en caso de que desee 18 00:00:50,520 --> 00:00:53,170 ‫mantenerla aquí como referencia o algo así. 19 00:00:55,240 --> 00:01:00,000 ‫Así que getDogPic es la función que vamos a escribir. 20 00:01:00,000 --> 00:01:02,210 ‫Y ahora necesitamos marcar esta función 21 00:01:02,210 --> 00:01:04,350 ‫como una función asincrónica. 22 00:01:04,350 --> 00:01:05,883 ‫Entonces usamos async 23 00:01:07,840 --> 00:01:11,390 ‫aquí, y luego creamos la función como lo hacemos normalmente. 24 00:01:11,390 --> 00:01:14,260 ‫Entonces, esta palabra clave asíncrona aquí simplemente significa 25 00:01:14,260 --> 00:01:17,430 ‫que esta es una función especial que es asíncrona. 26 00:01:17,430 --> 00:01:19,780 ‫Básicamente, uno que sigue ejecutándose en segundo 27 00:01:19,780 --> 00:01:22,350 ‫plano mientras se ejecuta el código que contiene, mientras 28 00:01:22,350 --> 00:01:25,540 ‫que el resto del código sigue ejecutándose en el bucle de eventos. 29 00:01:25,540 --> 00:01:28,680 ‫Entonces, estas funciones asincrónicas harán un trabajo 30 00:01:28,680 --> 00:01:31,873 ‫asincrónico sin bloquear el bucle de eventos, ¿de acuerdo? 31 00:01:31,873 --> 00:01:33,980 ‫Esta función asincrónica también devolverá 32 00:01:33,980 --> 00:01:35,490 ‫automáticamente una Promesa. 33 00:01:35,490 --> 00:01:37,723 ‫Pero más sobre eso un poco más adelante en este video. 34 00:01:38,840 --> 00:01:40,610 ‫Por ahora, lo que es realmente 35 00:01:40,610 --> 00:01:44,200 ‫importante saber es que dentro de una función asíncrona siempre podemos tener 36 00:01:44,200 --> 00:01:46,420 ‫una o más expresiones de espera y 37 00:01:46,420 --> 00:01:48,000 ‫así es como funcionan. 38 00:01:48,000 --> 00:01:50,453 ‫Entonces usamos await y luego Promise aquí. 39 00:01:51,540 --> 00:01:55,690 ‫Así que comencemos con este, ¿de acuerdo? 40 00:01:55,690 --> 00:02:00,320 ‫Y luego podemos guardar el resultado de eso en una variable. 41 00:02:00,320 --> 00:02:01,800 ‫En este caso, data. 42 00:02:01,800 --> 00:02:05,470 ‫Bien, entonces esto aquí será lo mismo que 43 00:02:05,470 --> 00:02:08,080 ‫tener este fragmento de código. 44 00:02:08,080 --> 00:02:10,190 ‫Entonces veamos qué pasa aquí. 45 00:02:10,190 --> 00:02:13,060 ‫Entonces, esta espera aquí básicamente detendrá la 46 00:02:13,060 --> 00:02:17,680 ‫ejecución del código en este punto hasta que se resuelva esta Promesa. 47 00:02:17,680 --> 00:02:19,960 ‫Ahora, si la Promesa se cumple, 48 00:02:19,960 --> 00:02:22,490 ‫lo que recuerda significa que tuvo éxito, 49 00:02:22,490 --> 00:02:24,660 ‫entonces el valor de la 50 00:02:24,660 --> 00:02:27,540 ‫expresión de espera es el valor resuelto de 51 00:02:27,540 --> 00:02:32,280 ‫la Promesa, que finalmente se asigna a la variable de datos, ¿de acuerdo? 52 00:02:32,280 --> 00:02:34,500 ‫Entonces, en lugar de tener la Promesa 53 00:02:34,500 --> 00:02:36,300 ‫y luego el método 54 00:02:36,300 --> 00:02:39,120 ‫then, que luego obtiene los datos como argumento. 55 00:02:39,120 --> 00:02:41,560 ‫Con async / await es mucho más simple. 56 00:02:41,560 --> 00:02:45,400 ‫Todo lo que hacemos es básicamente detener la ejecución del código 57 00:02:45,400 --> 00:02:47,960 ‫en esta Promesa aquí, esperar hasta 58 00:02:47,960 --> 00:02:52,330 ‫que regrese con su valor y luego almacenar ese valor en una variable. 59 00:02:52,330 --> 00:02:54,230 ‫Y así, el código es 60 00:02:54,230 --> 00:02:56,490 ‫incluso más fácil de entender que antes. 61 00:02:56,490 --> 00:02:58,600 ‫Y ese es el objetivo 62 00:02:58,600 --> 00:03:02,220 ‫de async / await: es hacer que nuestro código se 63 00:03:02,220 --> 00:03:04,910 ‫parezca más a un código síncrono mientras, de 64 00:03:04,910 --> 00:03:08,200 ‫hecho, sigue siendo asincrónico detrás de escena, ¿de acuerdo? 65 00:03:08,200 --> 00:03:12,810 ‫Así que sigamos con esto y copiemos las piezas de 66 00:03:12,810 --> 00:03:17,060 ‫este ejemplo anterior en el nuevo, ¿de acuerdo? 67 00:03:17,060 --> 00:03:22,010 ‫Entonces, antes, teníamos nuestra Promesa, luego teníamos nuestro controlador y luego 68 00:03:22,010 --> 00:03:24,750 ‫registramos los datos en la consola. 69 00:03:24,750 --> 00:03:26,380 ‫Así que eso es exactamente 70 00:03:26,380 --> 00:03:29,160 ‫lo que tenemos, simplemente de una manera diferente aquí. 71 00:03:29,160 --> 00:03:31,240 ‫Entonces almacenamos nuestros datos en la variable 72 00:03:31,240 --> 00:03:33,110 ‫y luego los registramos aquí. 73 00:03:33,110 --> 00:03:37,210 ‫A continuación, obtenemos la imagen del perro de la API. 74 00:03:37,210 --> 00:03:42,210 ‫Entonces tenemos la variable res, entonces esa será esta. 75 00:03:42,260 --> 00:03:44,570 ‫Entonces, nuevamente, el resultado del controlador 76 00:03:46,660 --> 00:03:50,693 ‫de entonces y esperamos esta Promesa aquí para regresar con los datos. 77 00:03:53,250 --> 00:03:55,443 ‫Espero que esto empiece a tener sentido ahora. 78 00:04:00,180 --> 00:04:04,180 ‫Entonces, después de eso, registramos esto en la consola, por lo que el 79 00:04:04,180 --> 00:04:06,440 ‫resultado de esa llamada a la API. 80 00:04:06,440 --> 00:04:09,250 ‫Y finalmente, usamos nuestra última Promesa 81 00:04:09,250 --> 00:04:12,430 ‫para escribir esa cadena en un archivo. 82 00:04:12,430 --> 00:04:15,260 ‫Así que esa es esta 83 00:04:15,260 --> 00:04:19,110 ‫Promesa aquí, y esta no resuelve ningún valor significativo. 84 00:04:19,110 --> 00:04:22,570 ‫Así que ni siquiera necesitamos almacenar nada en una variable. 85 00:04:22,570 --> 00:04:25,050 ‫Todo lo que hacemos es detener el 86 00:04:25,050 --> 00:04:28,080 ‫código aquí hasta que finalice el proceso de escritura. 87 00:04:28,080 --> 00:04:30,580 ‫Y luego inicie sesión en la 88 00:04:32,690 --> 00:04:34,003 ‫consola esta cadena. 89 00:04:35,561 --> 00:04:39,270 ‫Entonces, si comparas este código con lo que teníamos antes, 90 00:04:39,270 --> 00:04:41,640 ‫se ve mucho más limpio 91 00:04:41,640 --> 00:04:45,170 ‫y mucho más fácil de entender, ¿no es así? 92 00:04:45,170 --> 00:04:47,300 ‫Ahora, para que esto funcione, todo 93 00:04:47,300 --> 00:04:50,520 ‫lo que tenemos que hacer es llamar a esta función aquí. 94 00:04:50,520 --> 00:04:54,080 ‫Dale un guardado y, de hecho, todavía funciona. 95 00:04:54,080 --> 00:04:56,700 ‫Entonces todavía obtenemos nuestro resultado. 96 00:04:56,700 --> 00:04:58,830 ‫Todo sigue funcionando igual. 97 00:04:58,830 --> 00:05:00,570 ‫Entonces eso es asombroso, ¿verdad? 98 00:05:00,570 --> 00:05:02,560 ‫Solo una última cosa que debemos hacer aquí 99 00:05:02,560 --> 00:05:04,170 ‫es nuestro manejo de errores. 100 00:05:04,170 --> 00:05:08,080 ‫Porque en este momento, no estamos manejando errores en ningún lado, ¿verdad? 101 00:05:08,080 --> 00:05:10,750 ‫Así que aquí abajo usamos el método de 102 00:05:10,750 --> 00:05:12,650 ‫captura, pero ahora mismo, realmente 103 00:05:12,650 --> 00:05:15,260 ‫no podemos adjuntar eso en ningún lado, ¿verdad? 104 00:05:15,260 --> 00:05:16,920 ‫Entonces, en cambio, lo 105 00:05:16,920 --> 00:05:20,130 ‫que hacemos aquí es usar algo llamado try-catch. 106 00:05:20,130 --> 00:05:22,860 ‫Y en realidad eso no tiene nada que ver con async 107 00:05:22,860 --> 00:05:25,180 ‫/ await, es una característica estándar de JavaScript. 108 00:05:25,180 --> 00:05:26,853 ‫Déjame mostrarte cómo funciona. 109 00:05:28,130 --> 00:05:32,593 ‫Así que básicamente envolvemos todo nuestro código en un bloque de prueba. 110 00:05:34,150 --> 00:05:35,500 ‫Entonces, básicamente, el 111 00:05:35,500 --> 00:05:38,340 ‫código intentará ejecutar lo que sea que esté aquí. 112 00:05:38,340 --> 00:05:41,240 ‫Y luego también necesitamos un bloque de 113 00:05:41,240 --> 00:05:44,780 ‫captura, que tendrá acceso a un error si lo hay. 114 00:05:44,780 --> 00:05:47,950 ‫Entonces, si ocurre un error en este bloque aquí, saldrá 115 00:05:47,950 --> 00:05:49,960 ‫inmediatamente de este bloque, este 116 00:05:49,960 --> 00:05:52,060 ‫bloque de prueba aquí, entonces este. 117 00:05:52,060 --> 00:05:55,070 ‫E inmediatamente ingrese al bloque catch, y nos 118 00:05:55,070 --> 00:05:57,290 ‫dará acceso al error que sucedió 119 00:05:57,290 --> 00:05:59,323 ‫en el bloque try. 120 00:06:00,760 --> 00:06:04,227 ‫Así que ahora, todo lo que tenemos que hacer es tomar este 121 00:06:04,227 --> 00:06:06,510 ‫fragmento de código para este registro 122 00:06:06,510 --> 00:06:09,163 ‫de la consola, ponerlo aquí, guardarlo y ahora funciona. 123 00:06:10,320 --> 00:06:11,460 ‫Solo para causar 124 00:06:11,460 --> 00:06:14,120 ‫un error ahora, cambiemos este aquí nuevamente. 125 00:06:14,120 --> 00:06:16,970 ‫Y de hecho, no pude encontrar ese archivo. 126 00:06:16,970 --> 00:06:20,040 ‫Entonces esta Promesa aquí rechazada, ¿verdad? 127 00:06:20,040 --> 00:06:23,290 ‫Entonces, esta Promesa fue rechazada y hubo un error 128 00:06:23,290 --> 00:06:26,960 ‫y de inmediato entró en el bloque de captura y luego 129 00:06:26,960 --> 00:06:29,253 ‫registró este error en la consola. 130 00:06:31,610 --> 00:06:32,443 ‫Ponerlo de nuevo. 131 00:06:34,040 --> 00:06:36,930 ‫Y ahora, de hecho, funciona de nuevo. 132 00:06:36,930 --> 00:06:39,930 ‫Bien, así es como funciona async / await. 133 00:06:39,930 --> 00:06:42,420 ‫Así que recuerde que solo podemos usar await si 134 00:06:42,420 --> 00:06:44,450 ‫está dentro de una función asincrónica. 135 00:06:44,450 --> 00:06:46,880 ‫Es por eso que siempre se convoca, por 136 00:06:46,880 --> 00:06:49,270 ‫lo que siempre espera una barra asincrónica. 137 00:06:49,270 --> 00:06:53,070 ‫Debido a que estas dos características, pertenecen estrechamente. 138 00:06:53,070 --> 00:06:54,835 ‫Entonces, para recapitular rápidamente, 139 00:06:54,835 --> 00:06:57,260 ‫async / await nos permite en lugar de 140 00:06:57,260 --> 00:06:59,270 ‫tener todos estos controladores con estas 141 00:06:59,270 --> 00:07:01,630 ‫funciones de devolución de llamada en ellos. 142 00:07:01,630 --> 00:07:05,590 ‫Nos permite hacer que nuestro código parezca más sincrónico. 143 00:07:05,590 --> 00:07:09,180 ‫Entonces, todo lo que hacemos es usar la palabra clave 144 00:07:09,180 --> 00:07:11,340 ‫await frente a nuestra Promesa. 145 00:07:11,340 --> 00:07:13,380 ‫Y luego esperará a que esa 146 00:07:13,380 --> 00:07:15,400 ‫Promesa regrese con su resultado. 147 00:07:15,400 --> 00:07:17,000 ‫Solo recuerde que esto 148 00:07:17,000 --> 00:07:19,360 ‫es lo que llamamos azúcar sintáctico para promesas. 149 00:07:19,360 --> 00:07:22,650 ‫Entonces, simplemente hace que las promesas se vean más hermosas, 150 00:07:22,650 --> 00:07:25,610 ‫pero detrás de escena todo sigue funcionando igual con 151 00:07:25,610 --> 00:07:28,470 ‫la lógica de Promesa que les expliqué antes. 152 00:07:28,470 --> 00:07:30,240 ‫Nuevamente, esto es solo para hacernos 153 00:07:30,240 --> 00:07:32,750 ‫la vida un poco más fácil al codificar y hacer 154 00:07:32,750 --> 00:07:35,520 ‫que nuestro código se parezca un poco más a un código síncrono. 155 00:07:35,520 --> 00:07:37,430 ‫Así es como implementamos async / await. 156 00:07:37,430 --> 00:07:38,810 ‫En el siguiente 157 00:07:38,810 --> 00:07:42,863 ‫video aprenderemos un poco más sobre cómo funcionan realmente las funciones asíncronas.