JavaScript Assíncrono: O Guia Completo - Parte 1 - O que é um código assíncrono?

Nesta série de artigos iremos aprender tudo sobre o JavaScript assíncrono, percorrendo todos os principais conceitos que foram implementados ao JavaScript ao longo dos anos. Além disso, iremos criar juntos uma aplicação que irá consumir uma API de jogos, onde poderemos pesquisar por nossos jogos favoritos e, ao clicar em um item, visualizar os jogos relacionados a ele. Veja como esse projeto ficará no final:

Gostou dessa ideia? Então, embarque conosco na jornada pelo JavaScript assíncrono.

Neste primeiro artigo iremos falar sobre a diferença entre uma requisição síncrona e assíncrona. Para entender essa diferença, vamos precisar voltar um pouco no tempo.

Um pouco de História

Por muitos anos na Web, a única maneira que estava disponível para realizarmos requisições para um servidor ou executar funções era por meio de um código síncrono.

Em um código síncrono, todas as funções e requisições trabalham em sincronia, em um contato direto, do início ao fim da comunicação. Dessa maneira, esse código só permite uma requisição por vez. Como falamos acima, por muitos anos na Web era por meio dessa maneira que os sistemas trabalhavam. Contudo, com o tempo foi-se percebendo algumas questões que poderiam se tornar um problema.

Por exemplo: se fizermos uma requisição para uma API, precisamos esperar a sua resposta. Até aí tudo bem. Mas, imagine que tenhamos mais de uma requisição para fazer. Com um código síncrono quaisquer outras requisições além da principal são bloqueadas até que a primeira termine. Em outras palavras, precisamos esperar a resposta da primeira requisição para só então ir para a próxima. Isso poderia afetar a experiência do usuário, deixando nosso site um tanto monótono.

Uma requisição assíncrona é diferente. Ela não trabalha em sincronia. Dessa forma, nós podemos realizar várias requisições ao mesmo tempo, e uma requisição não irá afetar a outra. Isso é impressionante, e ajuda muito na performance e na experiência do usuário também. Em poucas palavras, com um código assíncrono, nosso site se torna mais dinâmico.

Para entendermos melhor essa diferença, vamos pensar na seguinte ilustração: no passado, nos anos 90, os navegadores Web não possuíam o recurso de abas. Ou seja, se quiséssemos acessar um site, precisaríamos fazer isso de um em um. Imagine: você quer ir até o Spotify. Você acessa esse site, sem problemas. Mas ao mesmo tempo, você quer acessar o site da Hcode para ler artigos sobre programação enquanto ouve música. Se o navegador tiver apenas uma aba, isso não é possível. Você precisa sair de um site para só então ir para outro. Esse é o conceito de uma requisição síncrona.

Contudo, ainda falando sobre navegadores, o navegador Opera foi criado em 2000, trazendo como principal novidade o recurso de abas, recurso este disponível em praticamente todos os navegadores atuais. Com as abas, podemos acessar vários sites ao mesmo tempo. Podemos entrar no Spotify, no YouTube e no site da Hcode ao mesmo tempo, e uma aba não interfere na outra. Esse é o conceito de uma requisição assíncrona.

Agora, uma dúvida: você prefere acessar várias abas ao mesmo tempo ou apenas uma de cada vez? Imagino que sua escolha seja a primeira. Da mesma forma, as requisições assíncronas são mais usadas na Web hoje em dia, e entender como o JavaScript as manipula pode ser um diferencial em nosso código. As requisições assíncronas foram uma verdadeira revolução na Web. Esse conceito inspirou a criação de ferramentas usadas até hoje, como o AJAX, que é baseado em parte no JavaScript. Esperamos que tenham gostado desse primeiro artigo.

Com essas informações em mente, podemos avançar um pouco mais no tempo, pois o JavaScript foi se especializando cada vez mais para nos oferecer mais facilidade com requisições assíncronas.

Uma primeira ajuda foi o uso de callbacks. Nós iremos falar sobre esse conceito no próximo artigo: JavaScript Assíncrono: O Guia Completo - Parte 2 - Callbacks, até lá!