JS Assíncrono: Entenda de vez Callbacks, Promises e Async/Await

JS Assíncrono: Entenda de vez Callbacks, Promises e Async/Await
O tópico que gera mais confusão para quem aterrissa no JS é o assíncronismo. Neste vídeo vamos fazer um exemplo indo de callback para promises e de promises para async/await, e entender a vantagem destas abordagens. Bora?
Conheça a Formação Fullstack Master: go.devpleno.co...
Confira nossa playlist sobre React: bit.ly/playlist...
Acompanhe nossas redes sociais:
Facebook: / devpleno
Instagram: / devpleno
Twitter: / devpleno

[@marcoscampos3048]

O vídeo foi extremamente didático, eu já tinha visto muita coisa sobre o assunto, mas confesso que não tinha uma visão dessa evolução dos métodos, eu via como coisas distintas e desconectadas, não compreendia que o callback também executava uma função assíncrona. Você conseguiu mostrar de forma pedagógica e eficiente. Muito obrigado!!! Parabéns!!!!

[@DevPleno]

Show! Muito obrigado pelo comentário :)

[@RK_BNO]

eu estava procurando saber promises, porém você me deu uma aula de callback, promises e async, vlew mesmo cara, ajudou demais 💟

[@DevPleno]

Que bom que ajudou! Estamos juntos!

[@flaviarodriguesdasilva6628]

Simplesmente em 23 min vc tirou essa confusão q era a minha cabeça em relação a diferença desses 3 temas

[@DevPleno]

Show! Muito obrigado :)

[@jeeffengel]

Muito bom video, para entender a própria evolução do JS em relação o assincronismo, você foi em uma ordem de linha do tempo do que era para o que é e de uma forma muito didática, parabéns. Estou criando uma IA com JS e async/await foi algo que deu ao JS um poder gigante para isso, é extremamente eficiente, fácil, tem menos código e elegante.

[@LucasCosta-dq9ph]

Que explicação sensacional! Vi vários vídeos sobre o tema e não entendia nada das pessoas falando porque eles não explicavam passo a passo igual foi feito neste vídeo. Muito didático. Parabéns.

[@DevPleno]

Show! Muito obrigado, Lucas :)

[@Mairanua]

Estava assistindo diversas aulas de outros professores, quase 1h de conteúdo, e não entendi nada, aqui em poucos minutos entendi tudo... obrigado

[@DevPleno]

Opa! Fico feliz em saber. Obrigado!

[@choliveira84]

Cara, a explicação mais didática que eu vi até hoje sobre funções no JavaScript! 👏🏽

[@DevPleno]

Muito obrigado, Carlos! Fico muito feliz em saber disso! Abração :)

[@dfagundes2001]

Verdade

[@MauroBueno]

Clareou demais para mim. Obrigado!!! Muito obrigado mesmo!

[@DevPleno]

Estamos juntos! 💙

[@fernando2852]

Vi o vídeo inteiro, mas só conseguir entender uns 40%, entendi a utilidade de trabalhar de forma assíncrona, mas sei lá a sintaxe parece meio suja, ainda não saberia usar isso.

[@rogerioluiz2233]

Tem uma maneira mais fácil usando async : async function func1() { await func1(); console.log(`Executando func1`); await func2(); console.log(`Executando func2`); await func3(); console.log('Executando func3'); }

[@pedrocardoz0]

Somos 2 kkkkkk

[@ageurodriguesdeoliveira8953]

Somos 3 então :) hahaha, até entendi a teoria, mas na hora de aplicar essa sintaxe não entendo direito esse esqueleto.

[@adrianomourao3124]

@@ageurodriguesdeoliveira8953 Só basta praticar, agora.

[@pgnt]

problema foi mais a sintaxe.. tb achei zuado 'aero function', a forma tradicional tem uma sintaxe mais consistente, melhor de enxergar

[@kakisbkakisb8651]

Estou fazendo curso no codecademy, na dúvida eu procurei seu vídeo que me esclareceu todas as dúvidas. Agradeço pelo conteúdo

[@DevPleno]

Que bom que ajudou :)

[@pedromatoso279]

Minha principal dúvida com JavaScript era em relação ao assincronismo e sua explicação foi muito didática, salvou demais!

