image

Acesse bootcamps ilimitados e +650 cursos pra sempre

60
%OFF
Article image
Gabriel Brandão
Gabriel Brandão03/11/2022 16:33
Compartilhe

Javascript assíncrono é mais fácil do que parece

  • #JavaScript
  • #TypeScript

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 👋

Compartilhe
Comentários (5)
William Angelis
William Angelis - 04/11/2022 00:05

Pra quem quer ver mais sobre esse video do manguinho é ouro


https://www.youtube.com/watch?v=NQFQQonyAxI

LC

Leonardo Carlota - 03/11/2022 20:16

Muito bom o post! Muito Obrigado

MM

Márcia Moscardi - 03/11/2022 19:34

Achei muito interessante. Meus parabéns.

Camila Freitas
Camila Freitas - 03/11/2022 18:09

show!

Nivaldo Estrela
Nivaldo Estrela - 03/11/2022 16:43

Bacana, Gabriel. Ótimo post!