*NUEVO* AJAX: curso completo de los fundamentos - parte 9: ciclo del evento y Async/Await

2. Qué es el bucle de eventos: ¿ Estás listo? Eso espero. Esta es una sección impresionante y vidrio impresionante y unas conferencias hablando de asíncrono y esperan. Y esto realmente está agregando una huida moderna a la ya moderna It's API. Y odio esa palabra, pero para entender asíncrono y esperar, necesita un entendimiento de alto nivel sobre cuál es el bucle de eventos. No quiero entrar en demasiados detalles en el bucle de eventos que necesitas saber que existe. Y solo ayudará a solidificar las solicitudes asíncronas. O al, déjame empezar justo en lo básico. Sabemos que el navegador, también conocido como Chrome y JavaScript, por ejemplo, Node.js, son de rosca única. Y debido a que estamos lidiando con ajax, estoy más preocupado en este momento por el navegador y consigue esto, todo dentro de un navegador se ejecuta fuera de un hilo principal. Todos los navegadores tienen algo llamado hilo principal. Y en este hilo principal, pasan montones de cosas. Aquí es donde las partes lo para el navegador. Aquí es donde se ejecuta tu código JavaScript. Es donde sucede el renderizado y es como el DOM, el Modelo de Objetos de Documento bucles. ¿ Qué significa esto? Significa que si algo en el hilo principal lleva mucho tiempo ejecutarse, todo lo demás va a ser bloqueado. Quiero que visualicen esta imagen. Han sido un hilo principal. En este hilo principal, todo pasa como mencioné, aquí es donde todavía las fiestas. No es solo JavaScript se ejecuta en el hilo principal, también es la actualización del DOM cuando un navegador actualiza CSA. Todo esto sucede en este hilo principal. Para evitar ciertas tareas bloqueando todo lo demás, al navegador se le ocurrió una muy buena idea de desovar múltiples hilos lejos del hilo principal. Pero por supuesto, una vez que estas cepas han hecho algo que una página necesita preocuparse, necesitan volver al hilo principal para darle al navegador esa información y peso como el tubo del evento pie en . ¿ Lo sabes? Bueno, es el bucle de eventos el que maneja y gestiona todo este proceso. Vamos, eso es bastante guay, ¿verdad? Ese es el tubo parejo. Y para conducir el punto a casa, por qué no miramos el código específicamente. Quiero mirar la función setTimeout. Ya lo hemos visto algunas veces en este curso. Pero déjame descomponerlo. Así es como lo escribes. Se necesitan dos argumentos, la devolución de llamada y milisegundos. Pero, ¿qué significa la función de tiempo de espera de sake ? ¿Qué está haciendo? ¿ Qué está haciendo? Dos cosas. Lo primero es que espera x milisegundos cada vez que definamos. Y una vez hecho, esperar a que pasen esos milisegundos se va a ejecutar la función de devolución de llamada. Pero ahora no tratemos esto como una función asíncrona. Ahora consideremos que la función SetTimeout se ejecuta sincrónicamente. Si lo ejecutamos como función asíncrona, al igual que nosotros, se ejecutaría en el hilo principal y esto significa que tirará todo lo demás hasta que esté hecho. No queremos que eso suceda, ¿verdad? Eso es muy pobre para la experiencia del usuario. ¿ Cómo resolvemos esto? Bueno, eso es correcto Para evitar esta función de tiempo de espera de estado no se ejecuta en el hilo principal. Recuerda esos oficios laterales. Un término de desarrollo de fantasía para eso es que se está ejecutando en paralelo. Y eso es solo una charla de fantasía para fuera del hilo principal en uno de esos hilos laterales que si realmente dejas de pensar en ello, esto va a plantear otro problema porque cuando llegue el momento de ejecutar esa función de devolución de llamada, recuerda, después de que hayan pasado los milisegundos , entonces ¿qué pasa? Bueno, esa función de devolución de llamada tiene que ser ejecutada y forma es la ejecución que se está llevando a cabo. Eso está justo en el hilo principal. Se puede ver el problema con que automáticamente va directamente al hilo principal cada vez que llaman a esa función está lista. El problema es que podrías estar ejecutando mucho código JavaScript en paralelo. Esto significa que potencialmente podrías estar editando el mismo DOM al mismo tiempo, NG day full run con lo que los desarrolladores llamaron problemas de condición de carrera. Efectivamente lo que eso significa es que no quieres una función de JavaScript a la mitad manipular el DOM. Y luego de repente esta función de devolución de llamada se lanza al hilo principal y comienza a ejecutar otra parte del DOM, o peor aún, anulando lo que estaba haciendo la primera función de ejecución de JavaScript. ¿ Cómo resolvemos este problema? Bueno, el navegador, de nuevo, es muy inteligente para asegurarse de que no se encuentre con problemas con la ejecución múltiples código JavaScript al mismo tiempo, se introdujeron señales de tarea. Sé lo que estás pensando, estás pensando que el desarrollo de clientes es bastante difícil. Ahora cuando estamos hablando de bucles de eventos, tenemos términos como paralelos fuera del lado principal del hilo oficios colas de tareas, pero simplemente no se detiene. No te preocupes, no te preocupes. Sé que he estado ahí, pero realmente tiene sentido intuitivo. Si solo das un paso atrás, tienes ese hilo principal. Puede tirar todo al hilo principal al mismo tiempo que caen. Funciones, tareas tienen que ponerse en cola. Entonces esto realmente tiene sentido. Solo recuerda, una parte clave de cómo funciona el bucle de eventos es el concepto de colas de tareas. ¿ Y cómo funcionaron estas colas de tareas? Bueno, lo que hace el navegador es que le dice al tubo del horno que tiene algunas funciones en quería hacer algo en el hilo principal. Y tu navegador va a agregar esa función a la cola de tareas cuando esa función esté lista para ejecutarse. Básicamente cuando la función está lista, se agrega a esta tarea. Tú, está esperando. Y sólo cuando hay un hueco en ventaja a la gente que se vuelva a poner en el hilo principal. Esto asegura que las cosas se ejecuten de manera ordenada. Tiene sentido porque eventualmente el bucle de ventilación, llegaremos a ejecutar esas tareas cuando esté listo. Entonces hablemos de nuevo sobre nuestra función de tiempo de espera sentado porque sabemos que la función setTimeout es en realidad una función asíncrona. ¿ Cómo se ve en la realidad? Bueno, de nuevo, lo escribiríamos exactamente de la misma manera. Nuevamente, están sucediendo dos cosas cuando ejecutamos esta función. Pero esto es lo que realmente está pasando. Uno, tenemos un peso x milisegundos, pero esto se está ejecutando en paralelo. ¿ Sabes lo que eso significa? No se ejecuta en el hilo principal. ¿ Cuál es la segunda cosa que hace aquí el navegador? Se pondrá en cola la tarea cuando la devolución de llamada esté lista. Una vez que hemos esperado una cierta cantidad de milisegundos, y esa devolución de llamada está lista para ejecutarse. El navegador editará a la tarea. Por supuesto, el bucle de eventos invocará la función de devolución de llamada cuando esté lista. Cuando el bucle de eventos esté listo. Sólo voy a volarte la mente un poco más. Esto se está haciendo muy avanzado, o tal vez podría haberse detenido aquí. Pero sí hay que saber que todas son categorías diferentes de tareas. Tenemos microtareas y microtareas. Supongo que una buena forma de pensar en ello es que tienes tareas importantes y no tareas tan importantes. ¿ Qué hace la tarea macro? Vamos a tareas en la cola de tareas macro, como la función sit timeout. Entonces hay que esperar la siguiente ronda del bucle de eventos antes de ser ejecutado. Otra forma de decirlo es que las tareas y la macro Q procesaron un elemento a la vez. No obstante, las tareas de la cola de micro se ejecutarán en la ronda actual del evento. Otro matiz es que las tareas de micro cola todo el proceso hasta la finalización, incluyendo cualquier elemento, cualquier función, y el código adicional que agregue a la cola en tiempo real. Y debido a la alta importancia en las microtareas, eso significa que el bucle de eventos va a bloquear renderizado mientras está ejecutando microtareas. Cliente, bien, cliente, lo entiendo, lo entiendo, pero ¿dónde encaja ajax en todo esto? Bueno, sabemos que ajax se ocupa de promesas. Promesas de muy, muy importante cuando se trata de navegadores. Esto significa cuando el código es finalmente editado al hilo principal para ejecutar. Permítanme decir esto. Cuando el navegador agrega esas funciones de devolución de llamada a la cola de tareas, trata estas funciones como micro tareas. Lo sé, lo sé. Probablemente soplando tu mente. No te preocupes. No hace falta estrictamente saber de todo esto para entender ajax. Pero es conceptos muy, muy interesantes y avanzados. Es divertido. Y quiero que seas gran maestro. En las próximas conferencias, quiero que ahora saltemos a la consola y quiero empezar a mirar cómo funciona la vena a bucle. Quería escribir algún código contigo y hablar de mis ideas sobre lo que está pasando en segundo plano realmente va a llevar el punto a casa. Y luego por supuesto vamos a saltar a lo asíncrono y un peso realmente. No puedo esperar. 3. Tareas macro vs. tareas micro: Bienvenido, bienvenido, bienvenido. Estoy súper emocionado. Espero que danzes. Espero que te estés divirtiendo mucho. Espero que estés aprendiendo un tiempo. Y muchas gracias por quedarte conmigo. Realmente hemos recorrido un largo camino. Y por supuesto que ahora nos estamos metiendo en temas de granjas de video. Hemos estado discutiendo el bucle de eventos, pero ¿qué es mejor que mostrarte? No sé nada, por eso te voy a mostrar el bucle de eventos en acción. Eso va a ser bastante interesante. Estrictamente hablando, no tengo que mostrarte esto, pero quiero que te conviertas en una codificación de gran maestro. No sólo quiero que entiendas lo básico del Ajax. Quiero que entiendas lo que está pasando detrás de escena. Por supuesto, vamos a estar discutiendo asíncrono y esperamos. Pero para entender a la espera asíncrona, solo quiero pausar un poco más de conocimiento sobre el bucle de eventos. Recuerda que una de las cosas importantes con el bucle de eventos es el concepto de colas de tareas. Funciones, métodos, tareas pendientes o editar en una cola de tareas. Y por supuesto se obtienen diferentes tipos de tareas. Conseguimos tareas macro y obtenemos microtareas. Pero Clyde, ya sabemos todo esto. Sé que sí. Entonces, ¿por qué no solo tocamos en un editor de texto? ¿ Por qué nos divertimos un poco? Aquí vamos. abierto un editor de código de Visual Studio en blanco. Tengo un archivo llamado test.js. Eso es todo. Ahora, solo podía abrir la terminal, podríamos simplemente registrar la consola todo en la pantalla. Podríamos ejecutar nuestro JavaScript en el navegador. Hay muchas maneras de hacer algo en la programación. Voy a mostrarte otro más. Ahora quiero implementar el modo de debug en código de Visual Studio. Por lo que sólo voy a hacer click en esa pestaña. Y voy a hacer click en esto, crear un archivo JSON punto de lanzamiento. Y utilicemos Node.js al gusto. Por supuesto, el código de Visual Studio crea automáticamente este archivo JSON stop de lanzamiento. No quiero que se haga hincapié en todo esto. No tienes que saber cómo funciona todo. O quiero llegar a esta consola de debug que es muy, muy útil. ¿ Qué quiero hacer? Bueno, solo consigamos registrar algo en la pantalla para empezar con. Y no lo sé, solo vamos a la consola de registro de la consola uno. ¿ Cómo es eso? Pero, ¿qué es bueno con nosotros? Debug entorno como puedes poner puntos de interrupción en tu código, puedes entrar en tu código. Muy útil. Pero de todos modos, aquí solo voy a ejecutar este código. Y en nuestra consola de debug vemos los resultados. Es la consola uno. Eso es un regado por cierto, mi animal de empuje favorito. Ahí vamos. ¿ Qué quiero mostrarte? Bueno, déjame hacerte esta pregunta. En lugar de enfriarla consola, no lo sé, solo enfríala. No sabía síncrono porque sabemos que registro de la consola de funciones se ejecuta de manera asíncrona. Si tenemos dos así, ¿verdad? ¿ Qué crees que va a pasar? ¿Cuál crees que será el resultado en nuestra consola de debug? Vamos a escribir, sabemos que JavaScript y Node fit meter es de un solo hilo. Sabemos que la primera línea se ejecutará síncrona. Uno de la parcela pasará a la siguiente línea y neta se ejecutará. Muy bien, así que vamos a ejecutarlo. Conseguimos exactamente lo que esperaríamos. Se cree que se está poniendo un poco más funky. Agreguemos una tarea macro. Permanecer tarea macro. Por ejemplo, el método setTimeout, tareas macro que conocemos o editamos, tiramos, cola y ejecutamos el marrón mixto de la vinculina. Eso es lo que es una tarea macro. Y conocemos el método SetTimeout, que es asíncrono. Es una tarea macro. Sólo voy a usar atajos. Por lo que es muy fácil de leer. Y todo lo que quiero hacer es que quiero consola log. No lo sé, digamos tiempos de espera. Y podemos tener una foto de una jirafa. Y sabemos que el segundo argumento a la sexta función timeout es cuántos milisegundos queremos esperar. Bueno, en este caso, digamos que Sarah milisegundos. Ejemplo muy sencillo. Ahora quiero que pienses cuál va a ser el resultado en nuestra consola. ¿ Qué va a pasar si ejecutamos este código? Vamos a ejecutarlo. Es más o menos lo que estoy seguro de que esperabas. La primera consola, se ejecuta en el hilo principal. Ahora llegamos al método sit timeout que se agrega a la tarea macro linda, aka se está ejecutando fuera del hilo principal. Por supuesto lo que eso significa, a pesar de que queremos consolar log los resultados de ese tiempo de espera de inmediato, sigue fuera del hilo principal. Y si bien reside temporalmente fuera del hilo principal, obtenemos este log de consola, que de nuevo se ejecuta en el hilo principal, razón por la cual el registro de consola sincrónico ocurre primero, log de consola síncrono que suceda segundo. Y luego finalmente, casi instantáneamente, digamos método de timeout, edita de nuevo al hilo principal y luego se ejecuta. Interesante. Pero ahora, ¿por qué no nos ocupamos de las promesas? Recuerda, ajax se trata de promesas. Y sabemos que la promesa no es una tarea macro. Una promesa es un vatio. Eso es correcto. Es una microtarea. Y sabemos que se editan a la micro tarea y se ejecutan antes. Esta es la diferencia clave entre las microtareas y las macro tareas se ejecutan antes del inicio de la siguiente. ¿ Por qué no usamos el objeto promesa y ejecutamos su método de resolución? Por supuesto, en la vida real, tendrías mucho código y luego ejecutarías el método de resolución. Entonces por supuesto, ejecutemos nuestra devolución de llamada dentro de un decano. No necesitamos ningún argumento, por lo que solo podemos registrar en la consola algo de vuelta a la pantalla. En este caso, ¿por qué no nos limitamos a agarrar nuestra jirafa? En lugar de llamar a un tiempo de espera, podemos llamarlo promesa. ¿ Qué crees que pasará ahora? Esto se está volviendo un poco más complicado. Necesitas pensarlo. ¿ Qué orden esperarías ver las cosas? Esperaría ver uno síncrono, ese console.log que primero uno en la línea uno. Eso sucedería instantáneamente. Ahora lo interesante es que el setTimeout que conocemos va a ser editado al macro tirar Q. el pulsante va a ir a la promesa. Y cuando llegue a esa promesa, una promesa misma estará en el hilo principal. Pero cuando los pulsos vean el método lean que se ejecutará fuera del hilo principal. De hecho, se va a sumar a la microtarea linda. El posible entonces golpeó el console.log perdido. El síncrono a la línea se mostraría porque eso se va a ejecutar de inmediato. Entonces esperaría uno síncrono, sincrónico que se muestre primero, porque la declaración de promesa está en el micro Q hacia fuera esperar que la deuda se emita de nuevo a nosotros primero, la promesa de la jirafa, luego por fin el tiempo de espera de la jirafa. Veamos si tengo razón. Pulsemos el botón Ejecutar y veamos qué pasa. Exactamente lo que esperaríamos. Súper, super interesante. ¿ Puedes ver lo divertido que es esto? ¿ Puedes ver cuán intuitivo se vuelve todo esto? ¿ De acuerdo? Esto es sólo un calentamiento. Quiero que tomemos un descanso aquí. En la próxima conferencia, quiero que nos adelantemos más, no cortarlo en eso. Quiero empezar a crear nuestras propias promesas. Sé emocionante. Quiero usar un bucle while para que podamos ver como que bloquea la ejecución o lesionar otras funciones. Y va a ser súper fascinante. Esto fue sólo un calentamiento. Te veré en la próxima conferencia. 4. Cómo crear nuestra propia promesa: Bienvenido de nuevo. Espero que te estés divirtiendo mucho. Y como mencioné, esto se vuelve más complicado, así que eliminemos todo. Oh, hombre, odio borrar todo mi hermoso trabajo. De todos modos, continuemos. Lo que quiero hacer es implementar marcas de tiempo a lo largo de nuestro código. Ahora, sólo para mostrarte cómo hacer algo nuevo. Para hacer eso, quiero empezar con conseguir el tiempo ahora mismo antes de ejecutar el código. Es muy fácil de hacer en JavaScript. Simplemente puedes exceder el objeto de fecha de JavaScript y ejecutar el nominado. Muy sencillo. A continuación, quería crear una función que la consola registre algo en la pantalla. No quiero estar escribiendo todo el tiempo. Registro de consola. Implementar eso en una función. Entonces, ¿por qué no creamos una función y la llamamos salida por falta de una palabra mejor porque eso es lo que es una salida. Va a tomar una discusión. Digamos simplemente por falta de una palabra mejor, eso puede ser lo que pasamos a ella. ¿ Y qué queremos que suceda? Bueno, como mencioné, quiero implementar una función de registro de consola. Sencillo. ¿ Qué quiero un registro de consola? Vamos a poner esto en los literales de plantilla quieren consola de registro. En primer lugar, sea cual sea lo que pasemos a la función de salida, quiero en realidad el registro de consola que se lleve a sí mismo. Lo siguiente que quiero hacer es implementar una nueva línea. Entonces quiero mostrar cuánto tiempo tardó en ejecutar esa función. Quiero que haya transcurrido el tiempo. En otras palabras, ¿eso va a ser qué? Por cierto, el signo de dólar corchetes rizados dentro julios de temperatura solo significa que podemos hacer referencia variables y escribir JavaScript. Es muy útil. Entonces lo que podemos hacer es que podamos conseguir el tiempo ahora mismo después de que se haya ejecutado el código, que es fecha punto. Ahora lo revendemos. Podemos deducir eso de nuestra boca variable que definimos al principio. Sabes qué, Tal vez sea mejor no llamar a esto ahora. A lo mejor debería llamar a esto comienza porque esa es nuestra hora de inicio, solo para que no te confunda. Espero que eso tenga sentido. Permítanme simplemente alejar todavía a un poco para que puedas verlo todo en una sola línea. Simplemente encontramos la diferencia entre el tiempo ahora y el momento en que comenzamos a ejecutar la función. Muy sencillo. Permítanme acercar ligeramente. Lo que quiero hacer a continuación. Bueno, quería definir una función de bloqueo. Va a ser una función muy simple. Bueno, quiero hacer es que quiero crear un bucle. Así que vamos a definir una variable i comenzando en 0. Y luego voy a usar la función de JavaScript while. Esto se ejecutará todo el tiempo, siempre que lo que se proporcione en este paréntesis sea cierto. Vamos a decir que se va a ejecutar mientras yo sea menor que, no sé, sólo un número muy grande. Y luego en cada iteración o quiero hacer es aumentar línea. Se puede ver que no hacemos mucho. Oee. Y luego cuando todo esté hecho, cuando este bucle while esté terminado, el código pasará a la siguiente línea. Y entonces sólo podemos devolver algo. ¿ Qué quiero regresar? Sólo podemos devolver texto. Podemos decir hecho lo suficiente para poner un bonito búho bonito. Sí. Tengo un búho en mi jardín por cierto, y quiero construir una caja de búho. Tan emocionado. De todas formas, creo que eso se ve bastante bien. Todo hecho. Ahí vamos. Ese es nuestro código de bloqueo. Y ahora lo hemos hecho, todo lo que voy a hacer ahora es ejecutar estas funciones y quiero preguntarte qué va a pasar. Entonces, en primer lugar, vamos a verlo. Nuestra función de salida que definimos anteriormente. Recuerda que lo vamos a hacer una pausa de algún gusto. ¿ Qué consejos queremos pasar en él? Bueno, podemos pasarlo sobre hielo, hablaremos, y después podemos simplemente mirar a un asíncrono, que es lo que hicimos antes, sincrónico, ¿qué quiero hacer a continuación? Bueno, quiero volver a ejecutar nuestra función de salida, pero esta vez como argumento. Recuerda que le damos un argumento x. No quiero pasar en texto simple. Bueno, en realidad lo hago. Pero quiero pasar en nuestra función que finalmente regresará. Tomaré diciendo todo eso. Para hacer eso, podemos pasar en la función, podemos ejecutar esta función de bloqueo. Entonces, por fin, lo adivinaste. Quiero hacer otro registro de consola síncrono, pero esta vez por supuesto lo. Muy bien. Déjame hacerte esta pregunta. ¿ En qué crees que va a ser el resultado de este código? Lo que nos va a mostrar primero. Bueno, yo esperaría que uno sincrónico se muestre primero, así es. D nada. Bueno, tenemos este código de bloqueo y eso no es nada asíncrono. Si bien loop en JavaScript es muy simple, se ejecuta en el hilo principal. Entonces cuando el analizador, cuando el agente golpee esta función salvaje en el hilo principal, se va a quedar en el hilo principal. Y todo lo demás va a tener que esperar. Aburrido. Sé que esto es mala experiencia de usuario. Entonces finalmente, cuando ese mientras se termina el bucle, llegamos a la herramienta síncrona de salida final. Veamos si estoy en lo correcto, eso es lanza corredores. Y mira eso. Sincrónico transcurrido una vez fue de 0 milisegundos. Eso fue lo rápido que fue. Nos metemos en este bucle mixto while, ya sabes lo que es también 80 milisegundos pero, pero agua corta y sumamos unos ceros más. Vamos a ejecutarlo de nuevo. Sólo para que sea un poco más largo. Conseguimos uno síncrono y luego transcurre y finalmente llegamos a síncrono. Dos muy interesantes, Muy interesante. Lo sé, lo sé. Por eso quería mostrártelo. Pero ahora quiero plantearte otra pregunta. ¿ Cómo evitamos que ocurra este código de bloqueo ? ¿Cómo podemos detenerlo? ¿ Cómo podemos convertir esto en una pieza asíncrona de código? ¿ Qué opinas? Recuerda lo que queremos hacer es que quiero crear un hilo separado. Quiero bajar de ese hilo principal mientras que mientras que el bucle se está ejecutando. Y por supuesto nos netos mientras bucle está terminado. Quiero agregar esa declaración de retorno a la microtarea. Lindo, eso es lo que quiero. ¿ Cómo lo hacemos? Se podría pensar, sí, podemos crear una promesa. Podrías estar en lo correcto, dependiendo de cómo pienses que logras esta promesa. Déjame mostrarte lo que no va a funcionar. Así que vamos a comentar esto. Ahora en realidad deberíamos llamarlo desbloqueando. Por falta de una palabra mejor. ¿ Cómo podríamos hacer esto? Bueno, se podría pensar, devolvamos unas nuevas promesas. Se ejecuta el objeto promesa de JavaScript. Sabemos que nos devolverá objeto de resolución y un objeto de rechazo. Lo sabemos a partir de conferencias anteriores. Podemos ejecutar nuestra devolución de llamada dentro de estos corchetes rizados. Se podría pensar que podemos implementar nuestro bucle while aquí. Yo equivale a 0. Implementar mientras. ¿ Cuántos ceros hacemos esto? Sólo cópielo. Si bien yo es menos que lo que sea que los grandes números. Bueno, lo que queremos hacer es aumentar yo en uno. Cuando esté terminado. No queremos devolver nada. Lo que queremos hacer es que queremos llamar al método resultado y método de resolución. Por supuesto, sólo podemos tener este dicho aguantar. Ok. ¿Estás conmigo? Lo siento, falso. Entonces hemos tratado de eliminar esto en realidad. Hemos intentado convertir el código de bloqueo a desbloquear implementando una promesa. ¿ Sabes lo que significan? Deshazte de la capital otra vez, mi OCD, no una función constructora. Entonces déjame hacer una u minúscula se podría pensar que hemos implementado en nuestra promesa. Esta promesa sucede fuera del hilo principal, y por lo tanto todo sucede como esperaríamos va a estar desbloqueando. Ahora, se podría pensar que uno sincrónico se mostrará primero. Entonces, debido a que el código de desbloqueo está fuera del hilo principal, deberíamos ver dos síncronos. Y luego finalmente, cuando esté hecho, deberíamos ver el resultado. Todo hecho. Que esto no va a suceder, ¿no debería? Si estoy pensando correctamente, vamos a lanzar este programa. Veamos qué pasó esto. Ahí vamos. Así que lo viste en realidad, pesar de que estamos tratando de ejecutar una promesa, sigue bloqueando la ejecución de nuestra próxima salida síncrona. Por eso solo llegamos a dos síncronos en 143 milisegundos. A tan raro, Clyde, estoy tan confundido, pensé porque envolveremos esto en una promesa, eso significa que vamos a ejecutar todo este código fuera del hilo principal. Se puede poner muy confuso. Pero ahora hay algo muy avanzado que quería compartir contigo. ¿Estás listo para ello? Entonces te va a volar la mente. Simplemente queden pero la creación real de la promesa misma y esa ejecución del bucle while, que está sucediendo en la creación de esta promesa que todavía está sucediendo en el hilo principal. Aquí está la cosa. Las promesas mismas son solo herramientas de monitoreo. En realidad no son asíncronos ellos mismos. El peso es asíncrono, cabe cuando se trata de prometer. Encaja en. Cuando ejecutamos las declaraciones de vena. Cuando el motor ve una declaración danesa, se quita lo que siempre está dentro la declaración del tema de la tarea principal del hilo principal. Y solo cuando el resultado neto está listo se agrega a la micro tarea. En otras palabras, es sólo la resolución de la promesa en una declaración de vena lo que sucede fuera del hilo principal como una microtarea. Muy, muy fascinante. Entonces es por eso que la primera línea de registro de consola síncrona se ejecuta de inmediato. Que este segundo registro síncrono solo se ejecuta fuera del bucle while se hace porque la creación de esa promesa sigue bloqueando el hilo principal. Lo siento, no quise seguir repitiéndome, pero este es un concepto tan importante para que comprendas y te va a ayudar. Entonces déjame preguntarte esto. ¿ Cómo entonces no pretendemos un juego de palabras. ¿ Cómo entonces resolvemos este tema? ¿ Cómo nos aseguramos de que mientras bucle esté sucediendo fuera del hilo principal? Bueno, claro que queremos ejecutar el método de resolución y luego ponerlo todo dentro de la declaración 18. Ni siquiera necesitamos esta propiedad rechazada porque nunca la usamos. De hecho, puedo eliminar todo esto. Podemos ejecutar de inmediato el método de resolución en esta promesa. Sabemos que en ella se ejecuta, el motor va a buscar la declaración de la vena. Y aquí es donde puede mentir nuestro código. En realidad pueden poner un TIA. No necesitamos ningún argumento. Debería funcionar. Creo que tenemos suficientes corchetes, deberían funcionar. Ahora el bucle while está dentro de una declaración danesa. Deberíamos esperar que esto ahora suceda fuera del hilo principal. Ahora se ejecuta este código llamado type area promise resolve no es un constructor. Por supuesto, no sólo la nueva palabra clave. Bastante útil teniendo mensajes de error allí. Muy bien, vámonos ahora. Y ahí vamos. Esta es una mano incómoda. Sólo veamos aquí obtenemos otro error de referencia. Resolver no está definido. Por supuesto que estoy llamando al método de resolución aquí. En realidad sólo quiero devolver esto porque dentro la vena declaración unidad, van a la ciudad. Por supuesto que ni siquiera necesito corchetes. Es simplemente inútil. Vamos a intentar esto de nuevo. Lo siento, tercera vez, afortunado, vamos. Eso es un aviso que no estamos recibiendo nuestra antigua declaración hecha. ¿ Por qué? ¿ Esto? Interesante de nuevo, solo recuerda lo que estamos haciendo aquí. Hemos creado una promesa y esta promesa devolver algo. Al final del día, va a devolver una cuerda diciendo todo hecho. El problema que estamos teniendo es que nunca accedemos a ese retorno. ¿ Recuerdas lo que espera una promesa? Se espera darnos el resultado. Y entonces podemos salir que da como resultado declaraciones de un decano. Entonces en realidad tenemos que llamar que estoy bloqueando la función. Y luego cuando tenemos a esa hija, fuimos a ejecutar algún tipo de función. La función que queremos ejecutar aquí es esa función de salida. Podemos simplemente ejecutar esa función de salida. Esto debería funcionar. Es una forma rápida y sucia, pero debería funcionar. Salida. Veamos si esto funciona. Ahora vamos a ejecutar nuestro código. Lo hicimos, lo hicimos en falso tiempo, suerte. Perdón por eso, pero llegamos ahí al final. Solo recuerda qué es lo que hemos hecho. Estoy tratando de mostrarles que una promesa, la creación real de una promesa se hace en el hilo principal. Es solo cuando empezamos a golpear estas declaraciones de links, aka cuando se llama al método resolve. ¿ Entonces nos bajamos del hilo principal? Y ahí es donde ocurre la magia asíncrona. Sólo quería dejar eso claro. Es por eso que aquí nos dan uno síncrono a nosotros de vuelta primero, obtenemos síncrono dos vectores dados a continuación. Entonces finalmente obtenemos esta declaración de retorno de todo hecho. Por cierto, podrías estar pensando, ¿por qué acabo de poner las salidas del nombre de la función? No necesito pasar en una variable x. es más o menos hacer eso detrás de escena. Podría haber sido, si el argumento es bien, podríamos haber tomado los datos. En este caso, sólo va a ser la hija de texto todo hecho. Y después podemos escribirlo después de la forma habitual que solíamos hacer en este curso. Y luego por supuesto, ejecutar esa función de salida y pasamos esos datos. Entonces podríamos haber escrito un Titus. Acabo de hacer un atajo. Si volvemos a ejecutar este programa, eso nos debe dar exactamente lo mismo que hace. Lo sé, sé que esto es bastante avanzado, bien hecho por quedarse conmigo. Y no es necesario estrictamente saber esto para trabajar con asíncrono y esperar. De hecho, ni siquiera necesitas saber esto al trabajar con Ajax. Pero quiero que seas mejor que la carrera. Espero que te hayas divertido mucho y espero que esto sea solo ******** algo más de luz sobre cómo funciona el Vancouver y cómo funciona el código asíncrono. En realidad, no son dos amenazas principales no funciona de esa manera cuando se trata de JavaScript. Pero en x laca sí. Si pudiera quitarme las cosas la tarea principal, tú las vuelves a poner. Es muy interesante que ya basta del bucle de eventos, creo que ya tienes suficiente de un conocimiento de alto nivel al respecto. En la próxima conferencia, realmente quiero empezar a hablar de asíncrono y esperar. Queremos mejorar nuestra facultad de API de Fetch. No puedo esperar a verte en la próxima conferencia. 5. Introducción a Async / Espera: Por último, estamos en el tema de asíncrono y esperamos. ¿ Qué es exactamente? Bueno en primer lugar, podemos agregar asíncrono y esperar. Estas son solo palabras clave que nos proporciona JavaScript para reducir nuestras declaraciones. Recuerda cuando estamos lidiando con llamadas de peces, con lidiar con promesas. Y cada vez que una promesa se resuelve, la declaración de primera cosa se ejecutará dentro de esa declaración cosa. Necesitas promesa devuelta, entonces buscará la próxima declaración del decano. Entonces en realidad, como hemos visto, puedes tener múltiples cadenas de paletas. Esto puede llegar a ser bastante confuso. Confía en mí, sobre todo si tienes un código muy complejo y has puesto muchas promesas siendo resueltas. Una solución es usar asíncrono y esperar que nos permita escribir código de manera síncrona. A pesar de que todas estas promesas están sucediendo en segundo plano. No te preocupes si no sabes a qué me refiero, te voy a mostrar en breve. El punto que estoy tratando de hacer es que usar async y aguardar funciona muy bien con Ajax porque usas async y esperas al trabajar con promesas. Y por supuesto sabemos que Fitch usa promesas antes de hablar de espera. Recuerda las dos palabras clave todavía, asíncrono y un peso. Quiero hablar de asíncrono, no in-sync, no de un fregadero. Me encantan las bromas de mi papá. Quiero hablar de asíncrono y poner la palabra asíncrona antes de funcionar. Significa una cosa simple. No te pierdas en todo el detalle. Sólo significa una cosa. ¿ Qué hace, qué nos dice? ¿Qué está haciendo? Es decirle a la función que nos devuelva una promesa. Qué raro, pero no hay nada mejor que mostrarte con un ejemplo en vivo. Vamos a pasar al Editor de Texto ahora. 6. Async devuelve una promesa: Si conoces el taladro, Eso es crear un nuevo archivo. Llamémoslo simplemente por falta de una palabra mejor, mensajes ab.js. Porque voy a crear una función llamada mensaje. Por eso vamos a crear una función llamada mensaje. Para hacerlo en JavaScript, solo usamos la palabra clave function. Podemos llamarlo todo lo que queramos. He llamado mensaje. Entonces dentro de estos corchetes rizados definimos lo que queremos que suceda. Sí, sólo quiero devolver la palabra Hola. Eso es todo lo que quiero pasar. Sí, podría ejecutar esto en el navegador. Entonces podemos ver los resultados. ¿ Por qué no solo uso coca? Ithaca nos permite ejecutar JavaScript en tiempo real en este editor de texto, es muy, muy útil. Es gratis por cierto, mi voz amaba a Mahila. Muy bien, lo que quiero hacer, vamos a registrar la consola esta función. Sí, esperaríamos que el resultado sea hola, que es lo que ves en pantalla. Eso tiene sentido intuitivo. Pero recuerda lo que dije en la conferencia. Asíncrono se puede utilizar antes de cualquier función. Eso es bastante guay. Entonces, ¿qué editamos frente a nuestra función? ¿ Recuerdas lo que dije? Usar asíncrono significa una cosa. En lugar de función devolverá una promesa. Así que vamos a probarlo. Pongamos asíncrono frente a nuestra función. Ahora cuando ejecutamos esta función, no obtenemos ese texto Hola, obtenemos una promesa. ¿ No es interesante eso? Eso es todo lo que hace. Esa palabra clave asíncrona devuelve una promesa, pero Clyde, ¿no podemos simplemente devolver explícitamente una promesa? Podemos, en lugar de regresar Hola, ¿no podemos devolvernos un precio? ¿ Qué hacen? Eso nos da exactamente lo mismo que nos da una promesa, claro esta vez Eso no va a resolver a la palabra Hola. No lo tenemos en su animal. Y así lo que podríamos hacer es que pudiéramos ejecutar el método de resultados. Y aquí podemos escribir la palabra hola. Es exactamente lo mismo que nosotros haciendo eso poniendo asíncrono, entonces podemos deshacernos de la asíncrona. Vamos a estar consiguiendo exactamente lo mismo. Entonces en lugar de escribir ese gran largo lleva nombre de mentira, podemos poner la palabra asíncrono. Y por supuesto que no necesitamos ahora resultados prometedores. Podemos simplemente devolver lo que queramos devuelto de la promesa. ¿ Eso tiene sentido? ¿ Estás conmigo? Lo siento, caiga. Eso es todo en la palabra asíncrona hace. Asíncrono asegura que la función devuelve una promesa. Suficientemente simple, no sólo hace eso. Hay otra palabra clave que estoy dejando fuera. Y eso es una espera. Esperar solo funciona dentro de funciones con la palabra clave asíncrona. Algún trueno afuera, está lloviendo, está lloviendo. Sin embargo, necesitábamos. No hemos tenido lluvia en pocos días. De todos modos donde estaba encendido. Sí. Sólo hemos discutido asíncrono que devuelve una promesa. Pero en la próxima conferencia, quiero empezar a mostrarte sobre la palabra clave await. No puedo esperar para mostrarte. 7. Introducción a la palabra clave de esperar: Hall, todas las cosas buenas llegan a su fin y un poco triste porque sé que nos acercamos al final de este curso. Pero no te preocupes, aún no hemos terminado del todo. Aún no hemos terminado del todo. Y siempre estoy subiendo a nuevos cursos. Así que espero que no fuéramos caminos aquí para siempre. Pero de todos modos, estamos hablando de asíncrono y esperamos. Miramos lo que hace la palabra clave asíncrona. ¿ Te acuerdas? Eso es correcto. Async asegura que la función devuelve una promesa. Podríamos hacer esto manualmente, pero es simplemente engorroso. Entonces asíncrono es sólo una buena forma práctica para que podamos decirle a la función que nos devuelva una promesa. Eso lo sabemos. Pero ahora quiero hablar de espera. Lo primero es que solo funciona dentro de funciones asíncronas si intentas usar la palabra await en una función aleatoria en algún código, simplemente no va a funcionar. Tienes que usarlo dentro de una promesa, dentro de una función con la palabra clave async. Espera, hazlo, supongo que la palabra real misma la regala. Hace que JavaScript espere hasta que su promesa se asiente y devuelva su resultado. Muy, muy intuitivo. Da un paso atrás sin embargo. No te pierdas en todo el detalle. El propósito de asincronizar y esperar es simplificar la sintaxis necesaria para consumir API basadas en promesas. No tienes que usar await async cuando haces una llamada a Fitch ajax, solo podrías hacer simples cuestionarios futuros con todas esas declaraciones entonces y atrapar todas las áreas en el bloque catch. Eso está perfectamente bien. No obstante, a veces puede ponerse desordenado, a veces se vuelve confuso. Y en aquellos casos tu código comienza a ponerse un poco desordenado, a menudo, quieres recurrir a usar async y esperar. Simplemente es mucho más fácil de leer. Es mucho más fácil de seguir. El modo en que lo pienso es que tomo una función asíncrona. Dentro de esta función asíncrona, se puede pensar que se divide por 0 o más expresiones de peso. Y su código dentro de esa función hasta e incluyendo la primera expresión await se ejecuta de forma sincrónica. Sabemos que la ejecución síncrona ocurre automáticamente de forma predeterminada en JavaScript. Y es sólo si y cuando hay una expresión de espera dentro de su función. ¿ Sabe el navegador para ejecutar este código de forma asíncrona, aka fuera del hilo principal. Es muy, muy interesante, muy intuitivo. Pero suficiente charla, suficiente teoría. Saltemos a la siguiente conferencia. Paremos aquí. Y te mostraré un ejemplo de usar asíncrono y usar una espera. No puedo esperar a ver, ya sabes. 8. Ejemplo de uso de Async / Espera: Las acciones hablan más fuerte que las palabras, por eso, ya sabes, me encantan mis ejemplos. Así que ahora usemos asíncrono y esperemos, y te mostraré cómo funciona. Es muy, muy interesante. Quería encontrar una función llamada mensaje. Entonces quiero ejecutar un montón de cosas dentro de aquí. Notamos lo que quiero hacer es que finalmente quiero obtener el resultado de hola mundo. Eventualmente intenta llegar a ese resultado solo texto que nos da la consola, pero quiero hacerlo usando dos funciones asíncronas. Vamos a dividir cada palabra. Primero tratemos con la primera palabra, ponerla en una variable llamada primera palabra. Y quiero ahora usar promesas. Normalmente no podemos hacer esto, crea una promesa, y por supuesto sabemos que nos da resolución y rechazo. Realmente no estamos usando la propiedad de rechazo que de todos modos, está ahí. Si queríamos, ahora podemos usar el método setTimeout solo para falsificar una llamada a la API. Sólo creemos tiempo, un espacio de tiempo. Por supuesto, dentro de aquí, quiero resolver la palabra hola porque esta es la primera palabra que queremos, y quiero que esto tome 1 segundo. No podemos hacer esto. ¿ Porque por qué? ¿Eso es correcto? Porque estamos implementando una promesa. Los resultados no estarán disponibles en esa primera palabra variable. Entonces esto no va a funcionar. Para que funcione. Queremos convertir toda esta función en una función asíncrona. Hacemos eso mediante el uso de la palabra clave asíncrona al frente. Ahora sabemos que esta función nos va a devolver una promesa. Pero de nuevo, la línea cuatro aún no funcionará. Vamos a conseguir un error. No me crees. Déjame mostrarte. Déjame mostrarte. Al final queremos consola log. No lo sé, utilicemos literales temporales. Podemos decir hecho. Y claro que aquí tenemos la primera palabra. Esto no va a funcionar. Ahora se ejecuta nuestra función llamada mensaje. No obtenemos los resultados que esperaríamos. De hecho, vamos al navegador. Ahí vamos. Vamos a pegar nuestro código que se ejecuta la función de mensaje. Ahí vamos. Nos quedamos indefinidos. Estamos recibiendo errores aquí. Eso es un problema. No queremos esto, solo queremos el mensaje sencillo, hola. No va a funcionar porque esta primera palabra, variable de propiedad, aún no está disponible para esperar hasta que la promesa se resuelva e ingresaron a esa variable de primera palabra. Utilizamos la palabra clave await. Esto es lo fácil que es trabajar con asíncrono y esperar. Bueno, esa es la primera palabra. Antes de seguir adelante, sólo vamos a crear una segunda palabra. Primera palabra. Sí, podemos llamarlo segunda palabra. Y sabemos que la segunda palabra está engañada. Aquí vamos. Entonces cuando consolemos log y terminamos, podemos decir primera palabra. Por supuesto que podemos tener resolutores, no la multa, por supuesto resultados no definidos. Y lo he llamado RES. ¿ Sabes qué debo cambiar? Puedo hacer este resultado o cambiar en matrices, pero solo hagamos esa resolución. Ahí vamos. Ahora claro, cuando ejecutamos esta función de mensaje, todo debe ir según lo planeado. Ocurre co-ocurre nos dice que obtenemos la consola registrada, terminada. Hola Mundo. Pero mis queridos alumnos, quiero que entiendas por qué. Déjame simplemente alejar. Déjame desplazarse hacia arriba. Este es todo nuestro bloque de código. Permítanme explicarle lo que pasa aquí. Y esto va a ser muy técnico, pero es muy, muy importante para ti entender este ejemplo. Esperábamos a las promesas. Qué va a pasar. Bueno, vale, hablemos del código que se ejecuta. Sabemos que el progreso se mueve a través esta función de mensaje en tres etapas. Etapa uno, la primera línea del cuerpo de la función se va a ejecutar de forma sincrónica. Este es el comportamiento predeterminado de JavaScript. Esto significa que vamos a golpear línea para, esto es lo primero que se va a ejecutar. Pero ahora, cuando el analizador golpea que esperan palabra clave, el navegador sabe que hay una promesa de pintura. Tiene que esperar lo que va a pasar. Bueno, el resultado es que el progreso de nuestra función de mensaje se va a pausar y se va a devolver el control al entorno que llamó la función de mensaje. En este caso, mezclaré cada función que se llama en el alcance de la ventana y nada más está sucediendo en las principales amenazas y nada más va a suceder. Pero esto es lo que está pasando detrás de escena. Etapa a algún tiempo después cuando la primera promesa ha sido o por pliegue o rechazada. El control va a volver a pasar a este mensaje. Función, resultado de la primera promesa, escucha la palabra hola. Va a ser devuelto de la expresión de espera. Aquí. La palabra hola se asigna a la variable llamada primera palabra. Eso está hecho. Seguidamente continuará el progreso. El pasado va a ver ahora la segunda palabra clave esperar. Nuevamente, el navegador sabe que hay una promesa pendiente que necesita esperar y progresar. Y cuántas funciones de este tipo se van a pausar ahora de nuevo. Y el control se va a devolver al medio ambiente. Ese mensaje frío. Simplemente repitiendo el proceso aquí. último pero no menos importante, la tercera etapa, algún momento después cuando las segundas promesas ya sea cumplidas o rechazadas, control va a volver a ingresar esta función de mensaje. Por supuesto, el resultado de la segunda resolución de promesa es retorno de la segunda expresión de espera. En nuestro ejemplo, la palabra mundo está asignada a una variable que definimos como segunda palabra. Pero ahora es la diferencia clave porque ahora no tenemos otra palabra clave await. El control se va a mover a través de esta función de mensaje, eventualmente golpeando una expresión de retorno. Aquí solo estamos la consola registrando algo a la pantalla. ¿ Lo tienes? Te dije que esto es muy avanzado. Espero que estés entendiendo, espero que te esté explicando hasta que lo suficiente realmente sea bastante intuitivo una vez que entiendas cómo funciona. Pero antes de terminar esta conferencia, déjame solo plantearte una pregunta más. Recuerda que dije que cuando deuda esperan palabra clave es golpeada por el analizador, dije que el control se va a ceder de nuevo al entorno que llamó, eso hace que la TI funcione en primer lugar. Recuerda que dije eso y él tiene los ambientes de la ventana y no pasa nada más. Pero, ¿a qué me refiero? ¿ Qué pasa si no es el objeto de ventana el que llamó a esta función de mensaje? ¿ Y si fuera otra función? Sé que se está complicando un poco, pero déjame mostrarte lo que quiero decir. Vayamos aquí abajo. Eso no es ejecutar esta función ahora solo vamos a comentar. Digamos que tenemos otra función. Y esta función, llamemos a execute por falta de una palabra mejor. Y dentro de esta función, queremos ejecutar esta función de mensaje. Y queremos un registro de consola am primero a la consola. momento no he ejecutado esta función, acabamos de definirla, pero qué crees que va a pasar ahora, en base a lo que dije hace unos instantes, para ilustrar la calle en una copia barata estas dos funciones, navegador, consola. Lo que va a pasar fuera ejecuto esta función. Vamos a intentarlo. ¿Qué tan impresionante es que nos ejecuten? Yo soy primero, primero. Y sólo una vez que todos esos tiempos establecidos hayan resuelto que terminemos la palabra, Hello World regresó a nosotros. O solo estudiantes, ¿qué tan impresionante es esto? Lo que es realmente genial con esto sin embargo, es que estás entendiendo lo sucede detrás de escena. Porque cuando el analizador golpea esa primera palabra clave de espera, eso va a ceder el control lejos de esta función de mensaje al entorno, luego llamarlo, y esa es esta función de ejecución. Y va a seguir ejecutando código de forma sincrónica. Sabemos mientras está en pausa y mientras eso promete resolver, sabemos que ese registro de consola primero me van a dar primero antes de que se ejecute toda la función de mensaje. El motivo por el que tuve que ir al navegador por cierto, claro, si ejecuto esta función ahora, ¿por qué no muestra nada? Coca-cola y muéstranos el orden en lo que se hacen las cosas. Para que podamos ver aquí que obtenemos, yo soy primero n, terminamos. Hola mundo. No podemos ver el orden de cuándo sucedió. Por eso quería mostrarte aquí cómo funciona. Déjame mostrarte de nuevo, en realidad puedes ver el tiempo que se tarda en ejecutar esos tiempos de espera también. Es fascinante. Entonces definamos nuestras funciones. Vamos a ejecutarlo. Llegamos de inmediato, yo soy el primero que tenemos que esperar dos segundos y luego lo hacemos. Fascinante. Quiero parar aquí. Quiero tener un descanso. En la siguiente conferencia, les voy a mostrar otro ejemplo rápido y nombrado finalmente, quiero que utilicemos lo que hemos aprendido. Quiero que utilicemos la palabra clave async y await para mejorar el código que hemos hecho anteriormente en otros ejemplos. No puedo esperar y te veré en la próxima conferencia. Ok. 9. Segundo ejemplo de uso de Async/Await: Ya sabes, me encantan mis ejemplos porque realmente creo que los ejemplos conducen el punto a casa. Sólo quiero que se acostumbre mucho al concepto de viento que esperan palabra clave es hits por la pasa. El avance de toda la ejecución en JavaScript es delgado posado en esa función y se le da control al entorno que por supuesto ejecutó esa función. Sólo quiero que te acostumbres a ese concepto. Entonces, ¿por qué no creamos una función asíncrona para que sepamos que va a devolver una promesa. Utilizamos la palabra clave function en JavaScript. Vamos a llamarlo foo. Esto es simplemente simulacro de convención. No sé por qué usamos comida todo el tiempo. Es sólo una función confeccionada. Es sólo un nombre de función. Podríamos haberlo llamado como sea que queramos. Quiero ahora definir una promesa y es instanciar la función constructor prometida. Sabemos que tenemos x que resolver y rechazar en nuestra función constructor. Por supuesto, ¿qué queremos que pase aquí? Simplemente consiga todos los corchetes y todo eso ordenado. Estamos listos para ejecutar. Todo lo que quiero hacer es implementar el método SetTimeout. Realmente no quiero que pase nada más que resolver esta promesa. Y podemos resolver la palabra hola. ¿ Cómo está? Bastante simple en cien, diez cientos milisegundos. Aquí vamos es toda función asíncrona muy simple llamada foo. Lo siguiente que quería hacer, no quería ejecutar esto en este momento . ¿Sabes lo que voy a hacer? En realidad solo escribimos esto en nuestro estado en la F, simplemente más fácil ver lo que está pasando. Por supuesto, a menos que inhiba el capital N por nuevo. Ahí vamos. Ahora voy al editor de texto al menos nos está diciendo que todo es una K. Sintaxis es muy importante cuando se trata de codificación. Obviamente, tu computadora solo entiende 1's y naughts, aka impulsos eléctricos. Es basura adentro, basura fuera efectivamente, si hago algún error, si no lo hago, si llamo a esta promesa promesas, el motor JavaScript no va a entender lo que es eso, va a ser. Basura. Entonces de todos modos, por eso la nueva palabra clave es muy específica. Y JavaScripts, tengo que usar mu minúscula. Ese fue mi error. De todos modos, todavía estamos dentro de esta función foo. Hemos implementado una promesa. El promesa se va a resolver con la palabra hola en 1 segundo. Ahora, esto es lo que quiero mostrarte justo hasta este punto no hemos usado la palabra clave weight. Lo que quiero hacer es definir una variable de mensaje. Y esperemos esta promesa. Para entender qué es lo que estoy tratando de hacer. Voy a esperar hasta que la promesa anterior se resuelva con la palabra hola. Eso es lo que voy a hacer. Y luego lo voy a poner en una variable llamada mensaje. Interesante. Entonces por supuesto lo que quiero hacer es que quiero alertar mensaje al navegador. Quiero que suban ese pequeño pop-up y quiero que veamos la palabra hola. Vayamos al navegador. Está claro, todo es definir nuestra función. Ahí vamos, lo hemos definido. Permítanme acercar un poco dadas nuestras conversaciones que hemos estado teniendo. Dado el ejemplo que te mostré en la conferencia anterior. Quiero que pienses lógicamente lo que pasa aquí. Bueno, en primer lugar, vamos a ejecutar esta función para que puedas ver qué pasa. Lo hemos ejecutado. Resolver no está definido. Vamos a aclarar esto. Yo lo llamé. Hagamos subir. Aquí vamos. Y volvamos a llamar a la función. Ahí vamos. Y recibimos la alerta diciendo hola. Eso por supuesto sucedió después de 1 segundo, como esperaríamos. Ahí vamos. Esto tiene sentido. Pero ¿entiendes ahora la lógica? Permítanme explicar el nivel lógico. Probablemente ya lo sepas, pero déjame conducir el punto a casa. Echemos un vistazo a nuestro código. La ejecución de la función va a tirar de qué línea? Bueno, se va a hacer una pausa cuando golpee esa palabra clave esperan. Se va a hacer una pausa online en comió. Sabemos cualquiera que sea el entorno llamado a esta función foo, que el dolor seguirá ejecutándose de manera síncrona. Cuando la promesa finalmente devuelve un resultado, entonces se va a devolver el control a esta función foo. Por supuesto entonces ejecutamos ese mensaje de alerta, tiene sentido. Esto es lo que quiero enfatizar. Usando la palabra esperar literalmente suspende ejecución de la función y dijo que la promesa se asienta. Entonces se va a reanudar con el resultado de la promesa. Esto no cuesta ningún recurso de CPU porque el motor JavaScript puede hacer otros trabajos. Mientras tanto, puede ejecutar otras funciones o los scripts manejando beans, etc, etcétera Es muy, muy potente. Pero de todos modos, creo que tienes un entendimiento de alto nivel lo suficiente como para empezar a cavar más profundamente en asíncrono y esperar. Antes de terminar esta sección, esta clase, quiero que uses lo que hemos aprendido de una manera práctica. En la siguiente conferencia, quiero llamar a algún código que hemos visto anteriormente. Y quiero que intentes convertir ese código o mejorar su código mediante el uso asíncrono y esperar. No puedo esperar y te veré pronto. 10. Introducción al desafío: cómo mejorar nuestro código de Fetch de la clase anterior: Bienvenido, bienvenido, bienvenido. Si te diviertes mucho. Ahora bien, está bien, aquí estamos. Este es código de unas cuantas secciones, clases, Beck y ya sabes, el cajón que teníamos esta API de Fitch que hacía llamadas para hacer diferentes sitios web. El primer pedido de función fue reemplazar este golpe por nuestra dirección IP. El mío no está funcionando por el momento porque estoy en Zimbabwe, en África. Y oye, a veces no tenemos poder. Ahora mismo. No tengo energía, ni electricidad. Y eso significa, por supuesto, no hay enrutador y Wi-Fi. Así que no puedo probar este código ahora mismo contigo. Pero lo que puedo hacer es que podamos mejorar nuestro código, podemos refactoriarlo. El segundo rostro tu quiz, hicimos el resto a nuestro propio servidor, mostrando una imagen, pincha en el botón y te mostramos Ajax. Si vamos a nuestro código, podemos ver aquí en la parte inferior del archivo, esta es nuestra búsqueda de características a Fitch esas imágenes. Y hay un montón de temas declaraciones. Es una declaración de captura. Quiero que pienses en cómo podemos cambiar esto, cómo podemos mejorar este código mediante el uso asíncrono y esperar, dale una ir tú mismo. Detengamos la conferencia aquí. Y en la siguiente conferencia, déjame codificarlo con tu conducto y te veré en breve. 11. Solución del desafío: cómo encontrar nuestra imagen usando async/await: ¿ Le diste una oportunidad? Eso espero. espero porque eso es lo más importante. Ni siquiera importa si no lo hiciste bien. Lo más importante es que le diste una oportunidad. Permítanme hacer esto de una manera fragmentaria para que entiendan lo que está sucediendo. Podrías haber pensado, Hey, sabemos que Fetch devuelve una promesa. Nos ocupamos de promesas para que podamos lidiar con asíncrono y esperar. Pero incluso antes de eso, se podría pensar, oye, pongamos esto en una variable llamada respuesta. Y podemos ejecutar esta función de fetch. ¿ Sabes qué? Déjame simplemente, déjame solo comentar todo lo demás aquí afuera. Vamos burro confundido. Podrías haber pensado, vale, agarremos nuestra respuesta. Sabemos que las respuestas sobre transmisión legible te podrías haber sentido bien, bueno, intentemos extraer los datos tomando esa respuesta y ejecutando el método blob en él. Porque sabemos que estamos lidiando con una imagen. Son datos binarios, no es JSON. Entonces por supuesto, permítanme realmente sólo copiar las siguientes líneas de código aquí abajo. Podrías haber sido salvado. Definamos una URL de imagen mediante el uso de la interfaz URL y pasando este objeto de datos. haber intentado hacer eso. Entonces por supuesto, tomando los elementos fuente de la imagen y asignándola a esa URL de imagen. Por supuesto, el paso final es el éxito del registro de consola a la pantalla. ¿ Esto va a funcionar? Bueno, vamos a probarlo y vamos a nuestro navegador. Por supuesto, ahora cuando hago clic en el botón, no está funcionando. Qué mensajes de error que estamos recibiendo. Estamos recibiendo una respuesta de error de tipo. Blob no es una función. ¿ Entiendes por qué? ¿ Por qué estamos recibiendo este error de tipo? Bueno, si volvemos a nuestro código, solo recuerda, la razón por la que estamos obteniendo esta era es que aunque sabemos el objeto de respuesta tiene el método blob, cuando el navegador llegue a la siguiente línea de código siendo en línea 97 y alcanos, el objeto de respuesta, esa variable. Todavía no ha vuelto del carbón fago. Recuerda que la llamada de Fitch se está haciendo en otro hilo aparte de tres, eso se está haciendo en paralelo al hilo principal. Por eso estamos recibiendo un error. De acuerdo, el cliente querrá o no, entonces solo añada la palabra esperar delante de Fitch y esperar frente al método blob, ¿verdad? Esos son los únicos dos que devuelven una promesa, por lo que no necesitamos esperar en ningún otro lugar. Funcionará esto? Bueno, eso tampoco funcionará. Vamos al navegador, refrescar todo. Marque el botón. No está funcionando. No va a funcionar. ¿ Por qué no va a funcionar? Eso es correcto. Porque hay que usar await dentro de una función sinc. Entonces solo tenemos que ampliar nuestro código un poco más. Pero verás que vale la pena porque se vuelve muy fácil de leer. Recuerda, necesitamos la palabra clave asíncrona y luego necesitamos definir una función. Digamos que se llama imagen de Fitch y todo reside dentro de estos corchetes rizados. Aquí vamos, empezando a tener sentido. Ahora, hemos definido una función. Hemos puesto el día de la palabra clave asíncrona, estamos usando un peso. Podemos leerlo de manera síncrona. Y por supuesto entonces en realidad tenemos que implementar o ejecutar esta función, ¿verdad? De lo contrario no pasará nada. Ahí vas. Así es como usamos asíncrono y esperamos. ¿ Esto va a funcionar? ¿ Qué opinas? Vamos al navegador. Haga clic en la imagen. Wow, eso es muy, muy guay, ¿no? No te pierdas en todo el detalle. Es montura muy simple de leer. No voy a pasar por la lógica en detalle porque ya sabes cómo funciona eso. Pero solo recuerda en nuestro código original, si te desplazas hasta aquí, realidad implementamos algunas otras funciones, verificamos el estado y convertimos a blob. Aquí mismo. Pasamos por alto aquellas cosas que no son buenas. Nosotros sí queremos revisar el estado y sí queremos poner nuestra lógica en otro lugar. Si nos desplazamos hacia arriba, tenemos la sección llamada funciones universales. Hemos definido ciertas funciones. Hemos definido una función llamada check status. Pero, ¿qué tiene de interesante? Eso es correcto. Devuelve una promesa. Interesante. Y voy a fundir conversos a blob también devuelve una promesa porque sabemos que el método blob devuelve una promesa. Entonces, ¿por qué mejoramos ligeramente este código? Creo que la primera línea está bien. La respuesta es lo que recuperamos de nuestro carbón en forma. Entonces sólo queremos lidiar con una buena respuesta. Una respuesta. No quiero ejecutar nuestra función blob. Lo que quiero hacer es que quiero implementar nuestra función check status y pasamos en nuestro objeto de respuesta. Esto lo sabemos. Una vez que tengamos esa buena respuesta, el siguiente consejo es convertirlo en una mancha. Entonces, ¿por qué no lo llamamos en un blob data por falta de una mejor palabra. Y sí, podemos ejecutar nuestra función Convertir a blob. Eso tomará nuestros buenos datos de respuesta. Ahí vamos. Literalmente hicimos el trabajo de deberia. Si vamos al navegador, todo, haga clic en la imagen. Era de referencia, hija no está definida. ¿Qué he hecho mal? Los datos aquí deben ser blogueados curso hija. Volvamos a nuestro navegador. Haga clic en Mostrar imagen. ¿ Qué tan impresionante es eso? ¿ Qué tan impresionante es eso? Estoy muy, muy contento con esto. Mis queridos alumnos, ¿Qué tan guay fue esto? Ahora quiero que hagamos una pausa aquí la conferencia. Se detendrá la conferencia aquí. Quiero que intentes hacer exactamente lo mismo, mejorar el código. Pero si me desplazo hacia arriba, quiero que hagas lo mismo por buscar la dirección IP. Aquí está, el carbón Fitch para obtener nuestra dirección IP. Detengan la conferencia aquí, intente convertir esto usted mismo. Y luego te mostraré cómo lo hice en la próxima conferencia. 12. Solución del desafío: cómo encontrar nuestra dirección IP usando async/await: ¿ Le diste una oportunidad? Eso espero. Eso espero. Y todavía no tengo Internet aquí termina y no tenemos poder. Así que no puedo saborearlo, pero lo voy a anotar contigo. Si no es correcto, por favor háganme saber en las preguntas y respuestas y lo arreglaré, pero ojalá prevalezca lógico y tenga sentido. Entonces, ¿cómo convertimos esto? ¿ Cómo lo arreglamos? Bueno, en primer lugar, vamos a deshacernos de todo este bloque. Si no lo necesitamos. Se define ahora una función asíncrona. Podemos usar la palabra clave function en JavaScript. Podemos llamarlo Fitch IP porque es exactamente lo que estamos haciendo dentro de este bloque de código aquí podemos realizar nuestro ajuste real tu pregunta, ¿qué sigue? ¿ Qué hacemos? Bueno, no lo sé. Digamos simplemente nuestra respuesta rural. Sólo te estoy mostrando que podemos definirlo. Todo lo que queramos es el resultado de esta solicitud de Fitch. Y por supuesto que estoy usando la palabra clave asíncrona aquí porque sabemos que esa solicitud de característica devuelve una promesa. ¿ Qué es lo siguiente? Bueno, queremos comprobar con ello, tenemos una buena respuesta. Entonces definamos una variable llamada buena respuesta y ejecutemos nuestra función check status, que pasamos a ella, nuestra respuesta rural. Realmente se puede ver que esto es muy, muy simple, es muy intuitivo. Sabemos una vez que tenemos la respuesta de vuelta de esa FetchRequest, sabemos redoblar stream. Sabemos que es Jason porque hacemos una llamada a esta URL API de tiempo mundial y nos dice que nos devuelven datos JSON. Lo que queremos hacer es que realmente queremos definir una variable llamada data, que va a ser JSON. En realidad no lo es, va a ser un objeto JavaScript, pero sabemos que va a ser el resultado de como tener frío el método JSON. Utilizamos la palabra clave esperar una vez más, si sacamos buena respuesta, sabemos que tiene este método JSON. Ahora vamos al método JSON. Sabemos por conferencias anteriores que la deuda nos devuelve una promesa. Por eso tenemos que usar la palabra clave await. Por supuesto, podemos acabar con el mismo ejemplo de llanta. Al agarrar nuestra IP toma selector de consultas. Podemos agarrar nuestro elemento HTML que tiene un ID de IP toma, creo que así lo llamamos. Esto es desplazarse hacia arriba. Estas son las tomas IP de cabecera, ¿lo ves? Vamos pequeña t. Si p toma, vamos a hacer sólo dientes pequeños. Esto cambia su propiedad HTML interna a lo que sabemos en este objeto JavaScript. Vamos a devolvérnoslas. Cuenta con una propiedad llamada Client IP. Ya hemos hecho esto antes. ¿ Sabes de qué estoy hablando? Esto debería funcionar. En realidad no debería porque aún no hayamos ejecutado una función. Entonces por supuesto, fuera de este bloque de código, ejecutemos esta función. Alumnos del mit, esto debería funcionar. Como mencioné, no tengo poder. Entonces no va a funcionar para nosotros. Es por eso que este sabor golpeador no ha sido reemplazado. Pero se obtiene el punto. Creo que esa lógica se mantendrá si hay algo malo en ella. Por favor solo mire en los comentarios. Ya se resolvieron algunos cortos. Pero sí. Sí. Espero que te diviertas. Me estaría divirtiendo. Sólo hay una cosa más que quiero mencionar. Eso es épocas. En este momento. Aquí no estamos captando errores. Ya sabes qué, déjame borrar plus ahora déjame mantener el día común. Está bien. Pero ahora mismo si volvemos a nuestra imagen, carbón, no estamos lidiando con áreas. En la siguiente conferencia, déjame simplemente mostrarte rápidamente cómo podemos usar un bloque try and catch para lidiar con errores. No puedo esperar. 13. Manejo de errores usando Try y Agarre: Lo final de lo que quiero hablarte es el manejo de errores. Quiero decir, sabemos que hemos ejecutando chequear status convertir a blob. Y si vamos a estas funciones en la parte superior de nuestro código, sí tenemos algún manejo de errores. Lo llamamos método de rechazo. Por ejemplo, si la respuesta está bien, la propiedad es falsa. Pero, ¿qué pasa si tenemos otras áreas? ¿ Y si tenemos áreas no en esos bloques de código? Bueno, hay una solución muy fácil a esto. Y es decir, podemos envolver todo nuestro bloque de código en una declaración try. Muy, muy útil, muy, muy intuitiva. Entonces simplemente movemos nuestro código todo dentro de este try-block. Y lo que hace es que permite todas las áreas sean atrapadas por este bloque de captura. Por supuesto, nos devuelven un objeto de error que podemos poner en cualquier variable. Lo pongamos en una variable llamada Era. Y luego se ejecutará esta función de devolución de llamada son médicamente y por supuesto que puedes hacer lo que quieras. Este solo registro de consola que el objeto aéreo apuesta al usuario. De acuerdo, Así que literalmente podemos simplemente hacer esto, ponerlo en un intento y coger bolsillos. Muy sencillo. Te lo dije, te dije que no va a ser difícil. Y luego tienes un error, como una URL incorrecta. Vaya al navegador, vaya a la consola y haga clic en la imagen. Recibimos un error. Y este es nuestro error personalizado. Permítanme que te lo demuestre. Hola Mundo. Tenemos, volvamos al navegador. Haga clic en la imagen, y luego vamos, Hola mundo. Uy, este bloque de captura en realidad está captando el error. Espero que todo esto tenga sentido. Si me divertí mucho en este falso, hemos cubierto un montón de información. Dando un paso atrás, quiero que te des cuenta que realmente has recorrido un largo camino. Ya sabes qué son los datos JSON, datos XML, conoces la historia de Ajax, de dónde proviene. Ya sabes lo que es una función constructor que solíamos usar el objeto XHR. Y la lista continúa. Walden, acariciate en la espalda. Ahí, lo tenemos. Muy, muy simple. Esta fue una conferencia muy rápida. Espero que puedan empezar a ver el poder de usar asíncrono y esperar.