[@DevPleno]

:)

[@rafaelsa97]

Todas as vezes que me esqueço de algum detalhe sobre como utilizar funções assíncronas com Javascript eu recorro a esse vídeo. Parabéns!

[@DevPleno]

[@pwcodigo]

Obrigado pelo conteúdo, vou explorar mais sobre o assunto com mais exemplos.

[@DevPleno]

Estamos juntos!

[@mbs2488]

Excelente ! Muito Bem Explicado ! Parabéns pelos vídeos ! ! !

[@DevPleno]

Muito obrigado! Estamos juntos :)

[@wagner-ottowutzke7953]

Super didático e instrutivo. Muito obrigado!

[@DevPleno]

Feliz que tenha gostado Wagner :)

[@davicarvalho9328]

Sabe aquele estalo que dá quando você finalmente consegue entender uma nova ferramenta/conhecimento? Foi isso que aconteceu!!! Muito obrigado :)

[@DevPleno]

Estamos juntos! :)

[@jozimarhenriques6848]

Muito obrigado por esta valiosa aula, para quem usa o firebase fica fácil agora entender as várias funções seja do auth, storage ou mesmo do firestore.

[@DevPleno]

Estamos juntos, Jozimar! :)

[@eduardobertozi8506]

Fala brother! Seu vídeo me ajudou demais. Ganhou um fã e inscrito para o canal. Estava com dificuldades para exportar um access token de uma api, mas com a sua explicação resolvi em segundos hehehe. Muito obrigado!

[@DevPleno]

Opa, show de bola! Que bom que te ajudou :)

[@Yukan_nahito]

Explicou muito bem...apesar que não entrrei nessa parte de promise..nem async..mas já passei entender..um pouco...obg

[@DevPleno]

Estamos juntos!

[@RafaelReis-ur6wb]

Excelente explicação. Didático, mão na massa, simples.

[@DevPleno]

Muito obrigado, Rafael! Abração :)

[@bwmsdroid5522]

amigão, obrigado, era a aula que eu precisava! entendi perfeitamente o que passaste!

[@DevPleno]

Show! Que bom que te ajudou :)

[@SidonDuarte]

Quanto mais eu vejo esse tipo de contudo do JS, mais eu me apaixono por GO.

[@jederilson]

Muito bom mesmo. Após ver o vídeo consegui resolver um problema que estava tendo com o tal código "hadouken" na minha aplicação. Muito obrigado!

[@DevPleno]

Que bom que ajudou!

[@lairavogel]

Excelente didática, me ajudou muito, valeu!

[@DevPleno]

Muito obrigado!

[@Diego-Garcia]

Caramba, ajudou muito. Eu não sabia que dava pra encadear promises com .then().then().then()... Pesquisei o vídeo porque comecei a usar o selenium e praticamente todos os métodos retornam promises, e eu tava me perdendo muito pra organizar tudo.

[@ramonvinicius4419]

Não sabia? Iniciante é foda.

[@foobar846]

Excelente vídeo! Parabéns e obrigado!

[@DevPleno]

Opa, obrigado pelo feedback :)

[@marinalucas5288]

Muito bom, o melhor que vi até agora sobre o assunto!

[@DevPleno]

Opa, obrigado pelo feedback :)

[@EduardoOliveira-rn2ds]

Muito obrigado pelo compartilhamento.

[@DevPleno]

Estamos juntos!

[@allancruz4018]

Sensacional !muito obrigado e Parabéns pelo conteúdo.

[@DevPleno]

Feliz que tenha curtido Allan :)

[@leoaugustov]

Me ajudou bastante, obrigado pelo conteúdo!

[@DevPleno]

Estamos juntos!

[@pquina]

Boa tarde. Como trabalhei com programação síncrona por muito tempo , consegui entender a síntaxe dos conceitos passados. Mas do meu ponto de vista, resolver o mesmo problema de forma síncrona parece mais vantajoso e simples de escrever. Se possível gostaria de exemplos : 1) Que mostre um problema onde apenas uma solução assíncrona seja a solução. 2) Como funciona a lógica, se o resultado da função assíncrona, fosse necessário para dar continuidade ao processamento, sendo que a função assíncrona ainda não deu o retorno esperado ? Ainda não encontrei uma explicação que fosse além da sintáxe, caso tenha algum link para compartilhar eu agradeço. Obrigado e parabéns pela iniciativa.

