Async e Await: Melhorando funções assíncronas

 em zukk

A primeira coisa que tenho que dizer é que se você não conhece Promise e programação assíncrona, recomendo que veja este post de Promise:
http://zukk.com.br/introducao-a-promise-com-javascript/ . Para melhorar o seu entendimento neste post, que serve como uma “parte 2”, agora sim, vamos ao artigo:

Bom, para relembrar e também exemplificar vamos colocar um problema aqui: “Você precisa contar a quantidade de elementos de um array, mas precisa que sua aplicação carregue antes e continue funcionando, porém com este processo de contar o array, e assim que terminar, mostrar o valor”

Ao ler este problema já conseguimos perceber que precisamos usar funções assíncronas, então vamos tentar resolve-lo primeiro apenas usando promises, sabendo isso vamos criar um array e uma promise:

const gatos = ['peste negra', 'furioso', 'gatrito', 'Gerson']
let contaGatos = gatos.length
let promise = new Promise(res => {
setTimeout(() => {
res("Você tem " + contaGatos + " gatos")
}, 3000)
})

Agora temos um array e uma promise criados, vamos resolver a promise agora:

promise.then(res => {
console.log(res)
})
console.log('O resto da aplicação')

Simples, certo?, então ao executar isso irá aparecer esse texto no console e após 3 segundos nós veremos a promise ser resolvida:

Antes de continuar é importante deixar claro que é difícil para exemplificar as promises de alguma forma, pois não tem como eu mostrar que se passaram 3 segundos, então, executem este código para verem melhor os exemplos.

Bom, temos nosso problema resolvido com as promises, temos a aplicação rodando (exemplificada) e após a promise ser resolvida, temos a mensagem da quantia de elementos do array.

Mas agora vamos pensar na nossa promise, por que foi tão simples de ser resolvida? porque o array foi criado manualmente, se este array viesse de uma api, nós teríamos um problema, pois pode acontecer da promise ser rejeitada.

Vamos adicionar um .catch() para melhorar o código, e após rejeitar a promise para vermos funcionando, então o código fica assim:

let promise = new Promise(res => {
setTimeout(() => {
rej("Você tem " + contaGatos + " gatos")
}, 3000)
})
promise.then(res => {
console.log(res)
}).catch(err => {
console.log(err)
})

Porém aqui temos apenas uma promise, é muito fácil em alguma aplicação real existir mais de uma promise, então para exemplificar vamos criar uma promise para resolver e uma para rejeitar, desta forma:

let promise = new Promise((res, rej) => {
setTimeout(() => {
res("Você tem " + contaGatos + " gatos")
}, 3000)
})
let promise2 = new Promise((res, rej) => {
setTimeout(() => {
rej("fail")
}, 4000)
})
promise.then(res => {
console.log(res)
}).catch(err => {
console.log(err)
})
promise2.then(res => {
console.log(res)
}).catch(err => {
console.log(err)})

E aqui já podemos ver o problema, temos que fazer o mesmo processo para ambas as promises, e é ai que entram o async e await, eles vem melhorar muito o código, e antes de mostrar como fica o código com async e awaitvou explicar o que cada um é:

  • Async: É literalmente a representação de uma função assíncrona, ao ser declarado, aquela função se torna assíncrona;
  • Await: Aguarda o retorno de uma resposta (função, promise etc);
async function main() {
try {
let executarPromise1 = await promise;
console.log(executarPromise1)
    let executarPromise2 = await promise2;
console.log(executarPromise2)
}
catch(err) {
console.log('deu erro ' + err)
}
}
main()

Então já podemos ver algumas diferenças do async para as promises, bom a primeira diferença que podemos ver é a forma de se declarar, precisamos declarar uma função normal e colocar antes que ela é assíncrona com async.

Depois podemos ver que temos um try ali, o que ele faz a basicamente o que o nome diz, ele vai tentar executar o que está dentro dele, e se ele não conseguir irá direto para o catch, assim podemos ter apenas 1 catch para tudo o que fizermos dentro do try.

E ali também vimos o async em ação, aguardando a resposta da promise que criamos, assim que ele consegue a resposta o resto do código é executado. No final, como é uma função, ela precisa ser chamada, podemos chama-la de uma maneira simples, como ali no exemplo: main()

Mas o objetivo deste post é melhorar um código assíncrono, desta forma ainda estamos com um código não muito bom, então vamos melhora-lo:

const gatos = ['peste negra', 'furioso', 'gatrito', 'Gerson']
async function main() {
try {
if(await contandoGatos(gatos.length) == 3) {
console.log('Eu tenho 3 gatos')
}
if(await contandoGatos(gatos.length) == 4) {
console.log('Eu tenho 4 gatos')
}
} catch(err) {
console.log(err)
}
}
main()
function contandoGatos(param) {
return new Promise((res, rej) => {
setTimeout(() => {
res(param)
}, 3000)
})
}
console.log('Todo o resto da aplicação')

Agora sim temos um código e um exemplo mais bonito, ao executa-lo:

Bem simples, não? Agora você sabe como usar async e await para funções assíncronas, espero ter ajudado e ampliado o seu conhecimento em funções assíncronas.


Se quiser ver o código completo:

GitHub: https://github.com/BrenoP/Async-e-await

Obrigado por ler até aqui, se você gostou do post e tem alguma dúvida ou alguma critica, me contate:

LinkedIn: https://www.linkedin.com/in/brenoperetta

Medium: https://medium.com/@peretta.breno

E-mail: peretta.breno@gmail.com

Postagens Recentes

Deixe um Comentário

Comece a digitar e pressione Enter para pesquisar