ฝัง
- เผยแพร่เมื่อ 12 ก.ย. 2024
- 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
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!!!!
Show! Muito obrigado pelo comentário :)
Cara, a explicação mais didática que eu vi até hoje sobre funções no JavaScript! 👏🏽
Muito obrigado, Carlos! Fico muito feliz em saber disso!
Abração :)
Verdade
eu estava procurando saber promises, porém você me deu uma aula de callback, promises e async, vlew mesmo cara, ajudou demais 💟
Que bom que ajudou! Estamos juntos!
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.
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.
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');
}
Somos 2 kkkkkk
Somos 3 então :) hahaha, até entendi a teoria, mas na hora de aplicar essa sintaxe não entendo direito esse esqueleto.
@@ageurodriguesdeoliveira8953 Só basta praticar, agora.
problema foi mais a sintaxe.. tb achei zuado 'aero function', a forma tradicional tem uma sintaxe mais consistente, melhor de enxergar
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.
Show! Muito obrigado, Lucas :)
Simplesmente em 23 min vc tirou essa confusão q era a minha cabeça em relação a diferença desses 3 temas
Show! Muito obrigado :)
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
Minha principal dúvida com JavaScript era em relação ao assincronismo e sua explicação foi muito didática, salvou demais!
:)
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!
Opa, show de bola! Que bom que te ajudou :)
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.
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
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.
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.
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!
Estava assistindo diversas aulas de outros professores, quase 1h de conteúdo, e não entendi nada, aqui em poucos minutos entendi tudo... obrigado
Opa! Fico feliz em saber. Obrigado!
Cara, sua explicação me ajudou demais!!! Parabéns, obrigado e continue assim, pois acredito que esta ajudando muitos como eu !!
Opa, que massa! Estamos juntos!
Abração :)
Sabe aquele estalo que dá quando você finalmente consegue entender uma nova ferramenta/conhecimento? Foi isso que aconteceu!!! Muito obrigado :)
Estamos juntos! :)
Clareou demais para mim. Obrigado!!! Muito obrigado mesmo!
Estamos juntos! 💙
caralho irmão que didatica sensacional... eu tava bugando pra entender um pouco mas tudo ficou mais facil de entender após o video.
Super didático e instrutivo. Muito obrigado!
Feliz que tenha gostado Wagner :)
Obrigado pelo conteúdo, vou explorar mais sobre o assunto com mais exemplos.
Estamos juntos!
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
Que bom que ajudou :)
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.
Não sabia? Iniciante é foda.
Excelente ! Muito Bem Explicado ! Parabéns pelos vídeos ! ! !
Muito obrigado! Estamos juntos :)
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.
Estamos juntos, Jozimar! :)
Que conteúdo Top! A forma de explicação foi uma das melhores que achei sobre o assunto, show!
Muito obrigado! ❤️
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
Dá sim, casa um aprende de um jeito, seja por livros ou por video aula.
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.
Excelente didática, me ajudou muito, valeu!
Muito obrigado!
Quanto mais eu vejo esse tipo de contudo do JS, mais eu me apaixono por GO.
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...
amigão, obrigado, era a aula que eu precisava! entendi perfeitamente o que passaste!
Show! Que bom que te ajudou :)
Parabéns pela explicação! Me ajudou demais!!!
Estamos juntos!
Muito bom, o melhor que vi até agora sobre o assunto!
Opa, obrigado pelo feedback :)
Me ajudou bastante, obrigado pelo conteúdo!
Estamos juntos!
Muito obrigado pelo compartilhamento.
Estamos juntos!
Excelente vídeo! Parabéns e obrigado!
Opa, obrigado pelo feedback :)
Excelente explicação. Didático, mão na massa, simples.
Muito obrigado, Rafael! Abração :)
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!
Que bom que ajudou!
Explicou muito bem...apesar que não entrrei nessa parte de promise..nem async..mas já passei entender..um pouco...obg
Estamos juntos!
top, melhor video do youtube sobre assunto.
Muito obrigado 🙌
Explicação excelente! Muito obrigado professor :)
Perfeito! Ganhou mais uma inscrita! Parabéns!
Muito obrigado 😊
Muito massa. Vlw pelo aula super valiosa!
Estamos juntos :)
Parabens !!!! excelente explicação.
Muito obrigado!
Excelente explicação. Mas aplicações práticas em em meus sistemas ainda não consigo visualizar. Valeu!
Muito bom mesmo esse vídeo, muito obrigado por postar esse tipo de conhecimento de forma gratuita!
Muito obrigado! Estamos juntos :)
Simples, prático e direto ao assunto. Parabéns
Opa, muito obrigado, Ricardo!
Abraço :)
parabéns, você é foda, sem querer faltar com respeito!
:)
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
Opa, muito obrigado, Elias! :)
Show meu querido!! Me ajudou muito.
Opa, muito obrigado!
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!
Exatamente!
É 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
Me ajudou, cara! Muito obrigado!
Ainda nao assisti o video to assisindo agora mas pra ficar bem completao podeira ter High-Order Function no meio ai hehe
melhor explicação, parabens.
Excelente tutorial! Parabéns! Tema complicado principalmente para novatos. Terei que estudar mais :)
Muito obrigado, Marcelo!
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!
isso executa promisses em cadeia?
@@BrasilEmFatos ele aguarda todas as promises q estão dentro dele serem executadas
Excelente aula !! Tinha algumas dúvidas com Promises e nesse video vc esclareceu todas elas. VLW !!!
Show! Muito obrigado pelo comentário! :)
eu só consegui andar com o projeto por causa desse vídeo , vc é top mano
Que massa! Feliz demais por ter ajudado :)
Show de bola ! Tem que praticar, praticar e praticar ! Obrigado pela aula !
Sem dúvidas, praticar é essencial! o/ Por nada, fico feliz que tenha gostado. Abraços!
Parabéns pelo conteúdo!
Muito obrigado 🙌
Muito boa sua explicação, obrigado pela contribuição!
Estamos juntos! :)
que cara bom, parabéns!!!!
😊
Excelente explicação! Estava sofrendo para entender direitinho o que era uma promise e o uso dela.
Show! Muito obrigado pelo comentário :)
Conteúdo bacana! Obrigado!
Estamos juntos :)
Explicação muito boa e conteúdo de alta qualidade!
Opa, muito obrigado, Ruan!
Abração :)
opa man, muito boa sua explicação hein, tu tem uma baita didática!!
Muito obrigado! :)
Sensacional !muito obrigado e Parabéns pelo conteúdo.
Feliz que tenha curtido Allan :)
Obrigado pelo conteúdo mano
Estamos juntos!
Tu me salvou, guerreiro. Agora eu consigo entender ExpressJS
\o/
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?
Monstro sagrado.
:)
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?
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í!!!!
aula fenomenal....nao entendi porra nenhuma disso e agora ficou bem mais claro. Obrigado.
Que bom que te ajudou! Obrigado pelo comentário :)
Excelente vídeo!
Obrigado 😃
Ajudou bastante!
Fico feliz! Obrigado pelo comentário :)
vc é ótimo! obrigada
Muito obrigado!
Explicação muito boa
Muito obrigado!
Explicação muito didática. Parabéns!
Opa, muito obrigado! Estamos juntos :)
Obrigada!
:)
Muito boa sua explicação e exemplos... parabéns
Muito obrigado, Carlos!
Melhor explicação sobre assincronismo
Muito obrigado, Emerson! :)
Abraço
Explicação maravilhosa.
Parabéns!
Muito obrigado! :)
Olá. Qual fonte você usa no seu VS Code?
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...
Obrigado, Bruno! Sugestão anotada.
Abração :)
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()?
Sim sim, se for await readFile esse será o resultado final.
Muito bom cara, obrigado pela explicação :)
Opa, obrigado pelo feedback :)
Didática sensacional ! Ótimo vídeo
Valeu, cara! TMJ o/
Muito esclarecedor, muito obrigado e Parabéns pelo conteúdo
Opa, obrigado, Kelvin!
Abração :)
Excelente!
:)
Pesssoal, boa noite! Como eu retorno essa variável "contents" pra enviar ela pro fontAnd?
Melhor explicação impossivel
Fico feliz que tenha gostado Victor :)
Ó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?
Posso uar async/await junto no if. Problema é o seguinte: estou usando um puppeteer e faço um consulta com três possibilidades de retorno. Para cada retorno terá um seletor diferente. Então não estou conseguindo implementar para cada uma das possibilidades retornadas
Massa o vídeo, mas eu ainda fiquei com uma dúvida. Caso eu queira que o resultado da promessa seja síncrono no output, o que faria? Porque o resultado está 1,2,3 e depois o conteúdo... Num caso prático, se eu tenho uma função que depende de outra e as duas são assíncronas, como ficaria?
Ó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))
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 ;)
Show, aula de assincronismo!
Opa, muito obrigado!
Que video aula maravilhosa!
Obrigado, Breno! Estamos juntos :)
basicamente com o async/await eu consigo controlar o que será assincrono?
hm vou conferir!
:)
Ficou fácil com sua explicação!
Show! Obrigado :)
Excelente explicação!