Dominar el JavaScript asíncrono: devoluciones de llamadas, promesas y async/await

1. Introducción al curso: Bienvenido a Mastering Asincrónico JavaScript con la ayuda de callbacks, promesas y palabras clave de promesas y Mi nombre es Wessel, y seré tu instructor a lo largo de este curso Me emociona guiarte a través de uno de los conceptos más cruciales en el mundo del desarrollo de JavaScript, que es manejar operaciones asincrónicas Un poco complicado al principio, pero es un paso esencial en construcción de aplicaciones web eficientes sin bloqueo. En este curso en particular, desgloso temas complejos en tamaño de bocado y aplicaciones de manera fácil de entender o estás tratando con API, este conocimiento te va a desbloquear la capacidad trabajar con múltiples tareas a la vez sin ralentizar tu aplicación Entonces aquí hay un adelanto de lo que cubriremos en este curso en particular Entonces comenzaremos con callbacks y entenderemos cómo puedes hacer uso de callbacks en tu aplicación basada en script de trabajo Entonces pasaremos a las promesas, que es una alternativa moderna y poderosa a las callbacks Aprenderemos ambos conceptos o todos estos conceptos a lo largo del curso con la ayuda de ejemplos reales y de manera práctica. Y por último, exploraremos la palabra clave asíncrona y aguarda, y escribirás código asíncrono que se ve y se comporta igual que el código ve y se comporta igual que Y es simple y realmente, muy potente. Vamos a desbloquear estas posibilidades y estos conceptos a lo largo de este curso en particular, y para el final de este curso, tendrás una sólida comprensión de escribir código asincrónico en el mundo del guión Ja Este curso es para desarrolladores de todos los niveles. Si eres un desarrollador de scripts Ja de nivel avanzado que solo busca presionar sobre ciertos conceptos en un Ja Script sincrónico, entonces puedes inscribirte en este curso o si eres cualquier principiante que esté buscando explorar este concepto de callbacks, promesas, esperar asincrónico, entonces puedes inscribirte y aprovechar un Y si eres desarrollador de nivel intermedio, este curso también definitivamente te ayudará. Por lo que este curso es para desarrolladores de todos los niveles. Como dije, tanto si eres un gran desarrollador de nivel intermedio un profesional de nivel avanzado. Bien, vas a sacar algo de este curso. Ahora, ¿estás listo para subir de nivel tus habilidades ja Script? Estoy súper emocionada. Vamos a sumergirnos juntos en este curso. 2. Comienza un maravilloso viaje con una configuración inicial: Oigan, ahí, todos. Entonces, para ejecutar JavaScript, vamos a hacer alguna configuración en nuestra máquina local, ¿verdad? Ahora, por supuesto, puedes ejecutar JavaScript haciendo clic derecho así en el navegador y dirigiéndote a la consola y escribiendo tratamientos JavaScript por aquí. Pero esto no es lo ideal si quieres escribir scripts largos y grandes para aplicaciones web de grado de producción. Ahora, aquí es donde necesita una configuración en su máquina local. Entonces lo que vamos a hacer es que vamos a hacer uso de un IDE. Si no estás al tanto de este término IDE, significa entorno de desarrollo integrado, que te da el conjunto de herramientas para escribir código y ejecutarlo. Entonces voy a buscar código de Visual Studio porque eso es lo que vamos a hacer uso. Ahora bien, si ya tienes un código de Visual Studio instalado en tu sistema, o si sabes cómo instalarlo, bueno y bueno. Pero voy a suponer que no lo tienes instalado en tu sistema para beneficiar a los alumnos que no están al tanto de este proceso. Así que voy a dirigirme a este sitio web en particular, code.visualstudio.com ¿Bien? Un poco de Zoom in. Ahora, aquí, la captura de pantalla que ves es cómo se ve el código de Visual Studio, ¿de acuerdo? Y puedes ver, hay un resaltado de sintaxis que puedes ver. Por lo que la interfaz se está resaltando en un color diferente. Los apoyos de botón se están resaltando en un color diferente. Entonces estos son todos los beneficios del IDE, ¿de acuerdo? Se puede ver la bonita estructura de la carpeta en el lado izquierdo. Debajo hay un terminal con toda la codificación de colores y todo eso. Ofrece una gran cantidad de beneficios al desarrollador. Entonces, si te desplazas hacia abajo, puedes ver los soportes de código de Visual Studio. Como estoy grabando este video, soporta tantos lenguajes de programación, ¿de acuerdo? Incluso puedes agregar extensiones. Ahora bien, ¿qué son las extensiones? Las extensiones básicamente extienden o extienden la capacidad que el código de Visual Studio tiene por defecto en él. ¿Bien? Entonces, si quieres agregar algo de soporte para Python, ¿bien? Así que más soporte para Python. Para que puedas agregar esta extensión. Si quieres agregar soporte para GeucPiloto quieres hacer uso de IA mientras programas, puedes agregar Get up Copilot CC Puedes ver que hay toneladas de extensiones, y hay un mercado de extensiones desde donde puedes descargar e instalar todo esto, y es gratis. Se puede ver Git up copiloto, un poco de. Entonces todo está resaltando diferentes características. Puedes personalizar los temas de color, ajustes, perfiles. Hay muchas cosas, ¿de acuerdo? Tiene muy buena integración con el sistema de control de oción y todo eso ¿Bien? Así que puedes echar un vistazo a este sitio web y puedes navegar a través de lo que tiene para ofrecer. Pero si te desplazas hacia arriba en la parte superior, aquí vas a ver este botón de descarga para Windows, ¿bien? Ahora, si estás en Mac o Linux, vas a ver la opción de descarga para tu sistema operativo apropiado. O si no estás viendo por alguna razón, puedes ir a otras plataformas y puedes ver qué plataformas son soportadas aquí. ¿Bien? Entonces ya tengo el código de Visual Studio instalado en mi sistema, así que no lo voy a instalar, pero la instalación es muy sencilla. Es como cualquier aplicación que instales en el sistema. No hay una configuración compleja que tengas que hacer incluso para Mac, es más fácil, y puedes ver por aquí, hay múltiples versiones como si estás haciendo uso del chip Intel, puedes instalar esta. Apple Silicon, tienes esta de aquí. Y también para los sistemas basados en Linux Ubuntu por aquí, tienes opción de descargar e instalar. ¿Bien? Ahora definitivamente tengo esto instalado en mi sistema, ¿de acuerdo? Entonces aquí, lo tengo instalado como pueden ver. ¿Bien? Entonces, si lo instalas y lo abres por primera vez, esto es lo que vas a ver. Así es como te va a mostrar. Tu opinión puede diferir un poco porque ya soy usuario de código de Visual Studio, así que estoy viendo los proyectos recientes que he usado. Así que voy a cerrar esto, ¿de acuerdo? Y aquí me está preguntando eso, Oye, aún no has abierto ninguna carpeta. Sí, puedes abrir carpetas aquí en la barra lateral izquierda, y te va a mostrar la estructura del árbol. Puedes crear archivos y administrarlos desde aquí mismo, o incluso puedes clonar un repositorio. Y como dije, tiene una muy buena integración con los sistemas de control Git of Ocean. Para que puedas hacer uso de eso también. ¿Bien? Ahora bien, lo que les pediría a todos es simplemente dirigirse a su estructura de carpetas y crear una carpeta, cuando vayan a practicar Jascript ¿Bien? Entonces esta es mi carpeta donde voy a practicar Ja Script, ¿de acuerdo? Y solo abre esta carpeta por aquí en el código de Visual Studio. Abre la carpeta, puedes decir carpeta abierta y puedes navegar hasta la carpeta que acabas de crear. O alternativamente, estás en Windows, tienes una opción. Puede hacer clic con el botón derecho. Se puede decir mostrar más opción, y se puede decir abrir con código de Visual Studio por aquí. Abre con código por aquí. Esto es lo que es. Entonces esto es Visual Studio, que no es código de Visual Studio, es diferente. Entonces hay que echar un vistazo a este logo. ¿Bien? Éste. ¿Bien? Y si dices abrir, verás la carpeta abierta por aquí. Bien. Maximízala. ¿Bien? Se puede ver. Ahora tengo dos instancias o dos ventanas o código de Visual Studio por aquí. ¿Bien? Esta es mi carpeta que había creado llamada JavaScript. Y aquí es donde voy a crear todos mis archivos relacionados con el script Ja y todo lo que voy a aprender. Entonces eso es todo. Espero que también hayas podido hacer esta configuración con éxito en tu sistema. 3. Domina las devoluciones de llamadas: los fundamentos del JavaScript asíncrono: Entonces ahora es el momento en que hablamos de devoluciones de llamada. Ahora, ¿qué es una devolución de llamada? Entonces, por definición, una devolución de llamada es una función que se pasa como argumento a otra función ¿Bien? Función que se pasa como argumento a otra función y se ejecuta después completa un evento o una operación en particular. Ahora, vamos a entender en detalle en cuanto a por qué necesita algo llamado como devoluciones de llamada ¿Bien? Entonces déjame darte un ejemplo. Ahora, habrá escenarios en los que estés trabajando en algún tipo de código en el que necesites realizar algún tipo de evento externo o interfaz con algún sistema externo, ¿de acuerdo? Lo que podría llevar un poco de tiempo, puede que no sea instantáneo como las operaciones básicas, pero podría implicar un poco de tiempo que su sistema podría necesitar esperar para obtener la salida, ¿de acuerdo? Por ejemplo, una llamada API. Entonces, si estás haciendo una llamada a la API, lo que pasaría es que normalmente esperarías la respuesta de la llamada a la API, ¿verdad? No es que actives la llamada a la API y obtienes una respuesta instantánea. No es así. Activaste una llamada a la API, esperas la respuesta, obtienes la respuesta y luego usas la respuesta. ¿Bien? Así que simulemos un escenario en el que hacemos una llamada a la API. Bien. Entonces lo que haría es simular un escenario con la ayuda de la función timeout. ¿Bien? Entonces en JavaScript, tenemos algo llamado tiempo de espera, Bien, que básicamente se usa puede usarse para establecer un retraso en tu parte. ¿Bien? Entonces déjame darte un ejemplo por aquí. ¿Bien? Entonces digamos que tengo este mensaje. Bien, entonces puedo decir Console dot log por aquí. Bien. Y puedo decir inmediata. Ahora bien, este mensaje se mostrará de inmediato, ¿verdad? No es como que se exhibiría después de un tiempo por aquí, ¿verdad? Se mostraría de inmediato. ¿Bien? Pero habrá escenarios en los que tal vez quiera causar un retraso. Entonces en ese caso, se puede hacer uso del tiempo de espera. Entonces se puede decir establecer tiempo de espera por aquí. Bien. Puedo tener una función como esta, o. y esta sería una función anónima, sin parámetros. Puedo decir Csol log, puedo decir retraso. Algo así. E incluso puedo establecer el tiempo de retardo. Entonces digamos 2000. Ahora, 2000 son milisegundos, lo que significa que se retrasará 2 segundos. Para que pueda salvar esto. Se puede ver inmediato y después de 2 segundos, verá retraso por aquí, ¿verdad? Entonces así es como funciona. Si agrego tres puntos por aquí, si guardo esto, verás inmediato y luego un retraso. ¿Bien? Entonces, ¿por qué estamos aprendiendo sobre el tiempo de espera ahora mismo ? ¿Por qué estamos discutiendo el tiempo fuera? Porque vamos a hacer uso del tiempo de espera para simular un ejemplo de algo que depende de un sistema externo, como una llamada API, ¿verdad La llamada a la API llevará un poco de tiempo, ¿verdad? Al igual que, activará su solicitud al servidor, y luego el servidor procesará la solicitud. Voy a hablar con la base de datos, y se pondrá en contacto con usted con los datos. ¿Bien? Entonces hay un poco de retraso, como 1 segundo, 2 segundos, dependiendo lo rápido que sean las cosas al final, ¿verdad? Entonces habrá un retraso, y ¿cómo simulamos un retraso? Estaremos simulando el retraso en el código R con la ayuda del tiempo de espera ¿Correcto? Entonces digamos que tengo un trozo de código por aquí. Bien. Lo que voy a hacer es que voy a crear una función. ¿Bien? Entonces hay una función. Voy a llamar a esta función como buscar datos por aquí. ¿Bien? No necesito ningún tipo de parámetros por aquí. Bien. Y voy a haber establecido el tiempo de espera aquí así. Bien. Y de hecho puedo hacer uso de las funciones de flecha por aquí. ¿Bien? En lugar de la sintaxis más antigua, puedo actualizar a funciones de flecha. Y aquí, puedo decir datos obtenidos del servidor. ¿Bien? Entonces puedo datos de. Bien. Y aquí, puedo agregar un retraso de 2 segundos. ¿Bien? Entonces esto está hecho. Todo bien. Y lo que podemos hacer es que podemos llamar a esta cosa en particular. Bien. Entonces digamos que tengo, puedo decir función por aquí. Puedo decir procesar datos por aquí, ¿de acuerdo? Y aquí, puedo decir buscar datos, algo así. Bien. Yo estoy llamando a esto. Y estoy llamando a datos de proceso. ¿Bien? Digo, bien, así que estoy diciendo datos de proceso. Bien. Algo así. Lo que está sucediendo es que estoy llamando a los datos de proceso primero por aquí, como pueden ver, procesar datos. Los datos de proceso entonces llaman a buscar datos, y obtener datos está haciendo algún tipo de operación como hablar con un EPI o algo así, y está obteniendo ¿Bien? Si guardo esto, bien, verás retraso y datos del servidor después de 2 segundos. ¿Bien? Entonces por ahora, solo voy a quitar esto, solo voy a comentar esto ya que hemos entendido qué es el tiempo de espera Pero aquí, lo que estamos tratando de hacer es que estamos tratando de recuperar los datos y los datos se están recuperando en el retraso de 2 segundos ¿Bien? Ahora, digamos si estamos recuperando los datos y obtenemos algún tipo de respuesta que queremos captar Bien. Digamos que si estamos recuperando los datos y obtenemos una respuesta del servidor que queremos atrapar Entonces voy a tener un hipotético retorno por aquí, que va a representar Digamos que estos son los datos que se están representando desde el servidor. ¿Bien? Es decir datos de muestra. ¿Bien? Lo que pasaría en este caso es que puedo obtener los datos por aquí. Puedo decir que dejemos datos por aquí. Bien. Puedo hacer un registro de consola por aquí. Bien, puedo ver datos, algo así. Si guardo esto, verás que no obtengo salida. Me pongo indefinido. ¿Bien? Esto no funcionó porque buscar datos tiene un retraso, ¿verdad Entonces esta cosa tardó 2 segundos en regresar. ¿Bien? Pero lo que pasó es que esto se ejecutó antes de que esto regresara, ¿verdad? Esto tiene un retraso de 2 segundos. Entonces esta cosa no esperó a que esta cosa terminara de ejecutarse y volviera a ella con el resultado. En cambio, ejecutó esto primero. ¿Verdad? Entonces lo que pasó es que nos pusimos indefinidos. Entonces se devolvieron los datos, pero este código se ejecutó y esto no funcionó como se esperaba, ¿verdad? Ahora imagina tener una llamada a la API por aquí, llamada a la API real en lugar de tiempo de espera por aquí Estoy teniendo una llamada API, y estoy obteniendo alguna respuesta del servidor Ahora, necesito obtener necesito esperar para obtener la respuesta del servidor, ¿verdad? No puedo simplemente pasar directamente al siguiente paso, ¿verdad? Y aquí es donde entran en escena las devoluciones de llamada, ¿verdad? Esto es una necesidad de devolución de llamada. Entonces este ejemplo, se puede ver, asumiendo que aquí está teniendo algún tipo de operación que esté provocando algún tipo de retraso. Bien, de alrededor de 2 segundos. Y hemos simulado ese retraso con la ayuda de esta función de tiempo de espera establecida. Entonces asumiendo que estás teniendo una operación que está causando un retraso, bien, así es como funcionarían las cosas sin devoluciones de llamada, ¿ verdad Entonces necesitas una devolución de llamada, que es una función que se pasa como argumento a otra función y se ejecuta después complete un evento u operación en particular Ahora bien, ¿cuál es el evento en nuestro caso? El evento en nuestro caso es esta operación de búsqueda o esta operación retrasada que estamos teniendo ¿Bien? Entonces, ¿cómo funcionarían las cosas? Déjame actualizar este ejemplo por aquí, ¿de acuerdo? Entonces lo que haría es que tendría una devolución de llamada aquí, algo así Bien. Y lo que podemos hacer es dejarme o, ya sabes, en lugar de modificar este ejemplo, simplemente copiaría este ejemplo, bien. Y nosotros crearíamos, mantendría intacto este ejemplo y tendría callback por aquí, ¿de acuerdo? Y voy a decir con llamada aquí. Bien, entonces esto lo estoy haciendo para que tengamos los dos ejemplos y podamos diferenciar en cuanto a cuál es la diferencia. ¿Bien? Así que puedes ver por aquí obtener datos y estoy llamando a buscar datos con ¿Bien? Así que busca datos con devolución de llamada, puedo tener devolución de llamada ¿Bien? Esto es una devolución de llamada. Bien. Ahora, por aquí, puedo aquí estoy llamando a este proceso de datos con devolución de llamada, ¿de acuerdo? Y esto se está llamando desde aquí. Ahora como modificaría esto es que tomaría estos datos como parámetro por aquí. Bien, me desharía de esto por aquí. Bien. Entonces esta es la función de devolución que se ejecutaría una vez que se complete esta operación Entonces esta operación de timeout, una vez que esté completa, lo que tenemos que hacer es que necesitamos imprimir los datos, ¿verdad Entonces estoy aceptando datos como parámetro por aquí y estoy haciendo un registro de consola, bien. Lo que haría es cada vez que estoy llamando a estos datos de proceso, con devolución de llamada. Lo que haría es en lugar de llamar a esto, yo diría que buscar datos con devolución de llamada por aquí Yo llamaría inmediatamente a esta función por aquí, y pasaría esto como argumento, esta función así y pasaría esto como argumento, esta función Entonces estoy haciendo uso de devoluciones de llamada ahora. Y si guardo esto, bien, déjame agregar esto agrega algo por aquí con callback. ¿Bien? Y esto se hace con callback y estoy obteniendo los datos. Voy a añadir un fresco en. ¿Bien? Ahora, por aquí, en lugar de regresar, lo que puedo hacer es que puedo decir por aquí. Tengo que crear datos primero, ¿de acuerdo? Entonces voy a decir datos. Es igual a algo así. Entonces estos son los datos. Entonces digamos que estos son los datos que están siendo devueltos desde el servidor. Ahora voy a tomar estos datos y voy a decir callback y lo voy a pasar a los datos, algo así Si guardo esto, verás que el primero está indefinido. Se pueden ver datos de los datos del servidor desde el servidor, y aquí se ve con callback, ¿verdad Así que los datos del servidor se están imprimiendo dos veces debido a este registro de consola. Entonces si me deshago de esto, y si guardo esto, verás datos del servidor. Entonces este es uno, y luego tienes con datos de muestra de devolución de llamada por aquí Entonces espero que esto quede claro en cuanto a cuál es el uso de callback por aquí, cuál es el caso de uso Entonces aquí, esta era una función que se suponía que debía ejecutarse cuando los datos se devolvieran con éxito. ¿Bien? Entonces por aquí, si ves cuándo se devolvieron los datos con éxito, esta función se estaba ejecutando, como código dentro de esto, ¿verdad? Entonces, en vez de hacer esto, lo que hicimos es que estamos pasando esta función misma. Entonces aquí puedes ver que esta función en sí se está pasando por aquí a otra función, ¿de acuerdo? Esta es una función que está interactuando con la API o realizando algún tipo de operación que esté causando retraso, ¿de acuerdo? Y aquí, esta función se está pasando como una devolución de llamada. Bien. Entonces, una vez que se completa la operación, se está llamando a la función de devolución llamada con los datos y los datos vienen por aquí y está imprimiendo los datos por aquí, ¿verdad? Entonces espero que esto quede claro. Entonces, en vez de quedar indefinido ahora, lo que está sucediendo es que toda esta operación está esperando. Está esperando 2 segundos hasta que se recuperen los datos. Y luego se está llamando a este proceso datos con callback junto con los datos que se reciben del servidor, y luego se está imprimiendo en el controlador, sea cual sea la operación que desee realizar que puede agregar aquí Bien. Entonces así es como funciona la devolución de llamada, y espero que quede claro por qué importa esto ¿Bien? Ahora, una cosa más que quiero mostrarte por aquí, puedes tener devoluciones de llamada, como devoluciones de llamada para el éxito, así como errores, así como errores, Entonces eso es algo que deseo mostrarles a todos ustedes. ¿Bien? Entonces lo que puedes hacer es antes ir a callbacks con éxito y errores, también quiero mostrarte una sintaxis por aquí, que es de funciones de devolución de llamada anónimas por Bien. Entonces aquí, lo que estamos haciendo es aquí en este ejemplo en particular, si copio esto. Bien. Esto no es anónimo, ¿verdad? Entonces, permítanme actualizar estos dos el. Bien. Yo sólo voy a decir no por aquí. Bien. Y este también no Este también no por aquí. Bien. Espero que todo esté actualizado. Todo bien. Ahora lo que está pasando es que en realidad estamos pasando esta función a esta función en particular de aquí, ¿verdad? Así podemos acortar la sintaxis. Lo que simplemente puedo hacer es simplemente cortar esto, por aquí, simplemente puedo decir función. Simplemente puedo aceptar datos por aquí y puedo simplemente o, vaya, no necesitaba un paese rizado, simplemente puedo pegar esto así ¿Bien? Ahora bien, esto no es necesario, así es como se vuelve la sintaxis, con anónimo. Puedo decir con no por aquí. Puedo guardar esto y verás datos del servidor con callback con non, puedes aumentar esto a 3 segundos. Veamos cómo funciona esto. Todo bien. Se pueden ver datos del servidor, datos con devolución de llamada y datos con no O si actualizo esto a 10 segundos, debería funcionar bien. Bien, en realidad un error por aquí, esto es llamar a buscar datos con devolución de llamada Bien. Entonces sigue refiriéndose a la función cool, pero la actualizaré también con Annan por aquí Me preguntaba por qué no refleja los cambios en segundos. Así se puede ver por aquí después de 10 segundos ahora con Annan se reflejará por aquí Se puede ver. Bien, ya puede ver. Así que funcionó perfectamente bien con una sintaxis más corta. Entonces este es un ejemplo de funciones de devolución de llamada anónimas. ¿Bien? Ahora, deseo hablar devoluciones de llamada para el éxito y los errores Ahora, habrá escenarios en los que si estás haciendo una llamada a la EPA bien hay una posibilidad de que las cosas tengan éxito y no tengan éxito, ¿verdad? Entonces voy a copiar esto por aquí. Digamos que hay una operación que queremos realizar. Bien. Diré con error de éxito, algo así. Puedes tener dos devoluciones de llamada por aquí. Éxito, callback y puedes tener error, callback, algo así Bien. Entonces lo que pasa es por aquí dentro, dentro del tiempo de espera establecido, puedes tener algún código Digamos que tengo un código. Cuajada. Bien. Se me ha ocurrido un error, digamos, voy a mantener estos dos ciertos. Digamos que aquí es un valor booleano. Bien. Ahora, vaya, si ocurrió un error, entonces lo que necesito hacer es llamar a Success callback, Llamada exitosa con algunos datos, puedo pasar algunos datos como error Cordón o algo así. ¿Bien? Y si este no es el caso, entonces puedo decir que se por aquí. Bien. Y en vez de eso, puedo decir, bien, así que si no es un error, entonces probablemente puedas tener lo normal pasando así. Bien, puedes quedarte con esto. Y en lugar de llamar a callback por aquí, dirás, vaya, esto no debería ser Esto debería ser una devolución de llamada exitosa. Y en realidad, si es un error, llamarás al error callback por aquí, algo así, ¿verdad Entonces así serán las llamadas, ¿verdad? Y ya pueden ver, entonces cambiaremos esto a cuatro, bien, 4,000 milisegundos por aquí Bien. Ahora lo que puedes hacer es que puedes tener estas dos devoluciones de llamada también creadas por aquí ¿Bien? Entonces aquí, puedo decir función. Bien. Así que funciona en el éxito así y puedes decir datos por aquí. Bien. Y aquí abajo, se puede dice no confirmar. Debería ser el registro de puntos de consola por aquí, y se puede decir éxito Bien. Y puedes tener datos impresos en la consola. Bien. Ahora, lo mismo que puedes duplicar por error también. Entonces se puede decir por error, Bien, así. Y en lugar de éxito, se puede decir error y se mostrarán los datos. ¿Bien? Entonces estas son dos funciones. Ahora lo que puedes hacer es al llamar a esto, al llamar a los datos de fetch Entonces, si dices buscar datos con éxito y error, puedes decir sobre el éxito, Bien. En el éxito primero porque tienes éxito callback definido primero, ¿verdad Y luego en el error, algo así. Ahora bien, si guardas esto, deberías ver en error que se está imprimiendo porque hemos simulado la situación de error. Se puede ver error error ocurrido, ¿verdad? Para que puedan ver, y esto se está imprimiendo. Ocurrió un error, ¿verdad? Ahora puede actualizar este ejemplo al ejemplo de función anónima. Entonces, ante todo, este es un ejemplo de éxito y error. ¿Bien? También puedes aleatorizar esto, así que yo puedo hacer uso del punto matemático Punto matemático aleatorio por aquí. Bien. Si dices matemáticas punto aleatorio, es un método dentro del objeto matemático. Entonces puedes ver que me está dando valores aleatorios 0-1. Se puede ver aquí en la consola. Bien. Ahora puedo decir matemática punto aleatorio menos de 0.5. Me va a dar un valor booleano, verdadero, a veces verdadero, a veces falso Para que pueda tener esta condición copiada y agregada por aquí. ¿Bien? Entonces este error ocurrió la condición ahora es dinámica, ¿verdad? Entonces si guardo esto, se puede ver el error, se puede ver el error y éxito va a ser bastante dinámico. Ahora, si lo guardo de nuevo, ahora era situación de error, también puede ser éxito. ¿Bien? Se pueden ver los datos de muestra de éxito, ¿verdad? Puedes actualizar esto a una función anónima, así puedo cortar esto por aquí. Bien. Se puede decir así. Bien. Y entonces tienes esto por aquí. Bien. Así que esto está hecho, ¿de acuerdo? Y entonces puedes tener el error uno también. Ahora, también puedes encadenar devoluciones de llamada, ¿de acuerdo? Entonces déjame mostrarte cómo puedes hacer eso. ¿Bien? Callbacks tan encadenados. Todo bien. Entonces digamos que tengo una función. Bien, entonces voy a tener esta función por aquí. Bien. Déjenme llamar a esto. Oh, lo siento. Déjame copiar esto. Entonces voy a llamar a esta función como paso uno. Bien, tiene una devolución de llamada, establecer tiempo de espera. Y aquí, voy a tener registro de consola por aquí, que dice el paso uno hasta aquí. Bien, algo como esto. Estoy llamando Estoy teniendo una devolución de llamada también por aquí, que no acepta un parámetro Bien. Y en vez de 10 mil, me quedaré con mil por aquí. Entonces esta es una función que tengo con una devolución de llamada. Este es el paso uno. Digamos que tengo un paso dos. Así que estoy haciendo un conjunto múltiple de operaciones por aquí. ¿Bien? Este es el paso dos. Diré que este es el paso dos otra vez por aquí. Bien. Volveré a venir aquí. Diré que este es el paso tres, algo así. Este es el paso tres otra vez por aquí. Bien. Entonces así por aquí. Ahora bien, lo que puedo hacer es decir el paso uno. Entonces primer estilo llamado paso uno. Bien. Dentro del paso uno, voy a tener una función de flecha como esta, Y aquí puedo decir paso dos. Entonces dentro de la función flecha, voy a decir paso dos. Ahora, el paso dos necesita un parámetro. En lugar de eso, voy a pasar de nuevo una función de flecha por aquí. Bien. Y luego por aquí, volveré a tener el paso tres, algo así. Diré algo como esto. Así y por aquí, así. Bien. Y aquí, solo mencionaré el registro de puntos de consola todo completado, ¿de acuerdo? Algo así. Todo terminado. Voy a decir pasos, ¿de acuerdo? Voy a añadir punto y coma aquí. Y voy a ver CV Bien. Ahora ve el paso uno hecho, paso dos hecho, el paso tres hecho y todos los pasos completados. Todo bien. Al final, se ven datos de muestra de éxito porque esto tuvo mucho tiempo de espera fue más largo, sí Y este también tuvo un tiempo de espera más largo, ¿verdad? Pero aquí se puede ver que el paso uno, paso dos y el paso tres se completaron, ¿de acuerdo? Y así es como se puede hacer una operación que implique múltiples operaciones asíncronas, ¿bien Ahora, también, me gustaría destacar una cosa más por aquí como esta cosa de encadenar callbacks también se conoce como callbacks Entonces, si buscas en Google o si estás leyendo sobre JavaScript o callbacks, te encontrarás con este término llamado callbacks Hell, y esto es lo que es En donde estás encadenando devoluciones de llamada o creando una pirámide de devoluciones de llamada, en donde las devoluciones de llamada están anidadas una dentro de la Entonces están anidadas una dentro de la otra. Ahora bien, esta no es una práctica recomendada, cierto, porque también está haciendo que el código sea más difícil de leer y mantener. Entonces, cualquiera que lea tu código mañana, bien, sería difícil para él entender lo que está pasando aquí, ¿verdad? Y si tienes más call wax o más operaciones asíncronas, más códigos APA que estás haciendo, entonces sería aún más difícil e incluso podrías cometer errores como desarrollador ¿Verdad? Entonces sí, esto es lo que es el infierno de devolución No es una práctica recomendada, pero deseo explicarles y enseñarles este concepto a todos ustedes, ¿de acuerdo? Ahora, incluso puedes hacer uso de devoluciones de llamada, bien, usar devoluciones de llamada con métodos de matriz ¿Bien? Así que las matrices tienen algunos buenos métodos que son útiles aquí. ¿Bien? Déjame demostrarte esto, así puedo decir número por aquí o debería decir números. Bien. Y tengo uno, dos, tres, cuatro, cinco y seis bien. Bien. Ahora, se puede decir, digamos que deseamos duplicar o deseamos obtener una matriz donde cada número se duplique en esta matriz. Entonces puedo decir vamos números duplicados, bien. Y por aquí, lo que puedo hacer es que puedo decir números enseñados mapa. Bien, entonces voy a tener mapa por aquí, y aquí puedo ver la función. Voy a tener una declaración de función. Esto no va a tener nombre. Incluso puedes crear una función usando funciones de flecha, pero lo estoy haciendo de esta manera y puedes ver números de retorno en dos, algo así. Sólo estás duplicando el número por aquí. ¿Bien? Y luego por aquí, estás viendo el registro de la consola. Bien, así que voy a decir registro por aquí. Y se puede decir números dobles, algo así. Bien. Entonces ahora, bien, así que estamos recibiendo un error que la referencia numérica no está definida. ¿Bien? Así que los números de función. Bien, así que esto tiene que ser números. O puedes llamar a esto como número, bien, no números. Numbers es el nombre de la matriz de todos modos. Entonces, si guardas esto, ya verás, esta es la salida. ¿Bien? Entonces lo que está sucediendo es que esta función de mapa está tomando callback como entrada, bien, porque esto también es función y esta también es función ¿Puedes ver? Entonces así es como está operando. ¿Bien? Así que los métodos de mapa toman una función de devolución de llamada y la aplican a cada elemento en las matrices ¿Bien? Entonces sí, eso es sobre las llamadas, está bien. Ahora, volviendo a la teoría, ¿de acuerdo? ¿Qué son las callbacks? Entonces ya eres bastante claro. Callbacks es una función que se pasa como argumento a otra función y se ejecuta después de que se completa un evento u operación en particular se completa un evento u operación Por lo que te permiten controlar el orden de ejecución, manejar múltiples tareas, y también responder a eventos, derecho. Pero ten en cuenta, el uso excesivo de devoluciones de llamada por aquí, como vimos, puede llevar al infierno de devolución de llamada Bien, y esta no es una buena práctica, ¿verdad? Entonces sí, estas son devoluciones de llamada, y espero que esto haya sido útil 4. Promesas desbloqueadas: cómo escribir un código asíncrono más limpio y manejable: Entonces ahora es el momento de que hablemos promesas y de cómo pueden hacernos la vida más fácil. Entonces, como dice la definición aquí, las promesas proporcionan una forma más limpia y estructurada de manejar operaciones asincrónicas Por supuesto, cuáles son estos métodos, hablaremos de ellos. Pero primero, entendamos qué son las promesas. Entonces, siempre que estés haciendo una operación asincrónica, una forma de hacerlas es una Entonces, si pago algún código por aquí, esta es una operación asíncrona que está sucediendo, y estoy haciendo uso de callbacks Entonces se puede ver que esta es una función que está haciendo la operación. Estoy aceptando un parámetro llamado callback, y tengo esta operación asincrónica en la que puedes asumir que estoy recuperando algunos datos del EPI, y estos son los datos que y estos son los datos Es un objeto. Y entonces estoy llamando a esta función de devolución de llamada por aquí una vez que se obtienen estos datos, ¿verdad? Ahora bien, esta función de devolución de llamada es en realidad esta función que se está pasando Entonces cuando estoy llamando a G data, estoy pasando esta función anónima con la ayuda de la sintaxis de la función de flecha, y se puede ver que esto se está llamando una vez que se hace Get data. Entonces, si guardo esto, verás después de 1 segundo, estos datos se están imprimiendo en la consola. Entonces esto es callbacks, pero las promesas es un mejor enfoque cada vez que se trabaja con una operación asincrónica, ¿ trabaja con una operación asincrónica Porque si estás haciendo muchas operaciones asincrónicas, entonces la devolución de llamada podría llevar al infierno de devolución de llamada en el que podría ser difícil para ti administrar diferentes callbacks cuando las estás usando extensamente, ¿verdad? estás usando extensamente, ¿verdad Entonces las promesas son un mejor enfoque. Ahora, permítanme convertir este ejemplo en un ejemplo con promesas, ¿de acuerdo? Así que voy a escribir el mismo ejemplo donde realmente estoy obteniendo estos datos de JCN, digamos, de un servidor, y lo haré con la ayuda de promesas, ¿de acuerdo? Entonces voy a copiar esta función, antes que nada, ¿de acuerdo? Y voy a deshacerme de esta parte de aquí, porque esto es lo que vamos a cambiar. Ahora, en lugar de tener este tiempo de espera y luego hacer una devolución de llamada o hacer una llamada a esta función de devolución de llamada, lo que voy a hacer es Voy a decir que devuelvas una nueva promesa, ¿de acuerdo? Promételo, algo como esto. Bien. Ahora bien, si pasas el cursor sobre esto, déjame ver si conseguimos una documentación Bien, puedes ver por aquí. Así que esto es una promesa, ¿de acuerdo? Y lo vas a tener tan dentro de la promesa por aquí, vas a tener una función, ¿de acuerdo? Entonces aquí dentro, voy a tener una función de flecha para encontrar así. Bien. Al igual que así. Bien, y voy a añadir un punto y coma por aquí Bien. Ahora bien, esta promesa necesita esta función, y dentro de esta función, se necesitan dos parámetros. Ahora bien, ¿cuáles son estos parámetros? Una será resuelta, y otra será el nombre rechect por aquí ¿Bien? Ahora bien, ¿por qué tenemos determinación y por qué tenemos rechect Ahora, siempre que estés haciendo una operación asíncrona, puede haber dos estados que pueden ocurrir Una es que la operación asíncrona fue exitosa. Y el segundo estado puede ser que la operación asíncrona que realizaste no tuvo éxito ¿Bien? Entonces aquí, si ves un poco de documentación, verás como si tuvieras dos argumentos o devolución de llamada resuelta, resuelta significa que la operación fue exitosa Entonces resolver es solo un término que se usa para decir que la devolución de llamada o lo que sea que ocurrió la operación fue exitosa, o y rechazar, es decir, que ocurrió el error o por alguna razón, la operación no tuvo éxito Entonces estamos teniendo dos callbacks por aquí, resolver y rechect ¿Bien? Ahora, lo que vamos a hacer aquí es que voy a tener la lógica. La operación asíncrona viene aquí. Entonces, ¿cuál es mi operación asíncrona? Voy a tomar esta operación asíncrona, voy a agregar por aquí ¿Bien? Ahora, un cambio más que necesitamos hacer es aquí estamos llamando callback, ¿verdad? Así que me desharé de la devolución de llamada por aquí. No necesitamos devolución de llamada. Y en lugar de callback, voy a decir resolver. Por aquí, algo como esto. Entonces lo que estoy haciendo es que una vez que la operación esté completa, estoy diciendo resolver esta llamada particular vuelta. Eso es lo que estoy haciendo. ¿Bien? Y se llamará a la resolución, y luego quien sea quien llame, ahí podremos realizar los siguientes pasos. Entonces lo que puedo hacer aquí es que puedo decir obtener datos, así. Bien, entonces llamaré para obtener datos. Pero ahora esto está devolviendo una promesa, ¿verdad? Entonces puedo decir punto. Ahora bien, hay dos métodos que hay que tener en cuenta entonces y atrapar por aquí. Bien. Ahora, ¿qué es entonces? Si se aferra entonces, podría ver su documentación. Bien, no los estoy viendo. Pero entonces en realidad es el cumplimiento exitoso de esta promesa. ¿Bien? Y si quieres manejar el error, entonces tienes que hacerlo en caché. Así que aquí se puede ver, Data, y voy a tener una función de flecha por aquí, algo así, y voy a decir iniciar sesión por aquí. Bien, y voy a decir datos, algo así. Bien. Y entonces puedo copiar esta misma cosa por aquí. En lugar de Tita, puedo ver error por aquí, así. Y en lugar de consola dot log, puedo registrar el error en este formato y puedo guardarlo. ¿Bien? Y se puede ver la salida aquí. ¿Bien? Se puede ver así que la salida que estoy obteniendo es sólo una. Idalmente debería estar consiguiendo dos, uno para este y otro para este Pero parece que hay un problema porque los nombres de las funciones son los mismos aquí. G datos, obtener datos, en todas partes, obtener datos. Bien. Entonces voy a llamar a este, obtener datos. Bien. Veré con promesa por aquí, algo así. Bien. Y en lugar de llamar a obtener datos por aquí, diré que obtenga datos con promesa. ¿Todo bien? Entonces ahora hay algún tipo de separación en los nombres de aquí. Esto es obtener datos, y esto obtener datos con promesa. Y si guardas esto, verás que esta es de la primera y esta es de la segunda. ¿Bien? Entonces funciona absolutamente bien, y se puede ver lo que pasó por aquí. ¿Bien? Entonces lo que hicimos es definir esta función obtener datos con promesa con un retorno por aquí. Entonces este es un retorno. Ahora está devolviendo una promesa. ¿Correcto? Ahora, dentro del constructor promesa. Entonces, al llamar a esta promesa o al crear esta promesa, dentro de este constructor, simulamos una operación asincrónica de recuperación de datos usando set timeout Bien, así que cualquier operación que estés haciendo irá dentro del constructor es algo que debes tener en cuenta. Bien. Ahora, una vez que se recuperen los datos por aquí, ¿de acuerdo? Una vez recuperados los datos, llamamos a resolver aquí. Bien. Ahora, se llama a la función de resolución aquí para cumplir la promesa con los datos de recuperación. Entonces estamos pasando en los datos también porque queremos cumplir esta promesa ahora con los datos recuperados. Y entonces lo que está pasando es cuando llamas obtener datos con promesa por aquí, ¿de acuerdo? Estás haciendo uso de entonces y atrapa aquí. Entonces estos son dos métodos que pueden ayudarte a manejar el cumplimiento exitoso de la promesa o el fracaso de la promesa. Entonces se está utilizando para manejar el cumplimiento exitoso. Entonces aquí si te desplazas hacia arriba cuando se cumple la promesa y atrapas cuando se rechaza la promesa. Entonces puedes ver si hay algún error, la promesa es rechazada, luego se ejecutará la caché. ¿Bien? Entonces puedes ver que esta es la sintaxis de promise, y de esta manera, proporcionan una forma más limpia y estructurada de manejar operaciones asincrónicas en JavaScript Todo bien. Solo ten en cuenta que la operación que quieras hacer, bien, irá por aquí dentro del constructor. Se puede ver todo esto por aquí, todo esto está dentro del constructor de promesa. ¿Bien? Entonces esta es la promesa. Y entonces si veo control, C, se puede ver que todo esto va dentro del constructor. Eso es lo que se supone que debes tener en mente. Ahora bien, esta definición se está complicando un poco porque solo dice que proporciona una forma más limpia y estructurada manejar esas operaciones de sincronización. ¿Bien? Entonces también se pueden pensar en promesas de esta manera que las promesas en realidad están representando un valor que puede estar disponible ahora. Puede estar disponible en el futuro o puede que nunca esté disponible porque si está disponible ahora, bien, está disponible. Si no está disponible, entonces está siendo buscada, ¿verdad? Entonces ese es un estado. Y si nunca está disponible significa que se ha producido un error. Entonces estos son los tres estados que normalmente tendría una promesa. ¿Correcto? Entonces sí, eso es sobre la promesa. Ahora, déjame mostrarte el escenario de fracaso también por aquí. Bien, entonces lo que voy a hacer es que voy a venir aquí. Sólo voy a duplicar este código aquí con promesas, y voy a agregar dos puntos. Voy a decir éxito y fracaso por aquí, algo así. Voy a llamar a todo esto como uno solo. Uno tan solo diferenciando el nombre de la función para que no haya conflictos como tal ¿Bien? Entonces estamos trabajando con esto ahora, uno. Bien. Así que consigue datos con la promesa uno. Ahora, por aquí, voy a tener, digamos, tengo un éxito o un éxito o una tasa de fracaso definida. Bien. Entonces dentro del tiempo de espera, puedo decir dejar que el éxito Bien, entonces voy a tener una tasa de éxito del 50%. Entonces voy a decir matemáticas punto al azar por aquí. Y si las matemáticas aleatorias son menos de 0.5, ¿de acuerdo? Por lo que va a dar un verdadero o falso. Entonces el éxito tendrá booleano, ya sea verdadero o falso, Y luego por aquí, lo que puedo hacer es que puedo decir si declaración por aquí, ¿de acuerdo? Y puedo decir si el éxito. Bien, entonces estamos obteniendo estos datos, así. Voy a mover esto adentro. Todo bien. Y si no tiene éxito, entonces tengo un bloque s por aquí. Bien. Y dentro de sí, puedo decir rechazo. ¿Bien? Entonces, ¿para qué sirve resolver? Resolver es para resolver la promesa. Significa que la captura de datos ha sido exitosa, por favor resuelva esta promesa Ahora bien, si se ha producido un error, llamarás a rechazar por aquí y pasarás un mensaje. Se puede pasar un mensaje. Puedes proporcionar cualquier razón como error y alguna razón por aquí. Entonces solo diré alguna razón. Bien. Puedes agregar el motivo dependiendo de tu escenario, bien. Pero así es como va a ser, ¿de acuerdo? Y tengo FLs y no hay nada más. ¿Bien? Entonces ahora, si guardas esto para que tengas éxito por aquí. Si vuelves a guardar esto, veamos, puedes ver el error por alguna razón. Entonces esta condición falló, y estás recibiendo un error por aquí. Entonces esta promesa fracasó, en realidad. ¿Bien? Entonces así es como se puede manejar el éxito y los fracasos. ¿Bien? Entonces si quieres si tienes un escenario, no manejamos este escenario, solo dijimos resultado. ¿Bien? Entonces solo se encargó del resultado. Pero ahora si hay un error o algo así, podrías, por ejemplo, tener una comprobación de los datos que estás obteniendo del servidor. Si los datos recibidos son nulos, entonces podrías decir rechazar y hay algún error. ¿Bien? Entonces en ese caso, si se está llamando a rechazo, entonces la caché pasa a ejecutarse por aquí, y lo que sea que haya en la caché, eso se ejecuta. Todo bien. Entonces sí, este es un ejemplo de éxito y fracaso con promesa. Ahora habrá escenarios al trabajar con promesas en los que quizás quieras ejecutar una pieza de código independientemente de si la promesa se cumple o se rechaza, ¿verdad? Entonces en ese caso, finalmente tienes esto, ¿de acuerdo? Se puede decir por fin por aquí. Bien. Y de manera similar, como si tuvieras las otras dos cosas definidas, puedes decir consola dot log, o, y puedes decir, finalmente. Bien. Yo sólo añadiría este mensaje. ¿Bien? Puedes tener cualquier tipo de mensaje por aquí. Entonces esto se ejecutará independientemente de que haya éxito o fracaso. Entonces, si guardo esto, ya verás, ¿de acuerdo? Y se puede ver que hay un fracaso. ¿Bien? Si vuelvo a guardar esto , bien, estoy obteniendo la misma salida. Bien, esto vuelve a ser un fracaso. puede ver que esta vez es éxito, y finalmente se obtiene también. ¿Bien? Entonces finalmente también forma parte. Pero sí, lo principal resuelve alrededor de entonces y atrapar por aquí. ¿Bien? Ahora, déjame mostrarte un escenario más, bien, en el que quizás quieras tener múltiples promesas juntas. Entonces tomemos un ejemplo en el que queremos ejecutar múltiples promesas en paralelo. ¿Bien? Entonces puedes decir múltiples promesas por aquí. Bien. Ahora, permítanme crear múltiples promesas. Diré que prométeme uno. ¿Bien? ¿Cómo crearías esto? Solo llamas a buscar datos con promesa, ¿de acuerdo? Así que busca datos con promesa. Bien. Déjame copiar esto. Bien, no es buscar, en realidad, es obtener datos con la promesa uno. Perdón por eso. Bien. Entonces sí, a esto lo llamo, bien. Y en esta llamada, devolverá un objeto promesa. Bien, así que voy a conseguir eso por aquí. ¿Bien? Entonces este es uno, esto es dos, y este es tres. Necesito cambiar el nombre de esto. Serán dos, y esto es tres. Bien. Entonces se crearon tres promesas. Ahora, digamos que deseo que todas estas tres promesas se ejecuten en paralelo. Entonces lo que puedo hacer es que puedo decir promesa por aquí punto A. Se puede ver todo este método. Y aquí, puedes pasar en una matriz con la promesa uno, la promesa dos. Y prométeme tres, algo así por aquí. Bien. Y luego por aquí, puedes decir, entonces, así, y puedes tener los resultados por aquí. ¿Bien? Entonces, una vez hecho esto, digamos que deseo hacer esto. Bien. Así que voy a tener esto y en vez de usted puede decir todo hecho. Bien. Entonces voy a hacer todo este mensaje, algo así. ¿Bien? O de lo contrario también puedes agregar un caché, así puedo copiar esto por aquí. Bien. Y aquí puedo agregar un cache. Todo bien. Y esto terminará con punto y coma. Para que pueda salvar esto. Y ya verás. Entonces estos dos son ejecutados, ¿de acuerdo? Y espera. Permítanme encomiar estas dos llamadas porque ahora estamos haciendo muchas llamadas, ¿de acuerdo? Así que podrías obtener o dejarme agregar un inicio de sesión de consola entre ellos. Bien. Entonces lo que haría es copiar este registro de consola por aquí. Bien. Y aquí, yo diría múltiples. Algo como esto. Bien. Entonces ahora verías que se está imprimiendo múltiplo. ¿Bien? Bien, en realidad es una llamada asincrónica, Entonces se está imprimiendo en la primera. Bien. Lo que tendría que hacer lo que tendré que hacer es tener que desactivar estas llamadas. Eso sería lo mejor, creo. ¿Bien? Entonces aros, deshabilitarían esto también Bien. Y deshabilitaría éste con éxito y fracaso. Al igual que así. Bien. Y voy a ver si esto. Bien. Ahora puedes ver que este fue rechazado. Bien. Entonces estoy recibiendo este error. Déjame entender el escenario de éxito por aquí. Bien. Así que solo estoy recibiendo error. Bien. Bien, para que veas todo hecho por aquí. Y todas las tres promesas fueron exitosas. Se puede ver por aquí. Bien. Entonces así es como es. Puedes agregar si quieres. No agregamos un mensaje personalizado para el fracaso. Se puede ver al menos una promesa fracasada. ¿Bien? Y si te ahorras esto, verás que al menos una promesa falló. Entonces una cosa que me gustaría mencionar por aquí es que si alguna promesa falla, bien, entonces el resto también se marca como fallida. Alguien falla, si alguien falla, puedes ver, puedes ver esto en la salida de aquí. Entonces cualquiera está fallando, y esa es la razón por la que estás obteniendo este fracaso como salida. Ahora bien, si vuelvo a ejecutar esto, bien, déjeme decir esto. Se puede ver ahora que los tres fueron ejecutados con éxito. Entonces estás viendo todo hecho como la salida. ¿Bien? De manera similar, hay un método más, uh un método más, que dice, que es el método de carrera. ¿Bien? Entonces ahora habrá escenario en el que quieras hacer uso en el que quieras obtener la salida o encontrar la primera promesa resuelta, ¿verdad? Entonces, en ese caso, lo que puedes hacer es decir promise dot as, y como si tuvieras la matriz de promesa por aquí, puedes hacer esto. Bien. Y se puede tener una sintaxis similar. Así que en lugar de, uh, en vez de hacer uso de todo, estás haciendo uso de rayos por aquí. Eso es todo, ¿de acuerdo? Y puedes ver esto hecho, bien. Y aquí se puede ver la carrera. Entonces solo voy a mencionar una serie en todas partes para que sepamos que esta salida es de s. bien. Voy a guardar esto. Para que puedas ver den como se hace esto. Entonces esta fue ejecutada por aquí. Esto es de raza. Bien. Así se puede ver un error de promesa fallida e incluso como hubo alguna promesa fallando. ¿Bien? Así que sí, así es como funcionan los rayos y la promesa, bien. raza esencialmente te conseguirá la promesa de fuerza que resuelve y todo te ayudará a ejecutar o cumplir todas las promesas en paralelo. Bien. Entonces estas son promesas, y espero que esto haya sido claro. Entonces, en pocas palabras, las promesas proporcionan una manera más limpia y un enfoque más estructurado para manejar una operación sincrónica, ¿de acuerdo? Entonces catch y también finalmente son algunos de los métodos que puedes hacer uso de, ¿de acuerdo? Y estos son los métodos que te ayudan a trabajar con promesas. 5. async/await: la forma moderna de manejar JavaScript asíncrono: Entonces ahora es el momento de que comencemos a hablar de espera asincrónica. Ahora, asincrónico y esperar nos ayudan a simplificar aún más nuestro código asincrónico Ahora, por aquí, tengo un ejemplo ya escrito en el que tengo esta función, que es devolver una promesa, ¿de acuerdo? Y dentro de la promesa, en realidad estamos teniendo este código asíncrono o en donde estoy simulando un retraso por aquí de 1,000 milisegundos Y tengo una tasa de éxito por aquí del 50% elegida al azar, y pueden ser éxito o fracaso por aquí, ¿de acuerdo? Y estoy haciendo uso de esto así. Entonces si se resuelve una promesa, entonces esta se está utilizando, y si no lo es, si hay un error, entonces hacemos uso de catch. Entonces esta es la sintaxis cuando se trabaja con promesas. Ahora el problema de aquí es que esto todavía no es legible. La forma en que estás consumiendo esto no es legible. Y con la ayuda de estas dos palabras clave, puedes simplificarlo aún más. ¿Todo bien? Entonces déjame darte un ejemplo, así que solo comentaré esto, ¿de acuerdo? Lo que puedo hacer es digamos que deseo consumir esto, obtener datos. Entonces lo que puedo hacer es que puedo decir función por aquí, y voy a decir buscar datos o recuperar datos, llamémoslo, y voy a buscarlo de manera sincronizada Bien. Ahora aquí, lo que puedo decir es que puedo decir vamos datos y puedo decir obtener datos por aquí. Bien. Así que obtener datos es el nombre de nuestra función por aquí. ¿Bien? Entonces también llamaré a esto obtener datos en lugar de buscar datos. ¿Bien? Entonces tengo las cosas de esta manera ahora, y permítanme agregar también esta declaración de registro por aquí, registro de puntos de consola, en donde estoy imprimiendo datos. Ahora, claro, veamos cuál es la salida de aquí. Bien. Entonces no vamos a conseguir nada por aquí. ¿Bien? Entonces lo que haría es que llamaría a esta función. Bien, se me olvidó llamar a esta función en definitiva. Bien. Yo vería si esto. Bien, entonces ahora estás recibiendo una promesa, ¿de acuerdo? No vas a obtener el resultado, ¿de acuerdo? ¿Cómo obtendrías el resultado? Entonces, para obtener el resultado usando la palabra clave Async y wait, puedes hacer uso de asincrónico así y puedes agregar wait por aquí Así. Bien. Y ahora obtendrías los datos, ¿ves? Todo bien. Entonces esta es la sintaxis, bastante legible y bastante más simple que esta. ¿Todo bien? Entonces esto todavía no es legible, y esta cosa lo simplifica aún más ¿Bien? Ahora, un fregadero y un peso dependen el uno del otro. Si intentas quitar un fregadero y si intentas guardar, verás que este Awight solo es válido en funciones de sumidero Entonces necesitas tener un fregadero. Si intentas eliminar aguarda por aquí, y si intentas guardar esto, obtendrás una promesa, y podrás ver que esto es un error. ¿Bien? Entonces necesitas hacer uso de ambos por aquí para obtener el resultado correcto, correcto. E incluso puedes hacer manejo de errores por aquí. Por lo que puede utilizar el manejo de errores. Puedes hacer manejo de errores con la ayuda de try catch simple, y cualquiera que sea el error que obtengas, puedes registrarlo de esta manera, algo así. Y puedes mover este código dentro. Bien. Y aquí se puede decir, puedo agregar error. Algo así. Bien. Ahora bien, si hay una falla por aquí, verías este mensaje de error. ¿Bien? Se puede ver error y error por alguna razón. Todo bien. Ahora, el beneficio aquí de la sintaxis es uno, es legible. ¿Bien? Y el beneficio es que puedes ejecutar múltiples operaciones asincrónicas en paralelo ¿Bien? Para que pueda tener uno más por aquí. Bien. Entonces llamemos a esto como llamemos a esto como uno por aquí. ¿Bien? Diré que esta es una. Bien. Y esta cosa voy a añadir por aquí. Diré que son dos. Bien. Y voy a cambiar rápidamente el nombre de la variable por aquí. Diré que este es el dato uno. Se trata de datos dos. Esto se convierte en datos uno, datos dos, déjame guardar esto y déjanos ver. Se puede ver que esto es un error. Ahora, una promesa fracasó, ¿verdad? Entonces esto se ejecutó. El resto del bloque no fue ejecutado. Pero si vuelvo a ejecutar esto, verás uno y luego falló la segunda promesa. Una fue ejecutada, pero la segunda promesa fracasó. Anteriormente, la primera promesa había fracasado. Déjame guardar esto otra vez. Verás uno y dos. Esta vez, ambos tuvieron éxito, ¿verdad? Puedes tener operaciones paralelas como esta, y como puedes ver aquí o puedes es bastante simple de entender y la sintaxis también es fácil. ¿Bien? No hay cosa complicada involucrada. ¿Bien? Para que puedas ver primero un campo. Entonces claro, nada se ejecutará en este bloque, ¿verdad? Así que voy a guardar esto otra vez. Veamos. Bien. Pero en vez de esto, permítame llamarlo a esto o permítame, aumentar la tasa de éxito para digamos 90%. Uno, dos y tres. Entonces aumento la tasa de éxito, y se puede ver que los tres tuvieron éxito, ¿verdad? Entonces así es como funciona, y llegando a la documentación, creo que Await simplifica el código asíncrono haciendo que parezca código haciendo que parezca Entonces se ve como código sincrónico, Javascript normal, bien, más fácil de leer y más fácil de mantener. E incluso para la grandeza, esto es bastante simple, ¿verdad? La gente puede fácilmente entender lo que está pasando, ¿de acuerdo? Entonces con la ayuda de Await, estamos diciendo que espere a que se complete esta operación porque esta es una operación asíncrona Entonces espera, termina esto, luego espera a que esto Termino esto, entonces espera a que esto se complete. Y porque estamos haciendo uso de aguarda, tenemos que marcar esta función como un sumidero por aquí. ¿Bien? Por lo que mejora la legibilidad y hace que el manejo de errores sea sencillo con Try Catch Entonces por aquí, tenías que hacer uso de caché, ese momento y atrapar. Ahora por aquí, es bastante sencillo, como JavaScript estándar, prueba y caché, ¿de acuerdo? Y puedes usar asincrónico con operaciones multiplesincrónicas, HTTP y más. Todo bien. Entonces todo eso es posible, y es increíble Como estas cosas se están usando mucho, así que si estás revisando algún código JavaScript o si estás trabajando mucho con EPI, que, por supuesto, lo harás ya que estás aprendiendo JavaScript, bien, verás muchas estas dos palabras clave Todo bien. Entonces estos dos son importantes. Al igual que, si quieres ir avanzado a Javas Crave, quieres usar cosas como reaccionar y todo, bien, estos Await and a sink es algo que deberías entender muy ¿Todo bien? Entonces espero que esto sea útil y espero que hayas podido seguirlo. 6. Conclusión del curso: Bueno, enhorabuena. Has completado el dominio de JavaScript asíncrono, y espero que hayas aprendido mucho a lo largo de todo este viaje Espero que se sienta mucho más confiado en su capacidad para manejar operaciones asincrónicas con la ayuda de conceptos como callbacks, promesas, Y espero que este curso te haya dado una nueva perspectiva sobre cómo puedes escribir código asincrónico basado en JavaScript para manejar operaciones como llamadas a bases de datos, llamadas EPI y otras cosas Ahora, aquí hay un breve recapitular de lo que hemos aprendido. Cubrimos las llamadas. Aprendimos sobre promesas, y aprendimos cómo puedes hacer uso de este concepto moderno para escribir operaciones asíncronas en JavaScript. Y también aprendimos sobre ANC y esperamos y entendimos cómo se puede hacer uso de ellos. Ahora, espero que este curso les haya dado una buena experiencia práctica porque no hicimos uso de ninguna presentación. Todo estaba estrictamente restringido en IDE. Y sé que a desarrolladores como tú siempre les encanta o prefieres codificar y tener el editor abierto frente a ellos siempre porque eso es lo brinda la experiencia real antes de empezar a trabajar en proyectos del mundo real. Ahora, después de terminar este curso, te animaría mucho a que sigas practicando y utilizaras los conceptos que has aprendido a lo largo tus proyectos en los que has estado trabajando Gracias por ser un grupo de alumnos tan comprometido. Este curso viene con un proyecto de clase, que puedes encontrar en la sección de proyectos de este curso en particular. Te recomiendo encarecidamente que completes el proyecto y lo compartas con toda la clase para obtener más comentarios. Y con eso dicho, hemos llegado al final, y les deseo todo lo mejor para los proyectos de JavaScript en los que trabaja.