Javascript assíncrono

À primeira vista, Javascript assíncrono parece algo difícil e muito diferente do senso comum, mas neste post venho te provar o contrário.

Por que assíncrono?

Quem nunca teve contato com programação assíncrona não deve entender bem o propósito dessa tecnologia, mas basicamente ela serve para lidar com funcionalidades que podem executar em tempo estendido e variado, e que dependem de fatores como a velocidade de conexão do usuário, é interessante ter o controle do que deve ser assíncrono ou não para otimizar seu código.

O exemplo mais simples de utilização da programação assíncrona é a chamada às API's, que são processos que dependem na velocidade de conexão do usuário e do tempo de resposta do servidor, que também pode depender de outros fatores como a requisição que foi feita.

Por isso, programar uma ordem de passos bem definida para ocorrer de forma sequencial síncrona não parece uma boa estratégia, pois pode deixar seu código mais lento ou até fazê-lo travar, e é aí que a programação assíncrona entra.

Ao invés de definir todos os comandos de forma sequencial, para certos comandos que podem demorar mais tempo para executar, você pode definir o que ocorrerá após a execução da funcionalidade, por exemplo:

Temos a função assíncrona delay, que de forma proposital só termina de executar após 3 segundos, naturalmente se trata de uma função assíncrona:

console.log('Antes do delay')
delay().then(() => console.log('Depois do delay'))
console.log('Ainda antes do delay)

O método .then é passado justamente para definir o que ocorrerá após a execução da função em questão

Caso a função assíncrona tenha algum retorno, é possível acessá-lo através do parâmetro na função que você passou para o .then:

delay().then(ret => console.log(ret))

Caso não esteja familiarizado com a sintaxe de arrow functions apresentada acima, recomendo estudar um pouco essa parte, não se preocupe pois é muito simples.

Para evitar o uso excessivo do .then, uma alternativa é declarar funções assíncronas, para isso basta utilizar a palavra-chave async antes da palavra-chave para declaração:

async function delay(){
...
}

Dentro de funções assíncronas é possível utilizar o comando await, que permite tratar funções assíncronas como se fossem funções normais, da seguinte forma:

function main(){
  delay().then(ret => {
      ...
  })
}
//Se torna o seguinte
async function main(){
  const ret = await delay()
  ...
}

Todos os exemplos que eu abordei aqui compreendem maior parte de tudo que utilizo em programação assíncrona, claro que existe uma explicação mais detalhada sobre as Promises, que são a base do Javascript assíncrono, mas entendendo o conceito fundamental, tudo fica mais simples de trabalhar. Espero que com este post eu tenha explicado de forma clara a forma como Javascript assíncrono funciona, e que suas dúvidas tenham sido esclarecidas. Até um próximo post 👋