[@laisa4836]

geralmente as soluções assíncronas são muito usadas pra pegar dados de uma API, pois assim dá pra ter certeza de que a resposta veio pra não acabar passando um valor undefined ou nulo pro componente

[@juanlima4277]

Um exemplo muito bom seria dashaboards ou carregamento de imagen... Imagina que vc tem varias consultas de diferentes tempos de retorno, mas você tem uma que demora cerca de 30 segundos para carregar. Numa solução sincrona, toda vez que o usuário entrasse naquela página demoraria 30 segundos para carregar a tela independente de qual informação o usuário queira visualiza. Utilizando Async nos lugares certos, o carregamento da página fica mais fluido para o usuário.

[@LucianoPinheiro78]

1) Operações entre sites. você faz requisições entre os sites. Lembra que antigamente a página "congelava" esperando a resposta? hoje ela continua e, na hora em que chegar a resposta, ela age. 2) timeout e rodar a função reject. Isso, claro, aumenta a complexidade. se precisa ou não para o próximo passo, você como programador quem define.

[@lucaspereira-mh2it]

caralho irmão que didatica sensacional... eu tava bugando pra entender um pouco mas tudo ficou mais facil de entender após o video.

[@CarlosAndrade-ux3zf]

Parabens !!!! excelente explicação.

[@DevPleno]

Muito obrigado!

[@claudiocassimiro8989]

Muito boa sua explicação, obrigado pela contribuição!

[@DevPleno]

Estamos juntos! :)

[@crisaort]

Cara, sua explicação me ajudou demais!!! Parabéns, obrigado e continue assim, pois acredito que esta ajudando muitos como eu !!

[@DevPleno]

Opa, que massa! Estamos juntos! Abração :)

[@niltonduarte3531]

Realmente esse conhecimento de asincronismo no javascript é realmente muito obscuro pra um inicialmente. Não dá pra aprender assistindo só um vídeo sobre o assunto. Tem q ver muitas abordagens sobre ele

[@DouglasSantosTI]

Dá sim, casa um aprende de um jeito, seja por livros ou por video aula.

[@chrisoliveira1541]

Pra resumir bem: Fluxo Sincrono: Vários processos para serem executados, mas executa 1 de cada vez na ordem que aparece. Assíncrono: Vários processos para serem executado, mas tem 1 (ou mais) processo demorado sendo resolvido em "segundo plano" enquanto processa o restante 1 por vez em "primeiro plano"(de forma sincrona). Este em segundo plano é o tal do "assíncrono" e ele só da a resposta quando termina de ser processado. A PARTIR DAQUI EXPLIQUEI A MESMA COISA DE OUTRA FORMA Sincrono= execução do código linha por linha na ordem que aparece. Exemplo: Console.log('a') ImportandoAquivoDeAudio() Console.log('b') Console.log('c') Console.log('d') Por padrão na maioria das linguagens, você receberá como resposta: a Musica.mp3 b c d Assim executaria console.log('a) e após começaria a importar a mídia e todos outros teriam que esperar. Assíncrono= execução de uma ou mais operações de forma isolada, ou seja, a operação inicia em "segundo plano", mas só da uma resposta após carregar completamente. Se tiver uma operação que demore para executar no meio do código, uma das ideia para não atrasar o funcionamento do codigo é executa-la de forma assíncrona, pois ela começará funcionar, mas não irá atrasar a parte síncrona. Exemplo: Console.log('a') ImportandoAquivoDeAudio(promessa) Console.log('b') Console.log('c') Console.log('d') Como resposta você terá: a b c d Musica.mp3 Isso acontece porque a importação foi iniciada, mas a reaposta ficou 'pending', equanto isso o código continuou rodando e quando a promessa foi resolvida, ela retornou a mídia.

[@walterchagas9566]

Que conteúdo Top! A forma de explicação foi uma das melhores que achei sobre o assunto, show!

[@DevPleno]

Muito obrigado! ❤️

[@omercador8681]

Muito bom mesmo esse vídeo, muito obrigado por postar esse tipo de conhecimento de forma gratuita!

[@DevPleno]

Muito obrigado! Estamos juntos :)

