Async / Await SIMPLES e DESCOMPLICADO no JavaScript // Mão no Código #22
HTML-код
- Опубликовано: 30 янв 2025
- 💡 𝗠𝗘𝗟𝗛𝗢𝗥 𝗛𝗢𝗦𝗧 𝗣𝗥𝗢 𝗦𝗘𝗨 𝗣𝗥𝗢𝗝𝗘𝗧𝗢 → codigofonte.cl...
Você já tentou entender JS assíncrono utilizando Promises e Async/Await e falhou miseravelmente? Esse vídeo é pra você. Vamos te explicar de uma forma TÃO SIMPLES que ficará impossível não entender. Vem com a gente nesse vídeo explorar um pouco da programação assíncrona e saia por aí, todo orgulhoso, mostrando pra todo mundo seus códigos usando async e await.
📝 𝗟𝗶𝗻𝗸𝘀 𝗖𝗶𝘁𝗮𝗱𝗼𝘀
→ Nossa explicação de PROMISES: • Desvendando DEFINITIVA...
→ Esse código está disponível aqui:
☕ 𝗦𝗲𝗷𝗮 𝘂𝗺 𝗺𝗲𝗺𝗯𝗿𝗼 𝗱𝗼 𝗖𝗹𝘂𝗯𝗲 𝗱𝗼𝘀 𝗖𝗗𝗙𝘀
→ codigofonte.cl...
🎧 𝗣𝗹𝗮𝘆𝗹𝗶𝘀𝘁𝘀
→ Dicionário do Programador: codigofonte.cl...
→ Vlog: codigofonte.cl...
→ Mão no Código: codigofonte.cl...
→ CDF na Estrada: codigofonte.cl...
→ CAC: codigofonte.cl...
👕 𝗟𝗼𝗷𝗮 𝗖𝗗𝗙𝗧𝗩
→ codigofonte.cl...
🔔 𝗦𝗶𝗴𝗮 𝗮𝘀 𝗿𝗲𝗱𝗲𝘀 𝗱𝗼 𝗖𝗗𝗙𝗧𝗩
→ Instagram: / codigofontetv
→ Grupo Facebook: groups/...
👓 𝗦𝗶𝗴𝗮 𝗼𝘀 𝗖𝗗𝗙𝘀
▸ 𝗚𝗮𝗯𝗿𝗶𝗲𝗹 𝗙𝗿𝗼𝗲𝘀
→ / gabrielfroes
→ / gabrielroccofroes
▸ 𝗩𝗮𝗻𝗲𝘀𝘀𝗮 𝗪𝗲𝗯𝗲𝗿
→ / nessaweberfroes
→ / vanessaweberfroes
➖➖➖➖➖➖➖➖➖➖➖➖➖➖➖➖➖➖➖➖➖➖➖➖
𝑵ó𝒔 ❤ 𝒓𝒆𝒄𝒆𝒃𝒆𝒓 𝒑𝒓𝒆𝒔𝒆𝒏𝒕𝒆𝒔, 𝒄𝒂𝒓𝒕𝒂𝒔, 𝒃𝒓𝒊𝒏𝒅𝒆𝒔 𝒆 𝒎𝒊𝒎𝒐𝒔.
Caixa Postal: 91735 - Cep: 25620-972
Petrópolis / RJ
❗ Edição e Áudio: RW Studio
🚫 Um vídeo do site Código Fonte - www.codigofont...
#AsyncAwait #Promises #JavaScript #EcmaScript6 #MaoNoCodigoCDFTV
Vocês são um patrimônio da comunidade de progradores, obrigado por existirem!!😊😊😊❤❤
Muuito obrigado! Salvaram minha noite de sono. É bem melhor interromper o fluxo desenvolvimento e "perder tempo aprendendo" do que sair buscando soluções prontas nos fóruns...[Minha opinião]
O fórum lhe dá uma solução rápida, o suficiente para resolver o problema e buscar o porque aquela é a solução. Enquanto que ao buscar um maior embasamento, formulamos a solução conforme o cenário, solidificando ainda melhor as idreias.
Sem duvidas!
Era o que eu tava fazendo, mas tomei a decisão de aprender e deu certissímo!
VOCÊS SÃO NECESSÁRIOS DEMAIS! Obrigado por tudo!
Muito obrigado pelo seu carinho! Seu comentário nos fez ganhar o dia.
Impressionante como seus vídeos vem sempre em muito boa hora
Toda carreira é feita de pequenos degraus, a medida em que você ganha mais experiência você sobe mais um degrau. Compreender bem programação assíncrona, é com certeza, subir mais um degrau nessa escada.
Muito bom o vídeo! Continuem com o excelente trabalho!!
Totalmente de acordo! Muito obrigada Fernando!
Vocês conseguiram explicar da forma simples e direta. Muitos outros vídeos e artigos não são assim. Muito obrigado!
ajudou muito na logica aqui, quem ta tendo problemas com promisse e onPress do touchableopacity use async function
Casal (Homem e mulher), obrigado por este excelente vídeo, me tirou não somente as dúvidas do async await, como também de questões do próprio html. Muito obrigado, continuem sempre assim. Um abraço de Alegrete no RS.
Cara, eu amo vocês! kkkkkkk eu tava com bastante dúvidas sobre promises e vocês ensinam de uma maneira maravilhosa
Excelente vídeo, pessoal! Estava quebrando a cabeça aqui pra entender como funcionam as Promises e o Async/Await. Obrigado por esclarecer!
Muito top o vídeo, acho que aprendi as promises kk negocio agr é praticar. Fiz os exemplos aqui e deram certo :)
Promisse com then fica uma cascata ilegível para até algo simples, visto no vídeo. Show o uso de await, async o fetch. Obrigado.
Show de bola precisei implementar no meu código, funcionou perfeitamente ;)
Show de Vídeo, Vanessa e Gabriel!!! Melhor demonstração que já vi sobre Async/Await, e ainda comparando com o uso tradicional das Promises com método .then!!!!
Thanks!
Façam vídeo simulando ambientes profissionais. Por exemplo: programador web. O que ele faz na prática mostrando o dia a dia
Muito bom os exemplos, entendi Async Await graças a vocês! Obrigado =)
tem algum vídeo deles exolicando melhor cada uma ? pq esse foi muito rápido
Eu batendo cabeça com isso, até vocês aparecem!!! Brigadão mesmo.
Sensacional, agora aprendi do jeito certo em chamar um api com async.
Show, do nada encontrei vocês e já me inscrevi. São bem didáticos. Parabéns!
Seja bem vindo Italo! Muito obrigada!
W T F ! Eu estava pesquisando sobre e tentando entender AsAw hoje mesmo!!
Onde vocês instalaram as câmeras aqui?!?!
Não posso contar, são secretas.. 😜 kkkkk
Que bom que ajudamos!
@@codigofontetv kkkkkkkk
Olha vocês dois, salvaram o meu dia.... Meu obrigado
Voces tem me ajudado muito, muito obrigado codigo fonte pela constante didatica, Denilson From Africa-Mozambique.
Esse vídeo me ajudou bastante. Muito obrigado pelo conteúdo!
Como sempre esse casal arrasa no conteúdo hein? Muito top! Gostei desse projeto aí de buscar letras de músicas hein? Vou ver se desenvolvo esse projeto! Obrigado por compartilhar!
Didática impecável sempre! Obrigado!
gostei da aula, valeu !! gostei do jazzinho de fundo tbm, muito da hora, raro ver em vídeos de TI , abraços
Vídeo muito valioso, somado a leitura da documentação é coisa nova aprendida com sucesso!
Que bom que você gostou Matheus! Ficamos felizes em poder te ajudar de alguma forma. Grande abraço!
@@codigofontetv Tenho uma pergunta para vocês, qual extensão vocês utilizam para criar esse código de bootstrap automaticamente?
Sério gostaria muito de um curso de Javascript/Node.js na udemy eu compraria sem pensar duas vezes !
Depois desse vídeo não tem como não entender. Ótimo vídeo.
Que conteúdo maravilhoso em, como diz o Deschamps, Matou a pau hahaha parabéns casal!
Muuuuuito obrigado Victor!!! Tomara que o vídeo tenha te ajudado. Grande abraço! 🤓
@@codigofontetv Tenho uma pergunta para vocês, qual extensão vocês utilizam para criar esse código de bootstrap automaticamente?
Muuuito bom!! Vocês são demais.
Muito obrigado pelo seu carinho Park
Finalmente consegui entender esse async await. MUITO OBRIGADO!!! ❤️
Vcs são fantásticos.
Caraca! Parabéns pelo vídeo! Espetacular!
Cara, me ajudou demais. Vou exercitar para me aperfeiçoar.
"desbugou" meu cérebro... melhor conteúdo, parabéns!
excelente vídeo, parabéns!
Conteúdo Muito Forte!!!!!!!
Muito obrigado pela aula, conteúdo muito bom
Muito bom. Logo mais vou praticar !
A musica de fundo parece até aquelas músicaszinhas daquele jogo de sinuca que tinha no super nintendo, não sei se já jogaram, mas era muito bom kkk!
Dica pra vocês, ja vi que vocẽs tem bastante equipamentos num vídeo passado, acho que vocês gravam o Mão no Código com a WebCan, vocês já testaram gravar com a câmera melhor que vocês tem? Aquela que vocês gravam o dicionário do programador? Talvez ficaria melhor!
Abração, o conteúdo ta sensacional!
Obrigada pela dica! Já estamos com uma placa para fazer esse teste de captura.. vamos ver se dará certo. :)
Po cadê o link desses projetinhos no GitHub? 😘
Agora posso passar ao proximo pedido. Um videos sobre Flutter e desenvolvimento híbrido, e comparado com Nativo, tanto Android quanto IOS
Falamos um pouco sobre o assunto nesses episódios do Dicionário do Programador:
React Native: ruclips.net/video/mqltv3kFdgE/видео.html
Ionic: ruclips.net/video/5QqvO_9LPzQ/видео.html
Flutter: ruclips.net/video/XkEA4xT34jg/видео.html
Espero que ajude!
Muito bom!! Mas um floreio de vez em quando é bom também, então, fugindo um pouco da proposta do vídeo, gostaria de saber se esse "foguinho" ao digitar é efeito na edição do vídeo ou alguma extensão? =P
É uma extensão, o nome é Power Mode. ;)
@@codigofontetv Vcs são sensacionais!! Obrigado!! ;)
OBRIGADO, estão salvando um Junior perdido!
Vocês são de mais !!!!!!!
Muitooo bomm..
Melhor ainda foi a parte do violão hehehe
vocês ficam instlando cameras nas nossas casas para saber o que estamos a procura nem??? kikikikikiki! MARAVILHA!
Não conta pra ninguém.... kkkkk
Video muito bom como sempre
Muito bom o vídeo
Obrigado pessoal
Olá, amigos! Parabéns por mais um ótimo vídeo. Tenho uma dúvida: tem algum motivo específico para usar querySelector ao invés do getElementById?
Oi Eduardo muito obrigado. No caso do vídeo poderíamos realmente ter utilizado o getElementById, que aliás, teria performance melhor.
Grande abraço.
Esse video chegou no time
Ótima aula para iniciantes, mas fiquei me perguntando... por que usar LiveServer no vsc ao invés de NodeExec já que o foco é o console hehe
Muito bom!! Parabéns!!
Mais outro grande vídeo!!
btw enviei um email, espero que o carteiro chegue ao brasil em breve eheh
Ótimo vídeo.
Sensacional, parabéns!
Adorei o conteúdo! Estava testando o último código da API com Async e Await das Lyrics mas deu erro. Onde se encontra a disponibilização dos códigos?
tbm nao achei, parece que tiraram do video...
Show de bola !
valeu pela dica do live server, amei
Muito bom!
show demais e mt bem explicado
Descomplicaram mesmo, muito bom!
Otima explicação.
Parabéns !!!! qual o plugin usado para o cursor fire ?
Olá bom dia,meu nome é Silvio gosto muito do canal de vocês,com dicas super valiosas,vocês dois são realmente sensacionais,
parabéns pelo canal e o grande trabalho de vocês.
Mas hoje venho aqui porque tenho uma dúvida que é muito importante para mim,e sei que com dicas de vocês eu sei que vai ser bastante valiosa pra mim.
É o seguinte,na empresa onde eu trabalho tem bastante oportunidades internas para os funcionários.
E algumas vagas que sempre surge é na área de (CPD) TI,eu gosto bastante da área de TI e tenho um pouco de conhecimento,
faço até uns trabalhos por fora para aumentar minha renda,mas gostaria de saber se ainda compensa eu fazer uma graduação na área de TI,
já que me identifico bastante,os meus superiores já até conversaram comigo referente a vaga,mas não tenho formação superior na área de TI,
quero saber se compensa eu fazer tecnólogo em ANALISE E DESENVOLVIMENTO DE SISTEMAS com 36 anos? obrigado e mais uma vez parabéns...
Muito obrigado por nos acompanhar e tb pela sua pergunta que é muito pertinente.
Um curso superior sempre agrega em conhecimento porém não é impeditivo para atuar na área e muito menos ser bom nela. Se você tem um perfil auditada e se vira bem estudando por sua conta vai fundo, mas se por alguma razão sua empresa requer uma formação superior, vai fundo tb.
O investimento em educação NUNCA é demais. Os cursos tecnólogos são geralmente bem dinâmicos e direto ao ponto.
Grande abraço e sucesso pra você! 🤓
mt bom parabens
Valeu pelos vídeos, ajudaram bastante! Só que esse try/catch está me consumindo quase 30 segundos no código. Eu havia feito usando o selenium no Java e o mesmo ocorria. Sabem alguma forma de contornar isso?
Por exemplo, preciso verificar a existencia de um seletor na página com await page.$(seletor), que deveria retornar null se nao existir, mas dá erro. Daí envolvi no try/catch e perde esses 30 segundos. Como está dentro de um loop de mais de 300 iterações, fica inviável.
Fale sobre threads!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
Ótimo vídeo! Só ficou faltando o link do código no github. Seria muito legal se pudessem disponibilizar para todos.
Oi Gabriel, como tu fez pra aparecer aquela chama na digitalização?
Mesma dúvida que tive
É uma extensão do VSCode chamada Power Mode
top!! muito bom
Olá Gabriel e Vanessa,
tudo jóia?!
E estou com um dúvida que gostaria, que me mostrassem a direção e o restante eu buscaria as respostas.
O projeto é fazer um site/portal, que ajudem vendedores na hora de fazer seus orçamentos.
Ex.
Vendedor 1 precisa entrar em vários site, inclusive fazer login em cada um deles, e pesquisar em qual site é mais barato e dai passar para o seu cliente o seu orçamento.
A minha ideia é fazer um site/portal que ele inserisse no meu site os dados da pesquisa dos produtos, o meu site logaria nos sites dos fornecedores, pesquisaria e retornaria os dados de cada pesquisa. E assim, economizando muito tempo.
Dai o vendedor escolheria qual fornecedor compraria, ao invés de entrar em cada site individualmente
A minha dúvida, é a seguinte:
- Qual(ais) linguagem(ns), bibliotecas, frameworks seria melhor para eu implementar esse meu projeto?!
Obrigado pela atenção. Abrsss
Continuem com o excelente trabalho.
Gostaria muito que alguem do youtube gravasse um video mostrando a fase em que o programa "deixa de ser programa: e passa a fazer a interação na tela com o usuário.
Muito bom valeu
Essas definições valem pra python tambem?
Não tem link do codigo :(. Poderiam dizer como pegar ao menos o bootstrap do query de lyrics?
Qual essa extensão das chamas ao digitar?
Se chama Power Mode. 🔥
Uma pergunta simples de iniciante, mas o que deve ser usado para Todo o código do arquivo "lyrics.js" rodar apenas no servidor e não ser mostrado no browser?
Muito melhor pra se ver, código com promises pode ficar confuso.
Eu não entendi uma coisa, se dentro do try ele já exibe no else o erro. Porque colocar o catch depois do try? Porque essa estrutura? Porque ao invés de exibir o erro no else no try, não mostramos no catch?
5:28 Ele explica exatamente isso. O erro dentro do Try não foi tratado se não existir o Catch dele (por isso deu Uncaught Error, caso não tivesse o Try daria Unhandled Promisse).Lembrando que Reject é diferente de Catch que é diferente de Throw New. Todos Trys devem ter seus respectivos Catchs para tratar o erro de todas promises executadas dentro do Try.
Muito bom!!!!!!
esse foguinho que saí quando vcs digitam é edição de vídeo ou é um plugin do vs code? mt daora kkkkkk
Sim. É o Power Mode.
Show!!
Bom! Tem um video ensinando como configurar os arquivos pra funcionar async await/
Calma o 🔥 que sai conforme vcs digitam é do VSCode?🔥
Power Mode Vscode
Só eu que vi a cara da Vanessa quando ele digita Love of My Life? Em 11:36 hahahaha
Só quero saber qual extesão uso pra aparecer o foguinho quando apaga a linha em 2:00
Power Mode
Qual extensão para pegar foto na hora de digitar o código? Rs
Cara, como vocês fizeram pro bash ficar parecido com o OhMyZsh? A minha instalação de zsh + OhMyZsh fica muito lenta no WSL
como que vc sai para ficar saindo esse foguinho quando você digita
Tem o código no GitHub?
vocês tem cursos?
estou com difoculdades em fazer uma api de pokemon, nessa api preciso de colocar a localização do pokemon, porem quando coloco ele aparece como link no html que foi feito
daonde vem aquele lyrics do data.lyrics??
Nao entendi isso tb! nao ta nem no caminho da API
@@gabrielceolato2 opa amigo eu entendi depois, é a resposta do then, é como se fosse um await
const teste = await promiseAExecutar()
const jsonDoTeste = teste.json()
jsonDoTeste.lyrics
Tomara que próximo tema seja melhor
Manda uma sugestão pra gente. :)
@@codigofontetv podem falar de SQL ... sql injection, php, criação de apps para android ... criação de intranet com wordpress ... pwa ... edicação de vídeos para youtube, igtv e facebook watch ... programação mobile ... tudo mão no código :-) !!!
Eu ainda não entendi uma coisa, usamos await para aguardar a resposta da Promisse? Se sim, para que utilizar Promisse se no final das contas eu use uma lógica síncrona, e não assíncrona? Se alguém puder me ajudar a entender isso, ficarei muito grato. Muito obrigado desde já, e obrigado pelo ótimo vídeo xD
pq aqui e um exemplo rapido para explicar mas na realidade isso ai e utilizado em requisicoes web, por exemplo un boton que envia uma requisicao e caso o status seja 400 o promise retorna o erro, lembrando q o promise e um objeto. kkk acho q e isso
Valeuuuuuuuuuuu
Alguém sabe o nome dessa extensão do VS Code que sai fogo enquanto escreve?