Master asincrónico JavaScript de manera est más fácil, promesas, Asynchronous

1. Introducción: Bienvenido a la clase JavaScript asíncrona. En esta clase, vamos a aprender callbacks, promesas, y espera asíncrona, que son los temas más importantes para los desarrolladores de JavaScript, especialmente aquellos que quieren dominar, reaccionar o nodo. Si estos conceptos están despejados, entonces usted puede aprender fácilmente otros conceptos en React y node. Sí, obtendrás todos los recursos para el ejercicio y el dígito de estos conceptos en la sección de proyectos. Entonces no perdamos el tiempo y empecemos. 2. Sincrónico vs asíncrono: Entonces, en primer lugar, vamos a entender la diferencia entre sincrónico y asíncrono. Por lo que aquí creo el archivo index.html. Y en esta carpeta JavaScript, tenemos el archivo script.js. Y vinculé este archivo JavaScript con nuestro archivo HTML. Ahora copiemos esta ruta de archivo HTML y peguémosla en el navegador. Y abramos tarifa de consola. Ahora en este archivo JavaScript, escribo console.log primera línea. Después de eso, otro console.log última línea. Entonces este es el ejemplo de código síncrono o código de bloqueo. Porque cuando se ejecuta esta primera línea, el código está bloqueando. Y esta última línea tiene que esperar hasta que esta primera línea termine la tarea. Por otra parte, contempló programa asíncrono o no bloqueante. Déjame mostrarte el ejemplo de código asíncrono. En JavaScript. Tenemos una función llamada setTimeout. Ahora el primer argumento es función, y el segundo argumento es tiempo para retardo. Digamos 2 mil milisegundos, que son dos segundos. Después de dos segundos, esta función se ejecutará. Entonces imagínense aquí que estamos obteniendo datos de base de datos, que tarda dos segundos. Ahora, ¿puedes adivinar lo que obtenemos en la consola? A ver. Entonces refresco la página y veo que obtenemos primera línea y última línea. Y después de dos segundos, obtenemos esto obteniendo datos de la base de datos. Por lo que antes que nada, esta primera línea se ejecutará. Entonces llamamos a esta función setTimeout. Esta función programará una tarea, realizará en el futuro. Esto no bloquea el objetivo, y por eso lo llamamos código no bloqueante o asíncrono. Entonces cuando ejecutamos este código, obtenemos esta primera línea, luego inmediatamente última línea. Y después de dos segundos, obtenemos esta línea. Entendamos esto con el ejemplo de la vida real. Aquí hay un restaurante de un solo. El mesero acude a la Mesa uno y les toma orden. Ahora mesero dar esta orden a la cocina y luego pasar a la mesa 2 u otra orden. Por lo que hay un evaluador que puede atender a más clientes. Entonces este es el ejemplo de asíncrono. Ahora que es un otro diagrama de rayos de restaurante a la mesa uno y tomar orden de ellos. Ahora mesero dar esta orden a la cocina y luego esperar a que el código esté listo. No está tomando orden de otra mesa. Entonces el sistema de restaurantes se va a bloquear por esto. Y este es el ejemplo de blogging o score síncrono. Entonces síncrono o asíncrono es el tipo de código. Ahora aquí, hagamos este ejemplo más realista. Así que creo una función llamada get student y muevo esta función de tiempo de espera dentro. Esta función devolverá aquí los datos del nombre del objeto del estudiante, bob, un ID a uno. Ahora, llamemos a esta función aquí y almacenemos este valor en una variable llamada student. Y después de eso, simplemente registramos a la estudiante, Sylvia, asumiendo que estamos obteniendo datos de la base de datos. Y toma dos segundos, guarda esto y actualiza la página. ver, obtenemos a este alumno como indefinido porque esta función se está ejecutando después de dos segundos. Entonces cuando llamamos a esta función, estos datos escritos no están disponibles. Si queremos devolver un valor de esta función, entonces usted tiene la declaración return correcta aquí. Pero eso no es lo que queremos porque estamos obteniendo datos de la base de datos. Y puede tardar una vez más, esos segundos o más que eso. Entonces es por eso que usamos setTimeout para agregar retraso en esta tarea. Ahora bien, ¿cómo podemos conseguir aquí estos datos de los estudiantes? Por lo que hay tres métodos para manejar código asíncrono. Te esperan devoluciones de llamada, promesas y asíncrono. Entonces comencemos con las devoluciones de llamada. 3. Los retrocesos de llamada: Lo que se llama devolución es una función que se ejecuta. He hecho otra función terminada la ejecución. En otras palabras, cualquier función que pasemos como argumento a otra función. Por lo que llamamos a esa función como una devolución de llamada. Déjame mostrarte. Asíque solo agrego aquí id parámetro y compra este id aquí. En función, pasamos uno, que olvidé agregar. Entonces, para aplicar callback, tenemos que hacer la definición de la función de poco gen. Por lo que agrego aquí argumento llamado de vuelta. Ahora estas callback es función. Por lo que llamamos a esta función mientras se imprimen datos. Entonces después de esta consola, agregamos callback y Galia. Esta función aquí ahora compra los datos del estudiante en esta devolución de llamada. Y quitemos este retorno. Ya no lo necesitamos. Ahora no estamos devolviendo nada de esta función GetString. Por lo que ya no necesitamos almacenar este valor de función en variable. Ahora para nuestro segundo argumento, tenemos que pasar la función que uso aquí en una función y mover estas consola en esta función. Ahora, vamos a obtener los detalles del estudiante como parámetro de estudiante. Ahora podrías pensar que esto es confuso, pero confía en mí, esto no lo es. Déjame explicarte desde Inicio. Aquí. Estamos llamando a este boceto para ejecutar función, y pasamos éste como IID. Por lo que después de dos segundos, engendra consola esta línea. Y después de eso, se ejecutará esta función de devolución de llamada, que pasamos un segundo argumento. Entonces obtenemos estos datos de objeto en esta variable aleatoria dos. Y entonces podemos resolver este dato estudiantil simple como eso. Así que guarda esto y refréscate en el navegador. ver, obtenemos esta primera línea, última línea. Y después de dos segundos, obtenemos esta línea. Mediante el uso de esta técnica. No obtenemos datos indefinidos como obtuvimos anteriormente. Esta función de devolución de llamada se ejecutará después de dos segundos. Ahora la parte divertida es que ya usas devoluciones de llamada en tu código antes de este tutorial. Así que presta atención a la sintaxis de la función setTimeout. El mejor argumento es la función, y el segundo argumento es el tiempo. Entonces sabemos que cuando pasamos función como parámetro en otra función, entonces llamamos a esta función como devolución de llamada. Ahora, imagínense aquí queremos obtener otro dato del alumno, digamos información de materia del alumno. Así que creo otra función llamada consigue objetos y sesgo aquí, id, que es ID de estudiante. Ahora dentro de esta función, estamos asumiendo que la agregación de datos nuevamente desde la base de datos. Así que agrego aquí setTimeout y Baz funcionan como primer argumento. Y dos segundos. Ahora aquí, primero consola consiguiendo materia de estudiante y paso aquí esta identificación. Y no hice materias como matemáticas, ciencias, informática, etc. Ahora, vamos a llamar a esta función aquí y pasar ID, que es estudiante dot ID. Pero como sabemos, no obtenemos datos de inmediato. Por lo que usamos callback. Entonces aquí le agregamos callback. Y antes de escribir, llamamos a esa función de devolución de llamada y pasamos esta matriz en esta devolución de llamada. Y remoto está escrito. Ahora definamos aquí la devolución de llamada y obtengamos estos sujetos que están en la variable sujetos. Y después de eso, podemos consolar a los temas, guardar esto, y refrescar la página. Ves, ¿qué debemos conseguir? Línea de poste, última línea. Después de dos segundos, obtenemos datos de los alumnos, y después de otros dos segundos obtenemos datos de asignaturas. 4. Cómo resolver el infierno de llamada: Ahora hay algunos problemas con las callbacks. Deja que te explique. Aquí. Digamos que queremos obtener marcas de estos temas. Así que rápidamente creo una función llamada getMax y paso objeto como parámetro y llamo de vuelta. Ahora solo copio esta función setTimeout y la pego aquí. Cambiemos el mensaje de la consola, que está sacando marcas. Y sesgo aquí sujeto y sesgo max en esta devolución de llamada, digamos 80. Ahora llamamos a GetMax y pasamos aquí sujeto en índice 0 y luego redefinimos nuestra devolución de llamada para imprimir. Esto marca. Entonces escribe marca console.log. Ves que hay una estructura anidada porque estamos llamando a múltiples callback en una devolución de llamada. Y esto hará que nuestro código sea difícil de mantener y entender. Este problema se conoce como Callback ****. Esto no lo es, tenemos una puntuación asíncrona. Entonces si todas estas funciones son síncronas, nuestro código se ve así. Se puede ver cómo este código síncrono es fácil de entender y mantener. Entonces para resolver este problema de devolución de llamada ****, haremos función anónima para nombrar función. En otras palabras, como declaramos aquí, función de devolución de llamada, que es función anónima porque es no tienen nombre y definirlos por separado como se llama la función. Por lo que definimos aquí la función llamada display max y obtenemos Mark como parámetro. Simplemente consola esta función de visualización de marca malloc es la misma que esta devolución de llamada. Entonces vamos a reemplazarlo con nuestra función. Ahora aquí definimos una función llamada sujetos de visualización. Y obtenemos temas como parámetro aquí y copiamos estas dos líneas desde aquí, y lo pegamos dentro de nuestra función de sujetos de visualización. Entonces esta función es la misma que esta devolución de llamada. Podemos sustituirlo por temas de pantallas. Ahora mismo para esta devolución de llamada. Creamos una nueva función llamada display student y obtenemos los datos de los estudiantes como parámetro. Y luego simplemente copiamos esto y lo pegamos aquí. Ahora bien, podemos sustituir esta devolución de llamada por este estudiante desplazado. Tenga en cuenta que no estamos llamando a esta función. Simplemente pasamos referencia aquí y vemos que no tenemos esa estructura anidada. Por lo que copio este código en nuevo archivo llamado callbacks ab.js. Por lo que puedes referirte a esta puntuación en el futuro. Ahora este enfoque no es ideal, pero es mejor que Callback ****. Entonces esa es una mejor manera de lidiar con código asíncrono mediante el uso de promesas. 5. Implementar promesas: Entonces, ¿qué es la promesa? Una promesa es un objeto que es capaz contener el resultado de una operación asíncrona. En otras palabras, Rami se te promete darte el resultado de la operación asíncrona o darte error. Déjame explicarte con un ejemplo. Aquí. Creo nuevo archivo llamado Promises ab.js y lo vinculo con nuestro archivo index.html. Ahora para crear promesa, reescribe nueva palabra clave, y luego promete. Ahora esta función de promesa toma un argumento que es función con dos parámetros. Aquí. Se resuelve el primer parámetro y se rechaza el segundo. Y función de flecha. Dentro de esto, escribimos nuestra puntuación asíncrona. Aquí. Nuevamente, estamos asumiendo que estamos obteniendo datos de la base de datos. Por lo que escribimos aquí setTimeout y barras función y dos segundos. Ahora, imagina aquí que obtenemos nuestros datos de la base de datos. Así que creo una variable llamada student equals to object, digamos id2, un nombre para Bob. Ahora escribimos aquí resuelto porque logramos obtener datos y pasamos aquí la variable estudiante. Ahora hagamos esta promesa en variable llamada promesa. Y vamos a consumir esta promesa. Te lo prometo, que es la variable punto. Aquí. Tenemos dos métodos principales entonces y obtener. Entonces cuando creamos promesa, está en estado pendiente. Y si completamos las tareas asíncronas, entonces Brahmins en estado cumplido. Y si eso es un error, entonces Brom está en estado rechazado. Aquí, nuestra promesa cumplida porque llamamos aquí resuelta. Entonces cuando se cumple la promesa, entonces obtenemos nuestros datos en este método de banda. Ahora almacenamos nuestros datos en el parámetro de resultado y luego simplemente consolaremos este resultado. Guarde esto, y a ver después de dos segundos, obtenemos este resultado. Ahora imagina por alguna razón, no obtenemos datos de la base de datos. Por lo que comento estas líneas y llamo aquí rechazar función. Ahora para una mejor práctica, cada vez que creamos nuevo error y sesgamos nuestro mensaje de error aquí. Guarde los cambios y reprima la página. ver, aquí obtenemos este error. Ahora, veamos cómo consumir estos errores. Entonces después de este 10 metros, agregamos otro método llamado catch. Y nos sale sumador y console.log este error, este NC, nos sale ese error aquí. Entonces esta es la implementación de promesa en JavaScript. Ahora, déjame mostrarte cómo podemos convertir nuestro código anterior en promesas. Entonces tengo este código, cualquiera que sea el problema de devolución de llamada ****. Entonces comencemos con esta función get student. En esta función, devolvemos nueva función AND promesa con variables de resolución y rechazo dentro de esta función de error. Eliminar este código. Ahora, quitemos esta devolución de llamada. No lo necesitamos y añadimos el lugar de esta devolución de llamada. Agregamos resuelto. Ahora probemos esta promesa. Aquí. Llamamos a esta función de ejecución de croquis y paso id1. Ahora esto se hincha la función devolverá la promesa. Almacenamos esta promesa en variable llamada promesa de lo que consumimos esta promesa y agregamos aquí que método. Ahora obtenemos estos datos en parámetro student y simplemente console.log el alumno. Ahora comentemos este código. Y vinculo este archivo de script con archivo HTML. Guarde esto y actualice la página. ver, después de dos segundos, obtenemos datos. 6. Ejercicio y solución: Ahora bien, si me sigues, entonces tengo una tarea para ti. Quiero que conviertan estas dos funciones en promesas. Así que pausa este video aquí y pruébalo por ti mismo. Y después de eso, vigila la solución. En esta función. Regresamos y solo escribimos aquí Nuevo y seleccionamos esta nueva promesa. Mira, obtenemos este repetitivo al usar estos pequeños trucos, puedes impulsar tu productividad. Ahora, mueve este código dentro de esta función y elimina esta devolución de llamada y reemplaza esto con el resultado. Ahora aquí, también creamos una nueva promesa y movemos este código dentro de esta función de flecha. Ahora quita esta devolución y reemplaza esta con el resultado. Convertimos nuestra antigua función en promesa. Ahora, veamos cómo consumir estas promesas anidadas. Por lo que quitamos esta consola de aquí y llamamos a nuestra siguiente función. Acabamos de obtener asignaturas y pasar año estudiante dot id Ahora sabemos que esta función volverá a devolver promesa. Entonces tenemos que usar entonces método. Fuera de este 10 metros, agregamos otro que almacenado en sujetos. Ahora después de eso, llamamos a función GetMax y pasamos aquí nuestro primer tema. Ahora tenemos otra promesa aquí. Por lo que agregamos uno más que materia y almacenamos esta marca. Y simplemente consola dot log esta marca, guarda esto y actualiza la página. Ver que está funcionando igual que antes. Ahora podemos ver cuando usamos callbacks, nuestro código se parece a esta estructura anidada. Y después de aplicar promesas, el mismo objetivo parece simple y en línea. Ahora para buenas prácticas, siempre agregamos método de efectivo, encabezado y error console.log. Entonces, si obtenemos un error en cualquiera de estas promesas que se ejecutará la función single catch. Simple como eso. Ahora incluso podemos simplificar estas promesas usando la espera asíncrona. 7. Async Await - [La mejor manera de manejar las promesas]: Así que la espera asíncrona nos ayuda a escribir código asíncrono como núcleo síncrono. Es como una magia. Déjame mostrarte aquí. Yo llamo a esta función obtener estudiante con id1. Ahora, cuando llamamos a cualquier función que está devolviendo una promesa, entonces podemos esperar ese resultado y luego almacenar ese resultado en variable como lo hicimos en código síncrono. Así que vamos a almacenar esto en una variable llamada estudiante. Ahora de manera similar, llamamos a la siguiente función, que es obtener asignaturas y estudiante de Bhatia dot ID. Ahora esperemos eso y almacenemos en una variable llamada sujetos. Ahora después de eso, llamamos a nuestra última función, que es getMax y objeto fascia sesgo de la matriz de estudiantes. Ahora vamos también un peso para eso y almacenemos esto en Mark variable. Y luego console.log esta marca. Ahora se puede ver mediante el uso de este asíncrono y nuestro intérprete, podemos escribir código asíncrono, parece núcleo síncrono. Esto es fácil de entender y mantener en comparación con la devolución de llamada, así como las promesas. No necesitamos escribir este diez metros una y otra vez. Ahora podrías tener agresión. Eso es asíncrono. Así que cada vez que usamos el operador wait, tenemos que mover eso en función con el operador asíncrono. Déjame mostrarte. Así que simplemente agrego función aquí llamada datos de visualización y muevo este código dentro de él. Ahora al inicio de esta función, agrego asíncrono. Eso es todo. Recuerda, sin este acing, no puedes usar ocho en tu código. Se le dará error y editar, y vamos a llamar a esta función de datos de visualización. Ahora comento esta parte promete. Guarda esto y actualiza la página. ver, conseguimos el mismo desierto con asíncrono esperan. Nuestro código parece sincrónico, pero bajo el capó, motor JavaScript convierte la discordia en algo como esto, fresco o frío, funciona como núcleo asíncrono y se ve como código síncrono. Simple como eso. Ahora en promesas, manejamos error usando este método get. Pero, ¿cómo podemos manejar ese error en este asíncrono y esperar enfoque para el manejo de errores? Usamos try and catch block. Por lo que escribo aquí seco. Y dentro de este bloque try, movemos nuestro antiguo código. Y después de eso, añadimos bloque catch. Y este bloque catch obtiene objeto de error. Y simplemente consola dot log este error. Entonces en términos simples, si ocurrió algún error en este bloque try, entonces se ejecutará el blog de este tipo. Por lo que comento esta variable de marca, parte degustación, guarda esto y actualiza la página. Y a ver nos sale este error. Mark no está definido. Así que cuando usamos async wait como una buena práctica, siempre rompemos nuestro código e intentamos atrapar bloque. 8. Recap todos los conceptos: Recapitulemos lo que aprendimos. Por lo tanto, la función de devolución de llamada es el mejor método para manejar la puntuación asíncrona. Pero en rupias de función de devolución El tema llamado callback ****. Ahora después de eso, vemos promesas, que simplemente prometieron darte el resultado de una operación asíncrona o darte error. Entonces para crear promesa, usamos nueva promesa y dentro ella pasamos función con dos métodos. Resultado, rechazo, el único medio cumplido y rechazo significa rechazado. Pero con promesas, también conseguimos esto anidado y métodos. Entonces después de eso, vemos asíncrono esperar operadores. Esta espera asíncrona es trabajo como código asíncrono y se ve como núcleo síncrono. Entonces cuando llamamos a la función, agregamos un operador de peso al principio. Esto nos ayudará a escribir código de manera sincrónica. Y lo más importante, hay que poner este código en una función con un solo operador. Sin asíncrono, esperar no funcionará. Y es por eso que se conoce como asíncrono esperan. Y último, manejo de errores. Usamos bloque de prueba y calibre, jadeo por errores, y seco para todo el código. Entonces colocamos nuestro código antiguo en try block y manejamos el error en el bloque catch. Entonces felicidades, has completado esta clase, y espero que entiendas estos temas. Si te gustó esta clase, puedes compartir tus opiniones. Me ayudará a llegar a más estudiantes como tú. Entonces nos vemos en la siguiente clase. Adiós.