[@ProSimples]

Obrigado, ainda estou meio confuso para poder aplicar. Estou seguindo o curso do Traversy media na Udemy, e no curso dele tem duas horas de asynchronism, seu video me explicou bem melhor. obgd

[@DevPleno]

Opa, muito obrigado, Elias! :)

[@DaianaKoblitz]

Parabéns pela explicação! Me ajudou demais!!!

[@DevPleno]

Estamos juntos!

[@ricardogomessaraiva]

Simples, prático e direto ao assunto. Parabéns

[@DevPleno]

Opa, muito obrigado, Ricardo! Abraço :)

[@nayanaloivos]

Perfeito! Ganhou mais uma inscrita! Parabéns!

[@DevPleno]

Muito obrigado 😊

[@darcio28]

top, melhor video do youtube sobre assunto.

[@DevPleno]

Muito obrigado 🙌

[@nicholasaraujo1403]

Excelente explicação! Estava sofrendo para entender direitinho o que era uma promise e o uso dela.

[@DevPleno]

Show! Muito obrigado pelo comentário :)

[@Jonesgoful]

Muito massa. Vlw pelo aula super valiosa!

[@DevPleno]

Estamos juntos :)

[@Jonathasjosec]

melhor explicação, parabens.

[@DevPleno]

[@felipemattos861]

eu só consegui andar com o projeto por causa desse vídeo , vc é top mano

[@DevPleno]

Que massa! Feliz demais por ter ajudado :)

[@renatotrevizan7157]

Me ajudou, cara! Muito obrigado!

[@DevPleno]

[@gabrielmatos1075]

parabéns, você é foda, sem querer faltar com respeito!

[@DevPleno]

:)

[@BrasilEmFatos]

Nossa, muito claro seu video cara! Na mesma hora abri meu código e troquei para async/await. Fica muito mais legivel! Sou Dev júnior e acho que essas pequenas coisas somadas no final, dá uma puta diferença no código. Mas me diz, há alguma contra indição para o uso? requer bom senso? Ou aonde eu encontrar um .then() eu posso fazer essa troca sossegado ? Abraços...

[@yagovaluche8745]

Show meu querido!! Me ajudou muito.

[@DevPleno]

Opa, muito obrigado!

[@marceloduarte2539]

que cara bom, parabéns!!!!

[@DevPleno]

😊

[@linkopaladino]

Eu amei a explicação, vou ver mias 5 vezes para poder absorver mais!! Eu só queria entender quando eu devo usar isso!! Tipo e se a função que demora retornar lagum valor que vai ser usado na função seguinte ....ele vai ter que esperar de qualquer forma!

[@randerins]

Exatamente!

[@PedroPenhaVerani-ll1wc]

É exatamente pra isso, se você tem uma função X que o retorno dela vai ser usado logo abaixo na função y, trabalhando de forma síncrona a sua thread não vai parar pra executar toda a função X e daí só então a Y, ele vai seguir mesmo se não tiver terminado, daí entra as promises, o await basicamente "pausa" a execução do seu código para resolver a promise, e só então seguir adiante

[@robsonptrainer]

Excelente explicação! Valeu! Já tinha visto um pouco no Full Stack Master, e agora esse conhecimento veio para consolidar! Qualidade da imagem e do áudio tá 10. Abc

[@victorsa5446]

Melhor explicação impossivel

[@DevPleno]

Fico feliz que tenha gostado Victor :)

[@alyssonduarte9952]

Conteúdo bacana! Obrigado!

[@DevPleno]

Estamos juntos :)

[@goncalvestube]

Melhor explicação sobre assincronismo

[@DevPleno]

Muito obrigado, Emerson! :) Abraço

[@danielsantana5126]

Obrigado pelo conteúdo mano

[@DevPleno]

Estamos juntos!

[@jansencarvalho2759]

Parabéns pelo conteúdo!

[@DevPleno]

Muito obrigado 🙌

[@Marcos-tz6fy]

Ficou fácil com sua explicação!

[@DevPleno]

Show! Obrigado :)

[@elziolima6918]

Tu me salvou, guerreiro. Agora eu consigo entender ExpressJS

[@DevPleno]

\o/

