{"id":763,"date":"2024-07-30T20:48:45","date_gmt":"2024-07-30T18:48:45","guid":{"rendered":"https:\/\/blog.sutilweb.eu\/?page_id=763"},"modified":"2024-07-30T20:48:45","modified_gmt":"2024-07-30T18:48:45","slug":"005-async-await","status":"publish","type":"page","link":"https:\/\/sutilweb.eu\/index.php\/lenguajes\/javascript\/javascript-practico\/08-programacion-asincrona\/005-async-await\/","title":{"rendered":"005. Async &#8211; Await"},"content":{"rendered":"\n<p>En estos \u00faltimos cap\u00edtulos estamos viendo como funciona la <strong>asincron\u00eda<\/strong> en <strong>Javascript<\/strong>, empezamos manejando los <strong>temporizadores<\/strong>, la <strong>teor\u00eda de la sincron\u00eda<\/strong> y dos mecanismos que tiene <strong>Javascript<\/strong> para el manejo de la misma como son las <strong>callbacks<\/strong>, donde a\u00fan no tenemos un manejo apropiado de los <strong>errores<\/strong>, y que nos genera la denominada <strong>Callback hell<\/strong>, y las <strong>promesas<\/strong>, que son una evoluci\u00f3n a las <strong>callbacks<\/strong>, y adem\u00e1s nos permiten tener un c\u00f3digo m\u00e1s elegante y ordenado, y nos permite manejar en cualquier petici\u00f3n concatenada que tengamos nos permite manejar el <strong>error<\/strong>.<\/p>\n\n\n\n<!--more-->\n\n\n\n<p>En este cap\u00edtulo veremos una nueva herramienta que son las <strong>funciones as\u00edncronas<\/strong>, que, justamente como su nombre dice, van a esperar a que algo se cumpla para poder seguir ejecutando el proceso que estemos trabajando en ese momento. Las <strong>funciones as\u00edncronas<\/strong> no vienen a reemplazar a las <strong>promesas<\/strong>, al contrario, trabajan en conjunto. Las funciones as\u00edncronas, sabremos que son tales, porque delante de la palabra <strong><em>function<\/em><\/strong> encontraremos la palabra reservada <strong><em>async<\/em><\/strong>.<\/p>\n\n\n\n<p>Veamos la sintaxis de las funciones as\u00edncronas.<\/p>\n\n\n\n<p><strong>Ejm<\/strong><\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">async function funcionAsincronaDeclarada() {\n\n}<\/pre>\n\n\n\n<p>Para el <strong>manejo de errores<\/strong> lo que nos conviene es trabajar un bloque <strong><em>try&#8230; catch<\/em><\/strong>. En el <strong><em>try<\/em><\/strong> se incluye el c\u00f3digo en el que vamos a estar trabajando.<\/p>\n\n\n\n<p>Al trabajar con <strong>funciones as\u00edncronas<\/strong>, cada petici\u00f3n la puedo guardar en una <strong>variable<\/strong> y estar evitando hacer uso de <strong><em>then()<\/em><\/strong> indiscriminado, que es lo que algunos puristas denominan el <strong>Promise Hell<\/strong>.<\/p>\n\n\n\n<p><strong>Ejm<\/strong><\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">function cuadradoPromise(value) {\n\nif(typeofvalue !== \"number\") return Promise.reject\n(`El valor ${value} no es un n\u00famero`)\n\nreturn new Promise((resolve, reject) =&gt; {\n  setTimeout(() =&gt; {\n  resolve({\n  value,\n  result:value * value,\n  })\n}, 1000);\n})\n}\n\nasync function funcionAsincronaDeclarada() {\ntry {\nconsole.log(\"Inicio Async Function\");\n\nlet obj = cuadradoPromise(0);\nconsole.log(`Async Function: ${obj.value} - ${obj.result}`);\n\nobj = cuadradoPromise(1);\nconsole.log(`Async Function: ${obj.value} - ${obj.result}`);\n} catch (error) {\n\n}\n}<\/pre>\n\n\n\n<p>El c\u00f3digo de arriba <strong>no va a funcionar<\/strong>, ya que la clave es que cuando declaramos una funci\u00f3n como as\u00edncrona, hay una palabra reservada denominada <strong><em>await<\/em><\/strong>, que le dice a<strong> Javascript<\/strong> dentro de una <strong>funci\u00f3n as\u00edncrona<\/strong> que espere el resultado de esta ejecuci\u00f3n antes de pasar a la siguiente linea y ejecutarla.<\/p>\n\n\n\n<p>Por lo que la sintaxis de nuestra <strong>funci\u00f3n as\u00edncrona<\/strong> ser\u00eda la siguiente.<\/p>\n\n\n\n<p><strong>Ejm<\/strong><\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">async function funcionAsincronaDeclarada() {\n\ntry {\nconsole.log(\"Inicio Async Function\");\n\nlet obj = await cuadradoPromise(0);\nconsole.log(`Async Function: ${obj.value} - ${obj.result}`);\n\nobj = await cuadradoPromise(1);\nconsole.log(`Async Function: ${obj.value} - ${obj.result}`);\n} catch (error) {\nconsole.log(error);\n}\n}\n\nfuncionAsincronaDeclarada();<\/pre>\n\n\n\n<p>Este mecanismo nos evita tener concatenados varios <strong><em>then()<\/em><\/strong>, con lo que hasta cierto punto nuestro c\u00f3digo ser\u00e1 mas legible.<\/p>\n\n\n\n<p>Es por ello que decimos que las <strong>funciones as\u00edncronas<\/strong> no vienen a reemplazar a las <strong>promesas<\/strong>, trabajan con ellas, nos evitan tener que utilizar demasiados <strong><em>then()<\/em><\/strong>, facilitando el c\u00f3digo y haci\u00e9ndolo mas legible.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Funciones as\u00edncronas expresadas<\/h2>\n\n\n\n<p>Hasta ahora hemos creado <strong>funciones as\u00edcronas declaradas<\/strong>, en los siguientes p\u00e1rrafos vamos a crear <strong>funciones as\u00edncronas expresadas<\/strong>.<\/p>\n\n\n\n<p><strong>Ejm<\/strong><\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">\/\/ Funci\u00f3n as\u00edncrona expressada\nconst functionAsincronaExpresada = async () =&gt; {\ntry {\nconsole.log(\"Inicio Async Function Expresada\");\n\nlet obj = await cuadradoPromise(0);\nconsole.log(`Async Function: ${obj.value} - ${obj.result}`);\n\nobj = await cuadradoPromise(1);\nconsole.log(`Async Function: ${obj.value} - ${obj.result}`);\n\nobj = await cuadradoPromise(2);\nconsole.log(`Async Function: ${obj.value} - ${obj.result}`);\n\nobj = await cuadradoPromise(3);\nconsole.log(`Async Function: ${obj.value} - ${obj.result}`);\n\nobj = await cuadradoPromise(4);\nconsole.log(`Async Function: ${obj.value} - ${obj.result}`);\n\nconsole.log(\"Fin Async Function\")\n\n} catch (error) {\nconsole.log(error);\n}\n}\n\nfunctionAsincronaExpresada();<\/pre>\n\n\n\n<p>Como podemos ver, tanto la <strong>funci\u00f3n as\u00edncrona declarada<\/strong> como la <strong>expresada<\/strong> est\u00e1n consumiendo una <strong>promesa<\/strong>.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>En estos \u00faltimos cap\u00edtulos estamos viendo como funciona la asincron\u00eda en Javascript, empezamos manejando los temporizadores, la teor\u00eda de la [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":746,"menu_order":4,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_uag_custom_page_level_css":"","site-sidebar-layout":"default","site-content-layout":"","ast-site-content-layout":"default","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"","ast-breadcrumbs-content":"","ast-featured-img":"","footer-sml-layout":"","ast-disable-related-posts":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"default","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"footnotes":""},"class_list":["post-763","page","type-page","status-publish","hentry"],"uagb_featured_image_src":{"full":false,"thumbnail":false,"medium":false,"medium_large":false,"large":false,"1536x1536":false,"2048x2048":false},"uagb_author_info":{"display_name":"Sutil Web","author_link":"https:\/\/sutilweb.eu\/index.php\/author\/sutilweb\/"},"uagb_comment_info":0,"uagb_excerpt":"En estos \u00faltimos cap\u00edtulos estamos viendo como funciona la asincron\u00eda en Javascript, empezamos manejando los temporizadores, la teor\u00eda de la [&hellip;]","_links":{"self":[{"href":"https:\/\/sutilweb.eu\/index.php\/wp-json\/wp\/v2\/pages\/763","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/sutilweb.eu\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/sutilweb.eu\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/sutilweb.eu\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/sutilweb.eu\/index.php\/wp-json\/wp\/v2\/comments?post=763"}],"version-history":[{"count":2,"href":"https:\/\/sutilweb.eu\/index.php\/wp-json\/wp\/v2\/pages\/763\/revisions"}],"predecessor-version":[{"id":765,"href":"https:\/\/sutilweb.eu\/index.php\/wp-json\/wp\/v2\/pages\/763\/revisions\/765"}],"up":[{"embeddable":true,"href":"https:\/\/sutilweb.eu\/index.php\/wp-json\/wp\/v2\/pages\/746"}],"wp:attachment":[{"href":"https:\/\/sutilweb.eu\/index.php\/wp-json\/wp\/v2\/media?parent=763"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}