Domine a Programação Assíncrona
Olá HaWker! Jeff Bruchado por aqui.
Esse é mais um artigo da nossa série de artigos que vai cobrir a nossa jornada para Aprender Programação do Zero.
Bom, sem mais delongas, vamos começar!
Hoje, nós vamos falar sobre a Programação Assíncrona no JavaScript:
Vamos pensar num cenário:
Você está criando uma aplicação e nela tem uma parte que precisa buscar informações do tempo, como previsão do tempo, temperatura e diferentes tipos de dados, diretamente de uma API (uma fonte externa de dados).
Aí você me pergunta: "E daí? Qual é a diferença?"
A diferença, meu Caro, é que essas informações não chegam na hora, como um pedido no drive-thru.
Elas podem demorar um pouco, porque dependem de uma conexão com a internet, do servidor da API... e algumas outras coisas.
A Programação Assíncrona entra em cena para lidar com essas esperas, sem deixar seu app parado, esperando a resposta chegar.
É como você pedir uma pizza e poder assistir sua série favorita enquanto espera a entrega, entende?
Por que isso é importante?
Com isso, o programa não trava: Sem assincronia, seu app ficaria congelado, esperando a resposta da API. Com ela, o app continua rodando liso enquanto espera.
Melhora a experiência do usuário: Ninguém gosta de um app que trava ou demora pra responder. A Programação Assíncrona mantém as coisas fluindo.
Eficiência: Você pode fazer várias coisas ao mesmo tempo. Enquanto uma informação tá sendo buscada, outras partes do seu app podem continuar funcionando.
No JavaScript, a mágica acontece com ferramentas como Promises e Async/Await.
Eles são como contratos de que algo vai acontecer, mas não no presente momento.
Por exemplo:
fetch('url-da-api-de-tempo') .then(resposta => resposta.json()) .then(dados => console.log(dados)) .catch(erro => console.log(erro));Nesse código, a função fetch busca os dados, e enquanto isso, o resto do seu app não fica parado esperando. Quando os dados chegam, o .then() é executado.
Então é isso: Programação Assíncrona é fundamental porque mantém seu app ágil, eficiente e muito mais agradável de usar.
Sem ela, seria como ficar em uma fila enorme esperando por algo que poderia ser feito enquanto você faz outras coisas.
Quem quer isso, né?
Entendendo a Programação Assíncrona
A Programação Assíncrona é uma técnica de programação que permite que o código execute de forma não-blocante.
Isso significa que enquanto uma tarefa é realizada, o código pode continuar a ser executado sem esperar pela conclusão da tarefa.
Isso é útil quando a tarefa pode levar muito tempo para ser concluída, como realizar uma chamada de API.
No JavaScript, a programação assíncrona é geralmente implementada com callbacks ou promises.
Callbacks
São funções que são passadas como argumentos para outras funções e são chamadas quando a operação assíncrona é concluída.
Por exemplo:
function getData(callback) { // faz uma solicitação e obtém os dados let data = 'algum dado'; callback(data);}getData(function (data) { console.log(data); // algum dado});Os callbacks são uma peça chave no quebra-cabeça da Programação Assíncrona, e entender como eles funcionam vai te salvar de muitas dores de cabeça.
Então, o que são esses tais de Callbacks?
Imagine que você tá organizando uma festa e pede pro seu parceiro trazer as bebidas. Você diz: "Me liga quando chegar, que eu desço pra te ajudar a subir com tudo".
Esse "me liga quando chegar" é basicamente um callback na vida real.
No mundo da programação, um callback é uma função que é passada como argumento para outra função e é executada depois de uma tarefa ser concluída.
Por que eles são importantes?
Controle de fluxo assíncrono: No JavaScript, muitas vezes, você tá lidando com operações que levam um tempo pra acontecer, como buscar dados de uma API. Callbacks te ajudam a dizer: "Ei, depois que terminar isso aqui, faz isso aqui ó".
Continuação do código: Eles permitem que você continue com outras operações enquanto espera que algo seja concluído. Com isso, o seu programa não fica travado esperando.
Manipulação de resultados: Quando você recebe o resultado de uma operação assíncrona, o callback lida com esse resultado. Ou seja, você pode processar e usar esses dados.
Por exemplo:
function buscarDados(url, callback) { fetch(url) .then(resposta => resposta.json()) .then(dados => callback(null, dados)) .catch(erro => callback(erro, null));}buscarDados('url-da-api', function (erro, dados) { if (erro) { console.log('Opa, deu erro:', erro); } else { console.log('Aqui estão os dados:', dados); }});Nesse código, buscarDados é uma função que busca dados de uma API. Quando a busca é concluída (seja com sucesso ou erro), o callback é chamado com os resultados.
Mas cuidado: Callbacks podem levar ao temido "Callback Hell" ou "Pyramid of Doom", que é quando você tem um monte de callbacks aninhados e seu código vira um labirinto.
Por isso, é importante usar com sabedoria e considerar alternativas como Promises e Async/Await para manter o código limpo e legível.
Então é isso, callbacks são como os mensageiros do mundo assíncrono, levando informações de um ponto a outro e garantindo que as coisas aconteçam na ordem certa. Legal né?!
Promises
As Promises são um recurso mais moderno para lidar com a programação assíncrona.
Elas são objetos que representam a eventual conclusão ou falha de uma operação assíncrona.
Em vez de passar uma função callback como um argumento, você pode usar o método then da Promise para especificar o que deve ser feito quando a Promise é resolvida ou rejeitada.
Por exemplo:
function getData() { return new Promise(function (resolve, reject) { // faz uma solicitação e obtém os dados let data = 'algum dado'; resolve(data); });}getData() .then(function (data) { console.log(data); // algum dado }) .catch(function (error) { console.error(error); });O operador async e a palavra-chave await são uma forma ainda mais conveniente de lidar com a programação assíncrona.
Eles permitem que você escreva código síncrono-looking, mas que é realmente assíncrono.
Por exemplo:
async function getData() { // faz uma solicitação e obtém os dados let data = await someAsyncFunction(); console.log(data);}getData();Callback Hell
O Callback Hell, como eu mencionei anteriormente, é um termo usado para se referir ao código que consiste em muitas camadas de funções de callback aninhadas, o que pode ser difícil de ler e manter.
Isso é comum quando se usa callbacks para lidar com a programação assíncrona e pode ser evitado usando técnicas como Promises e async/await.
Aqui está um exemplo de como o código pode ficar complicado com o uso excessivo de callbacks:
getUserData(function (user) { getComments(user.id, function (comments) { getLikes(user.id, function (likes) { getFollowers(user.id, function (followers) { console.log( `${user.name} tem ${comments.length} comentários, ${likes.length} curtidas e ${followers.length} seguidores.` ); }); }); });});Usando Promises, esse mesmo código pode ser escrito da seguinte maneira:
getUserData() .then(function (user) { return getComments(user.id); }) .then(function (comments) { return getLikes(user.id); }) .then(function (likes) { return getFollowers(user.id); }) .then(function (followers) { console.log( `${user.name} tem ${comments.length} comentários, ${likes.length} curtidas e ${followers.length} seguidores.` ); }) .catch(function (error) { console.error(error); });E usando async/await, o código pode ser escrito da seguinte maneira:
async function getStats() { try { let user = await getUserData(); let comments = await getComments(user.id); let likes = await getLikes(user.id); let followers = await getFollowers(user.id); console.log( `${user.name} tem ${comments.length} comentários, ${likes.length} curtidas e ${followers.length} seguidores.` ); } catch (error) { console.error(error); }}getStats();Como você pode ver, usando Promises ou async/await, o código fica mais legível e fácil de manter do que usando múltiplos callbacks aninhados.
Conclusão
Em resumo, a programação assíncrona é uma técnica que permite que o código continue sendo executado enquanto aguarda o retorno de uma chamada de função assíncrona.
Isso é útil quando a operação pode levar um longo tempo para ser concluída, como quando fazemos uma solicitação para uma API.
No JavaScript, existem várias maneiras de lidar com a programação assíncrona, como callbacks, Promises e async/await.
Cada uma dessas abordagens tem suas próprias vantagens e desvantagens e é importante entender quando usar cada uma delas.
Eu particularmente uso a seguinte regra para definir se uso Promises ou async/await:
Quando uma request possui dados que dependem de dados de outra requisição, o async/await é o mais recomendado, pois dessa forma você garante que a segunda requisição só será executada, quando ter recebido a resposta da primeira.
Mas como você pode perceber, isso faz com que o seu programa fique lento. Por ter que esperar a primeira requisição para só então executar a próxima.
Porém, quando você vai executar duas requisições em sequência, e uma requisição não depende da resposta da outra, então nesse caso é mais recomendado usar as Promises, porque dessa forma você consegue executar as duas requisições ao mesmo tempo, deixando o seu código muito mais rápido.
Além disso, é importante tomar cuidado com o "Callback Hell", ou o aninhamento excessivo de callbacks, para manter o código legível e fácil de manter.
Pois bem HaWker, chegamos ao fim de mais um artigo.
Como sempre, se tiver qualquer dúvida ou quiser explorar mais algum ponto, é só responder com a sua dúvida, nesse email.
E lembre-se, estou aqui para te ajudar a melhorar 1% a cada novo artigo!
Se você chegou até aqui, como de costume, por favor, responda esse email com "Consegui entender a Programação Assíncrona no JavaScript".
Dessa forma eu vou saber que essa série de artigos está sendo útil pra você, e que você está acompanhando e aproveitando.
Como você já sabe! Somente um verdadeiro HaWker chega até o final.
Parabéns!
Estou feliz em te ter aqui.
Te vejo em breve.
Bora pra cima! 🦅
- Jeff Bruchado
Quando sentir que é o momento existem 2 maneiras em que posso te ajudar:
01) Aprendendo JavaScript do Zero: Torne-se um programador de valor e aprenda a programar usando JavaScript, com um conteúdo organizado e condensado pensado no que realmente importa você aprender. O conteúdo possui todos os artigos que venho disponibilizando semanalmente pra você, e também possui exercícios práticos, com as respostas pra você aprender a teoria e já sair colocando a mão na massa.
02) Consultoria: Faça parte da minha mentoria e tenha aulas diretamente comigo. Se você se interessar por isso, responda esse email com "Tenho interesse na mentoria."
Parabéns por chegar até aqui, HaWker! 🎉
Nesse momento que você aprendeu sobre a programação assíncrona no JavaScript, que tal testar seus conhecimentos? Participe do quiz abaixo e veja o quanto você absorveu do nosso artigo.
É uma ótima maneira de fixar o aprendizado e se preparar para os próximos passos na sua jornada de programação.
Boa sorte e divirta-se!