{"id":752,"date":"2024-02-17T17:27:10","date_gmt":"2024-02-17T20:27:10","guid":{"rendered":"https:\/\/desvendandoocodigo.com.br\/?p=752"},"modified":"2024-02-17T17:37:10","modified_gmt":"2024-02-17T20:37:10","slug":"promises-com-async-await-no-javascript-um-guia-para-iniciantes","status":"publish","type":"post","link":"https:\/\/desvendandoocodigo.com.br\/?p=752","title":{"rendered":"Promises com Async\/Await no JavaScript | Um Guia para Iniciantes"},"content":{"rendered":"\n<p>Nos \u00faltimos anos, o JavaScript passou por uma grande evolu\u00e7\u00e3o com a introdu\u00e7\u00e3o de conceitos ass\u00edncronos para lidar com opera\u00e7\u00f5es que consomem tempo, como solicita\u00e7\u00f5es de rede e acesso a bancos de dados. As Promises tornaram-se a base para lidar com essas opera\u00e7\u00f5es de forma mais eficiente e leg\u00edvel. No entanto, com o surgimento do async\/await no ECMAScript 2017 (ES8), o c\u00f3digo ass\u00edncrono em JavaScript se tornou ainda mais elegante e f\u00e1cil de entender.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Promises<\/h3>\n\n\n\n<p>Antes de falarmos de async\/await, \u00e9 fundamental compreender as Promises. Uma Promise representa um valor que pode estar dispon\u00edvel agora, no futuro ou nunca. Ela permite que voc\u00ea lide com opera\u00e7\u00f5es ass\u00edncronas de uma maneira mais concisa e organizada. Uma Promise pode estar em um dos tr\u00eas estados: pendente, resolvida ou rejeitada.<\/p>\n\n\n\n<p>Em uma Promise teremos 2 callbacks uma para quando a Promise for resolvida (resolve) e outra para quando for rejeitada (reject).<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"547\" height=\"479\" src=\"https:\/\/desvendandoocodigo.com.br\/wp-content\/uploads\/2024\/02\/image-15.png\" alt=\"\" class=\"wp-image-753\" srcset=\"https:\/\/desvendandoocodigo.com.br\/wp-content\/uploads\/2024\/02\/image-15.png 547w, https:\/\/desvendandoocodigo.com.br\/wp-content\/uploads\/2024\/02\/image-15-300x263.png 300w\" sizes=\"(max-width: 547px) 100vw, 547px\" \/><\/figure>\n\n\n\n<p> <\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Async\/Await<\/h3>\n\n\n\n<p>O <strong>async\/await<\/strong> \u00e9 uma maneira mais moderna e elegante de trabalhar com c\u00f3digo ass\u00edncrono em JavaScript. Ele permite escrever c\u00f3digo ass\u00edncrono como se estivesse sincronizado, o que melhora significativamente a legibilidade e a manuten\u00e7\u00e3o do c\u00f3digo.<\/p>\n\n\n\n<p>A palavra-chave <strong>async <\/strong>\u00e9 usada para declarar uma fun\u00e7\u00e3o ass\u00edncrona, enquanto <strong>await <\/strong>\u00e9 usado para esperar a resolu\u00e7\u00e3o de uma <strong>Promise <\/strong>dentro de uma fun\u00e7\u00e3o ass\u00edncrona.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"441\" height=\"484\" src=\"https:\/\/desvendandoocodigo.com.br\/wp-content\/uploads\/2024\/02\/image-16.png\" alt=\"\" class=\"wp-image-754\" srcset=\"https:\/\/desvendandoocodigo.com.br\/wp-content\/uploads\/2024\/02\/image-16.png 441w, https:\/\/desvendandoocodigo.com.br\/wp-content\/uploads\/2024\/02\/image-16-273x300.png 273w\" sizes=\"(max-width: 441px) 100vw, 441px\" \/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\">Vantagens do Async\/Await<\/h3>\n\n\n\n<ol>\n<li><strong>C\u00f3digo mais limpo e leg\u00edvel:<\/strong> O c\u00f3digo ass\u00edncrono \u00e9 escrito de forma sequencial, tornando-o mais f\u00e1cil de entender e manter.<\/li>\n\n\n\n<li><strong>Tratamento de erros simplificado:<\/strong> O try\/catch permite lidar facilmente com erros, tornando o c\u00f3digo mais robusto.<\/li>\n\n\n\n<li><strong>Compatibilidade com Promises existentes:<\/strong> Voc\u00ea pode usar await com qualquer objeto Promise, facilitando a migra\u00e7\u00e3o de c\u00f3digo legado.<\/li>\n<\/ol>\n\n\n\n<pre class=\"wp-block-code\"><code><strong>HTML<\/strong>\n\n&lt;!DOCTYPE html&gt;\n&lt;html lang=\"pt-br\"&gt;\n&lt;head&gt;\n    &lt;meta charset=\"UTF-8\"&gt;\n    &lt;meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\"&gt;\n    &lt;title&gt;Promise Async Await&lt;\/title&gt;\n&lt;\/head&gt;\n&lt;body&gt;\n    &lt;script&gt;\n        \/\/ let promise = new Promise(function (resolvido, rejeitado){\n\n        \/\/     let a = 1 + 11;\n        \/\/     if(a == 2){\n        \/\/         resolvido(\"Sucesso funcionou tudo ok!\")\n        \/\/     }else{\n        \/\/         rejeitado(\"Falhou!!!\")\n        \/\/     }\n\n        \/\/ })\n\n        \/\/ promise.then(function resolvido(mesagem){  \/\/ quando o resolve \u00e9 chamado\n        \/\/     console.log(\"Aqui \u00e9 a parte do then \" + mesagem)\n        \/\/ }).catch(function rejeitado(erro){\n        \/\/     console.log(\"Aqui \u00e9 o catch \" + erro)\n        \/\/ })\n        async function executarPromise(){\n            let promise = new Promise(function (resolvido, rejeitado){\n\n            let a = 1 + 1;\n            if(a == 2){\n                resolvido(\"Sucesso funcionou tudo ok!\")\n            }else{\n                rejeitado(\"Falhou!!!\")\n            }\n\n            })\n            \n           try{\n            let mensagem = await promise;\n            console.log(\"Aqui \u00e9 a parte do then \" + mensagem);\n           }catch (erro){\n           console.log(\"Aqui \u00e9 o catch \" + erro)\n        }\n    }\n\n    executarPromise();\n        \n        \n    &lt;\/script&gt;\n&lt;\/body&gt;\n&lt;\/html&gt;\n\n\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Conclus\u00e3o<\/h3>\n\n\n\n<p>Dominar Promises com async\/await \u00e9 uma habilidade essencial para qualquer desenvolvedor JavaScript. Essas ferramentas permitem lidar com opera\u00e7\u00f5es ass\u00edncronas de forma eficiente, mantendo o c\u00f3digo claro e conciso.<\/p>\n\n\n\n<p>\u00c0 medida que voc\u00ea se familiariza com async\/await, experimente aplic\u00e1-lo em seus pr\u00f3prios projetos para aproveitar seus benef\u00edcios e melhorar a qualidade do seu c\u00f3digo JavaScript.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Nos \u00faltimos anos, o JavaScript passou por uma grande evolu\u00e7\u00e3o com a introdu\u00e7\u00e3o de conceitos ass\u00edncronos para lidar com opera\u00e7\u00f5es que consomem tempo, como solicita\u00e7\u00f5es de rede e acesso a bancos de dados. As Promises tornaram-se a base para lidar com essas opera\u00e7\u00f5es de forma mais eficiente e leg\u00edvel. No entanto, com o surgimento do async\/await no ECMAScript 2017 (ES8), o c\u00f3digo ass\u00edncrono em JavaScript se tornou ainda mais elegante e f\u00e1cil de entender. Promises Antes de falarmos de async\/await, \u00e9 fundamental compreender as Promises. Uma Promise representa um valor que pode estar dispon\u00edvel agora, no futuro ou nunca. Ela permite que voc\u00ea lide com opera\u00e7\u00f5es ass\u00edncronas de uma maneira mais concisa e organizada. Uma Promise pode estar em um dos tr\u00eas estados: pendente, resolvida ou rejeitada. Em uma Promise teremos 2 callbacks uma para quando a Promise for resolvida (resolve) e outra para quando for rejeitada (reject). Async\/Await O async\/await \u00e9 uma maneira mais moderna e elegante de trabalhar com c\u00f3digo ass\u00edncrono em JavaScript. Ele permite escrever c\u00f3digo ass\u00edncrono como se estivesse sincronizado, o que melhora significativamente a legibilidade e a manuten\u00e7\u00e3o do c\u00f3digo. A palavra-chave async \u00e9 usada para declarar uma fun\u00e7\u00e3o ass\u00edncrona, enquanto await \u00e9 usado para esperar a resolu\u00e7\u00e3o de uma Promise dentro de uma fun\u00e7\u00e3o ass\u00edncrona. Vantagens do Async\/Await Conclus\u00e3o Dominar Promises com async\/await \u00e9 uma habilidade essencial para qualquer desenvolvedor JavaScript. Essas ferramentas permitem lidar com opera\u00e7\u00f5es ass\u00edncronas de forma eficiente, mantendo o c\u00f3digo claro e conciso. \u00c0 medida que voc\u00ea se familiariza com async\/await, experimente aplic\u00e1-lo em seus pr\u00f3prios projetos para aproveitar seus benef\u00edcios e melhorar a qualidade do seu c\u00f3digo JavaScript.<\/p>\n","protected":false},"author":1,"featured_media":757,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0,"footnotes":""},"categories":[1],"tags":[],"_links":{"self":[{"href":"https:\/\/desvendandoocodigo.com.br\/index.php?rest_route=\/wp\/v2\/posts\/752"}],"collection":[{"href":"https:\/\/desvendandoocodigo.com.br\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/desvendandoocodigo.com.br\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/desvendandoocodigo.com.br\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/desvendandoocodigo.com.br\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=752"}],"version-history":[{"count":5,"href":"https:\/\/desvendandoocodigo.com.br\/index.php?rest_route=\/wp\/v2\/posts\/752\/revisions"}],"predecessor-version":[{"id":762,"href":"https:\/\/desvendandoocodigo.com.br\/index.php?rest_route=\/wp\/v2\/posts\/752\/revisions\/762"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/desvendandoocodigo.com.br\/index.php?rest_route=\/wp\/v2\/media\/757"}],"wp:attachment":[{"href":"https:\/\/desvendandoocodigo.com.br\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=752"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/desvendandoocodigo.com.br\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=752"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/desvendandoocodigo.com.br\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=752"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}