Entenda como trabalhar com Async\/Await <\/p>\n\n\n\n
Antes de falar sobre async \/ await \u00e9 preciso entender Promises.<\/p>\n\n\n\n
Promises JavaScript<\/strong>. Promise<\/strong>, ou Promessa, \u00e9 um objeto usado para processamento ass\u00edncrono<\/strong>. Estados de uma Promise : <\/strong><\/p>\n\n\n\n NOTA:<\/p> As fun\u00e7\u00f5es A declara\u00e7\u00e3o async function<\/strong> define uma fun\u00e7\u00e3o ass\u00edncrona, que retorna um objeto AsyncFunction<\/strong>, em JavaScript a fun\u00e7\u00e3o ass\u00edncrona \u00e9 por defini\u00e7\u00e3o um objeto do tipo AsyncFunction<\/strong>.<\/p>\n\n\n\n Para se obter melhor efici\u00eancia \u00e9 recomendado que a fun\u00e7\u00e3o seja declarada com o async<\/strong>, ou seja, com a expression async functions<\/strong> chamado no c\u00f3digo, desta forma as fun\u00e7\u00f5es s\u00e3o tratadas com o resto do c\u00f3digo, pois o mesmo sendo criado atrav\u00e9s do construtor AsyncFunction<\/strong> as fun\u00e7\u00f5es s\u00e3o tratados na criada, perdendo efici\u00eancia. <\/p>\n\n\n\n Exemplo<\/strong> 1 :<\/strong> Declarando uma fun\u00e7\u00e3o async apartir da expression async functions.<\/strong><\/p>\n\n\n\n Exemplo 2 : Declarando uma fun\u00e7\u00e3o async atrav\u00e9s do construtor de uma AsyncFuntion<\/strong><\/p>\n\n\n\n NOTA:<\/p> Uma fun\u00e7\u00e3o ass\u00edncrona <\/strong>pode conter uma express\u00e3o await<\/strong>, que pausa a execu\u00e7\u00e3o da fun\u00e7\u00e3o ass\u00edncrona<\/strong> e espera pela resolu\u00e7\u00e3o da Promise <\/strong>passada, e depois retorna o valor resolvido. <\/p>Refer\u00eancia: https:\/\/developer.mozilla.org\/pt-BR\/docs\/Web\/JavaScript\/Reference\/Operators\/async_function<\/a> <\/cite><\/blockquote>\n\n\n\n O operador await<\/strong> \u00e9 utilizado para esperar por uma Promise<\/strong> . Ele pode ser usado apenas dentro de um escopo async function<\/strong>.<\/p>\n\n\n\n A express\u00e3o await<\/strong>, como o pr\u00f3prio nome diz “Aguardando”<\/strong><\/em>, <\/em><\/strong>ou seja, enquanto o processo n\u00e3o obtiver retorno a fun\u00e7\u00e3o async <\/strong>fica em pausa, esperando o retorno da Promise<\/strong>, se a Promise <\/strong>for rejeitada a express\u00e3o await<\/strong> executa uma Exception <\/em>com o valor da Rejei\u00e7\u00e3o.<\/p>\n\n\n\n Exemplo<\/strong>:<\/p>\n\n\n\n NOTA:<\/p> Se o valor n\u00e3o for uma Exemplo 1: Escrevendo uma fun\u00e7\u00e3o ass\u00edncrona com async\/await<\/strong><\/p>\n\n\n\n Exemplo 2: Com Arrow Function<\/strong><\/p>\n\n\n\n Exemplo 3: Utilizando Promise.all, Arrow function, Map <\/strong><\/p>\n\n\n\n Para finalizar Deixo este c\u00f3digo para Reflex\u00e3o, Abra\u00e7o e at\u00e9 o Pr\u00f3ximo Post!<\/p>\n","protected":false},"excerpt":{"rendered":" Entenda como trabalhar com Async\/Await Promises Antes de falar sobre async \/ await \u00e9 preciso entender Promises. Promises JavaScript. Promise, ou Promessa, \u00e9 um objeto usado para processamento ass\u00edncrono. Uma Promise representa um valor que pode estar dispon\u00edvel agora, no futuro ou nunca. Usando uma Promise, \u00e9 assegurado que a API n\u00e3o ser\u00e1 processada nem formatada at\u00e9 … Continuar lendo Como trabalhar com Async \/ Await e entendendo Promises.<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":288,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[10],"tags":[45,46,40,43,41,42],"class_list":["post-282","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-coding","tag-async","tag-await","tag-filter","tag-json","tag-map","tag-promise"],"_links":{"self":[{"href":"https:\/\/blog.softmakers.com.br\/index.php\/wp-json\/wp\/v2\/posts\/282","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/blog.softmakers.com.br\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/blog.softmakers.com.br\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/blog.softmakers.com.br\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/blog.softmakers.com.br\/index.php\/wp-json\/wp\/v2\/comments?post=282"}],"version-history":[{"count":5,"href":"https:\/\/blog.softmakers.com.br\/index.php\/wp-json\/wp\/v2\/posts\/282\/revisions"}],"predecessor-version":[{"id":451,"href":"https:\/\/blog.softmakers.com.br\/index.php\/wp-json\/wp\/v2\/posts\/282\/revisions\/451"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/blog.softmakers.com.br\/index.php\/wp-json\/wp\/v2\/media\/288"}],"wp:attachment":[{"href":"https:\/\/blog.softmakers.com.br\/index.php\/wp-json\/wp\/v2\/media?parent=282"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/blog.softmakers.com.br\/index.php\/wp-json\/wp\/v2\/categories?post=282"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/blog.softmakers.com.br\/index.php\/wp-json\/wp\/v2\/tags?post=282"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}
Uma Promise<\/strong> representa um valor que pode estar dispon\u00edvel agora, no futuro ou nunca.
Usando uma Promise<\/strong>, \u00e9 assegurado que a API<\/strong> n\u00e3o ser\u00e1 processada nem formatada at\u00e9 que a chamada da API<\/strong> seja bem sucedida. <\/p>\n\n\n\n Fun\u00e7\u00e3o ass\u00edncrona com Promises.<\/strong><\/h4>\n\n\n\n
const fetch = require('node-fetch')\n\nfunction getPerson(id){\n\tfetch(`http:\/\/swapi.co\/api\/people\/${id}`)\n\t\t.then(response => response.json())\n\t\t.then(person => console.log(person.name))\n}\n\ngetPerson(1) \/\/Luke Skywalker<\/code><\/pre>\n\n\n\nresolve<\/code> e reject<\/code>, quando chamadas, resolvem <\/em>(em caso de sucesso)ou rejeitam <\/em>(quando ocorre um erro)a promessa, respectivamente. O executor come\u00e7a o trabalho ass\u00edncrono que, quando conclu\u00eddo, chama uma das fun\u00e7\u00f5es resolve<\/code> ou reject<\/code> para definir o estado da promessa. <\/p>Refer\u00eancia: https:\/\/developer.mozilla.org\/pt-BR\/docs\/Web\/JavaScript\/Reference\/Global_Objects\/Promise<\/a> <\/cite><\/blockquote>\n\n\n\nAsync<\/strong><\/h3>\n\n\n\n
async function newFunction(\"\/*... Parametros *\/\") {\n \/*... Declara\u00e7\u00f5es ... *\/\n}<\/code><\/pre>\n\n\n\nlet AsyncFunction = Object.getPrototypeOf(async function(){}).constructor\n\nlet newFunction = new AsyncFunction(\/*Aqui \u00e9 aplicado todo escopo da fun\u00e7\u00e3o, par\u00e2metros, declara\u00e7\u00f5es, retorno.*\/)\n\nnewFunction('\/* Par\u00e2metros *\/').then(v => {\n console.log(v); \/\/ imprime o resultado.\n})<\/code><\/pre>\n\n\n\nAwait<\/strong><\/h3>\n\n\n\n
async function newFunction() {\n\ttry{\n\t\treturn await Promisefunction('\/* parametros *\/')\n\t}catch(e){\n\t\treturn e\n\t}\n}\nconsole.log(newFunction())<\/code><\/pre>\n\n\n\nPromise<\/code>, ele converte o valor para uma Promise <\/code>resolvida, e espera por ele.<\/p>Refer\u00eancia: https:\/\/developer.mozilla.org\/pt-BR\/docs\/Web\/JavaScript\/Reference\/Operators\/await<\/a> <\/cite><\/blockquote>\n\n\n\nconst fetch = require('node-fetch')\n\nfunction getPerson(id){\n\tconst response = await fetch(`http:\/\/swapi.co\/api\/people\/${id}`)\n\tconst person = await response.json()\n\tconsole.log(person.name)\n}\n\ngetPerson(1) \/\/Luke Skywalker<\/code><\/pre>\n\n\n\nconst fetch = require('node-fetch')\n\nfunction getPerson(id){\n\tconst response = await fetch(`http:\/\/swapi.co\/api\/people\/${id}`)\n\treturn await response.json()\n}\n\ngetPerson(1)\n\t.then(person => console.log(person.name) \/\/Luke Skywalker<\/code><\/pre>\n\n\n\nconst fetch = require('node-fetch')\nconst ids = [1, 2, 3, 4, 5]\nlet person = []\n\nfunction getPerson(id){\n\tconst response = await fetch(`http:\/\/swapi.co\/api\/people\/${id}`)\n\tconst person = await response.json()\t\n\treturn person.name\n}\n\nfunction getData(){\n\tperson.push(Promise.all(ids.map(item => getPerson(item)))\n\treturn person[0]\n}\n\nasync function result (){\n\tconsole.log(await getData())\n}\n\nresult()\n\t\/*[ 'Luke Skywalker',\n\t\t'C-3PO',\n\t\t'R2-D2',\n\t\t'Dart Vader',\n\t\t'LEia Organa' ] *\/<\/code><\/pre>\n\n\n\n