[@caiqueandrade9523]

opa man, muito boa sua explicação hein, tu tem uma baita didática!!

[@DevPleno]

Muito obrigado! :)

[@mauriciotb6103]

Show de bola ! Tem que praticar, praticar e praticar ! Obrigado pela aula !

[@DevPleno]

Sem dúvidas, praticar é essencial! o/ Por nada, fico feliz que tenha gostado. Abraços!

[@LucasLopes-hd1ms]

Explicação excelente! Muito obrigado professor :)

[@DevPleno]

[@carlosvaltersantosferreira2217]

Muito boa sua explicação e exemplos... parabéns

[@DevPleno]

Muito obrigado, Carlos!

[@leolima8585]

Vi hoje este vídeo, didática atenciosa, parabéns Tulio, espero um dia comprar seu curso, tenho deficiência de um algo aqui num certo on back end, como faço pra escrever o que seria a dúvida minha?

[@brunolucask8]

Ótimo vídeo Túlio. Eu tenho uma dúvida. Não utilizei o try, catch dentro da função async, mas utilizei o catch no retorno da promise que deu no mesmo resultado. A dúvida é que posso fazer das duas formas? Isso influência em algo? Grato! const init = async () => { const contents = await readFile('./in1.txt') const contents2 = await readFile('./in2.txt') return String(contents) + ' ' + String(contents2) } init() .then(contents => console.log(contents)) .catch(err => console.log(err))

[@DevPleno]

Olá Bruno, fico feliz que tenha gostado :) Pode ser de ambas as formas sim :) O mais importante é que ficou claro para você que uma função async é uma promise, e que esta característica, permite você fazer isso ;)

[@marcosduarte2044]

Ajudou bastante!

[@DevPleno]

Fico feliz! Obrigado pelo comentário :)

[@leticiabarbosa9960]

vc é ótimo! obrigada

[@DevPleno]

Muito obrigado!

[@alessandrobezerramoreira9871]

Túlio, mais um ótimo vídeo. E a minha dúvida é exatamente isso, entender como funciona a mágica. Qual a diferença de uma requisição normal ou JS (ajax). na requisição assíncrona, se faz uma requisição e se recebe várias respostas? (é isso) ? Cada resposta daquela requisição são respostas de eventos da requisição JS ? Ao fazer a requisição JS a single Thread JS é liberada então como é que a requisição retornada vai dar o retorno a requisição correta entre as diversas que são disparadas? Tá uma zona né. Me ajuda aí!!!!

[@DanielSouza-py9ty]

Ainda nao assisti o video to assisindo agora mas pra ficar bem completao podeira ter High-Order Function no meio ai hehe

[@renanalves7271]

Monstro sagrado.

[@DevPleno]

:)

[@dfagundes2001]

Explicação muito boa

[@DevPleno]

Muito obrigado!

[@VicenteFilus]

Excelente explicação. Mas aplicações práticas em em meus sistemas ainda não consigo visualizar. Valeu!

[@drayanelopes]

Obrigada!

[@DevPleno]

:)

[@FelipeOliveir4]

Deixa ver se eu entendi as Callbacks são usadas como threads para permitir a execução do software no fluxo principal enquanto se processa outra coisa?

[@investidornasdaq]

Excelente tutorial! Parabéns! Tema complicado principalmente para novatos. Terei que estudar mais :)

[@DevPleno]

Muito obrigado, Marcelo!

[@gomesdev]

Excelente vídeo!

[@DevPleno]

Obrigado 😃

[@igorrgarcia]

Excelente explicação. Mas tenho uma dúvida que não consegui sanar. Como fazer para que o código seja executado na ordem de forma que só execute o console.log(3) após o console log do readFile()?

[@DevPleno]

Sim sim, se for await readFile esse será o resultado final.

[@erosmlima5981]

hm vou conferir!

[@DevPleno]

:)

[@ruanlima11]

Querido, boa noite. Qual programa vc utiliza para gravar suas aulas? Estou precisando criar conteúdos educacionais, mas conheço apenas softwares de streaming (OBS, streamlabs...). Desde já agradeço!

[@libiojunio8249]

vlw irmão, me ajudou bastante

[@DevPleno]

:)

[@jacksonaquino6941]

Muito bom cara, obrigado pela explicação :)

[@DevPleno]

Opa, obrigado pelo feedback :)

[@luisfernandocostaferreira2195]

Excelente!

[@DevPleno]

:)

[@paulorogerio3890]

Ótima explicação da promisses. Mas tenho uma dúvida. Pesquisei e não achei nada. As promisses sempre vão chamar um callback no .then(). Todo exemplo que vi. Sempre tem o comando console.log. nunca um return. Mas se eu quiser retornar um valor direto, como eu faço?

[@yaraoliveiranak]

Explicação muito didática. Parabéns!

[@DevPleno]

Opa, muito obrigado! Estamos juntos :)

[@ramoncavalcante431]

Excelente aula !! Tinha algumas dúvidas com Promises e nesse video vc esclareceu todas elas. VLW !!!

[@DevPleno]

Show! Muito obrigado pelo comentário! :)

[@EduardoAlessi]

Túlio, um método legal tbm pra esse exemplo seria o Promise.all. Acho q caberia um Plus aí no fim do vídeo.. Rs... Abraço! Ótimo conteúdo por sinal!

[@BrasilEmFatos]

isso executa promisses em cadeia?

[@EduardoAlessi]

@@BrasilEmFatos ele aguarda todas as promises q estão dentro dele serem executadas

[@leonardomaros3info176]

Olá. Qual fonte você usa no seu VS Code?

[@ArthurAlaete]

Eu só fico com dúvida sobre Promise, Async/await em uma coisa: Quando realmente usar? uso em qualquer tipo de função, ou mais geralmente quando vou envolver arquivos? Obrigado pelo conteúdo!

[@PedroPenhaVerani-ll1wc]

Teoricamente você vai usar promises para substituir callback, afim de evitar callback hell melhorando muito a legibilidade e também para trabalhar de forma assíncrona. Em meus projetos uso promises pra ler arquivos, fazer requisições, gravar dados no banco, retornar dados no banco e por aí vai

[@ArthurAlaete]

@@PedroPenhaVerani-ll1wc Entendi, obrigado cara

[@DevPleno]

e sempre que tiver uma operação assincrona (alguma operação de entrada/saída geralmente)

[@dioats]

Didática sensacional ! Ótimo vídeo

[@DevPleno]

Valeu, cara! TMJ o/

[@brunoprogramadorjava]

Video muito bom e muito bem explicado, se possível faça uma sessão de vídeos usando redux com Hooks, um crud qualquer com certeza irá clarear a dúvida de muitos...

[@DevPleno]

Obrigado, Bruno! Sugestão anotada. Abração :)

[@josuebarros-desenvolvedorw2490]

Seu conteudo é top!!! Parabens!!!

[@DevPleno]

Muito obrigado, Josue! Estamos juntos :)

[@gabriellefaria5092]

Explicação maravilhosa. Parabéns!

[@DevPleno]

Muito obrigado! :)

[@diogoizele]

bom dia, pode se dizer que essa função que você criou readFile é uma implementação do fetch?

[@DevPleno]

Não é não. Ela lê arquivos no file system.

[@ricardomoura4411]

aula fenomenal....nao entendi porra nenhuma disso e agora ficou bem mais claro. Obrigado.

[@DevPleno]

Que bom que te ajudou! Obrigado pelo comentário :)

[@RodrigoKulb]

Show, aula de assincronismo!

[@DevPleno]

Opa, muito obrigado!

[@viniciusneto6824]

Muito obrigado, cara! Esclareceu muita coisa. Só preciso agora entender como funciona o assincronismo em loops. Tô queimando neurônios com isso! kkk

[@DevPleno]

Feliz que tenha gostado :) Usa o for await: developer.mozilla.org/pt-BR/docs/Web/JavaScript/Reference/Statements/for-await...of (vou fazer um vídeo sobre ele)

[@viniciusneto6824]

@@DevPleno Opa! Obrigado. Vou dar uma olhada.

[@marcosoliveira8731]

Esclareceu muita coisa! Vlw.

[@DevPleno]

Show de bola! Obrigado pelo comentário :)

[@ruanmontelo]

Explicação muito boa e conteúdo de alta qualidade!

[@DevPleno]

Opa, muito obrigado, Ruan! Abração :)