Transcrições
1. Apresentação: Bem-vindo à classe
JavaScript assíncrona. Nesta aula, aprenderemos retornos de chamada, promessas e espera assíncrona,
que são os tópicos mais
importantes para desenvolvedores de JavaScript, especialmente aqueles que desejam
dominar, reagir ou criar um nó. Se esses conceitos forem apagados, você
poderá aprender facilmente outros conceitos em
React e node. Sim, você obterá
todos os recursos para o exercício e o dígito desses conceitos na seção de
projetos. Então, não vamos perder
tempo e começar.
2. Síncrono vs assíncrono: Então, primeiro de tudo, vamos
entender a diferença entre síncrono
e assíncrono. Então, aqui eu
crio o arquivo index.html. E nesta pasta JavaScript, temos o arquivo script.js. E vinculei esse
arquivo JavaScript ao nosso arquivo HTML. Agora vamos copiar esse caminho de arquivo
HTML e colá-lo no navegador. E vamos abrir a taxa de console. Agora, neste arquivo JavaScript, eu escrevo console.log primeira linha. Depois disso, outra última linha do
console.log. Então, esse é o exemplo de código
síncrono
ou código de bloqueio. Porque quando essa
primeira linha é executada, o código está bloqueando. E essa última linha tem que esperar
até que essa primeira linha
termine a tarefa. Por outro lado, viu programa assíncrono ou
sem bloqueio. Deixe-me mostrar o exemplo
de código assíncrono. Em JavaScript. Temos uma função
chamada setTimeout. Agora, o primeiro
argumento é função, e o segundo argumento
é tempo para atraso. Digamos que 2 mil
milissegundos, seja, dois segundos. Após dois segundos, essa
função será executada. Então imagine aqui que estamos
obtendo dados do banco de dados, o que leva dois segundos. Agora, você consegue adivinhar o que
temos no console? Vamos ver. Então eu atualizo a página e vejo que
temos a primeira e a última linha. E depois de dois segundos, obtemos isso obtendo
dados do banco de dados. Então, antes de tudo, essa
primeira linha será executada. Em seguida, chamamos essa função
setTimeout. Esta função agendará
uma tarefa, será executada no futuro. Isso não bloqueia a meta, e é por isso que a chamamos código
não bloqueador ou
assíncrono. Então, quando executamos esse código, obtemos essa primeira linha, depois imediatamente a última linha. E depois de dois segundos, recebemos essa linha. Vamos entender isso com
o exemplo da vida real. Aqui está um restaurante. O garçom chega à mesa um
e recebe ordens deles. Agora o garçom dá esse pedido para a cozinha e depois passa para a
mesa 2 ou outro pedido. Portanto, há um avaliador que pode
atender a mais clientes. Então, esse é o exemplo
de assíncrono. Agora, esse é outro diagrama de raio de
restaurante para a mesa um e
ordem deles. Agora o garçom dá esse
pedido para a cozinha e depois espera
que o código esteja pronto. Ele não está recebendo ordem
de outra mesa. Portanto, o sistema de restaurantes vai bloquear por causa disso. E este é o exemplo de
blogging ou pontuação síncrona. Portanto, síncrono ou assíncrono
é o tipo de código. Agora, vamos tornar esse
exemplo mais realista. Então eu crio uma
função chamada get student e movo essa função de
tempo limite para dentro. Esta função retornará aqui os dados do nome do objeto do aluno, bob, um ID para um. Agora, vamos chamar essa
função aqui e armazenar esse valor em uma
variável chamada student. E depois disso,
simplesmente registramos a aluna, Sylvia, assumindo que estamos
obtendo dados do banco de dados. E leva dois segundos, salve isso e atualize a página. Veja, nós pegamos esse aluno como indefinido porque essa função está sendo executada após dois segundos. Então, quando chamamos essa função, esses dados escritos
não estão disponíveis. Se quisermos retornar um
valor dessa função, então você tem a declaração de
retorno correta aqui. Mas isso não é o que queremos porque estamos obtendo
dados do banco de dados. E pode demorar mais uma vez, aqueles segundos ou mais do que isso. É por isso que usamos setTimeout para adicionar
atraso nessa tarefa. Agora, como podemos obter
esses dados dos alunos aqui? Portanto, existem três métodos
para lidar com código assíncrono. Retornos de chamada, promessas
e assíncronos aguardam. Então, vamos começar com os retornos de chamada.
3. Callbacks: O que é chamado de retorno é uma função que é executada. Eu fiz outra função
finalizada a execução. Em outras palavras, qualquer
função que
passamos como argumento
para outra função. Então, chamamos essa
função de retorno de chamada. Deixe-me mostrar a você.
Então eu apenas adiciono aqui parâmetro
id e
compro esse id aqui. Em função, passamos um, que eu esqueci de adicionar. Então, para aplicar o retorno de chamada, temos que fazer a definição da função do pequeno
gene. Então eu adiciono aqui
argumento chamado de volta. Agora, esse retorno de chamada é função. Então, chamamos essa função
ao imprimir dados. Então, depois desse console, adicionamos retorno de chamada e Gaul. Essa função aqui agora compra os dados do aluno
nessa chamada de volta. E vamos remover essa devolução. Não precisamos mais disso. Agora não estamos retornando nada dessa função
getString. Portanto, não precisamos mais armazenar esse valor de função na variável. Agora, para o nosso segundo argumento, temos que passar a
função que eu uso aqui em uma função e mover esses
consoles nessa função. Agora, vamos obter os
detalhes do aluno como parâmetro do aluno. Agora você pode pensar que
isso é confuso, mas acredite em mim, isso não é. Deixe-me explicar desde o início. Aqui. Estamos chamando esse
esboço para executar a função, e passamos este como IID. Então, depois de dois segundos, gere o console desta linha. E depois disso, essa função de
retorno de chamada será executada, passamos um segundo argumento. Então, obtemos esses dados de objeto
nessas duas variáveis aleatórias. E então podemos resolver esses dados de
estudantes simples assim. Então salve isso e
atualize no navegador. Veja, nós temos essa primeira
linha, última linha. E depois de dois segundos, recebemos essa linha. Usando essa técnica. Não obtemos
dados indefinidos como obtivemos anteriormente. Essa função de retorno de chamada será
executada após dois segundos. Agora, a parte engraçada
é que você já usa retornos de chamada em seu código
antes deste tutorial. Portanto, preste atenção na sintaxe
da função setTimeout. O melhor argumento é a função, e o segundo argumento é o tempo. Então, sabemos que quando passamos function como um parâmetro
em outra função, então chamamos essa
função como callback. Agora, imagine aqui que queremos obter outros dados
do aluno,
digamos, informações do assunto do aluno. Então eu crio outra
função chamada gets objects and bias here,
id, que é a ID do aluno. Agora, dentro desta função, estamos assumindo que a agregação de dados
novamente do banco de dados. Então eu adiciono aqui setTimeout e a função Baz
como primeiro argumento. E dois segundos. Agora aqui, primeiro eu consolo a
obtenção do assunto do aluno e passo aqui essa identificação. E eu não fiz matérias como
matemática, ciências, informática, etc. Agora, vamos chamar essa
função aqui e passar o ID, que é o ID do ponto do aluno. Mas, como
sabemos, não obtemos dados imediatamente. Então, usamos o retorno de chamada. Então, aqui nós adicionamos retorno de chamada. E antes de escrever, chamamos essa função de retorno de chamada e passamos esse array
nesse retorno de chamada. E remoto está escrito. Agora vamos definir o
retorno de chamada aqui e obter esses assuntos que estão
na variável subjects. E depois disso, podemos
consolar os assuntos, salvar isso e atualizar a página. Veja, o que devemos comprar? Linha do correio, última linha. Depois de dois segundos, obtemos os dados dos alunos
e, depois de mais dois segundos,
obtemos os dados dos sujeitos.
4. Como resolver o inferno de Callback: Agora, existem alguns
problemas com retornos de chamada. Deixe-me explicar. Aqui. Digamos que queremos obter
notas desses assuntos. Então, crio rapidamente
uma função chamada getMax e passo o objeto como
parâmetro e retorno de chamada. Agora eu apenas copio essa função
setTimeout e cole-a aqui. Vamos mudar a mensagem
do console, que está tirando marcas. E preconceito aqui
assunto e viés máximo neste retorno de chamada, digamos 80. Agora chamamos getMax e
passamos aqui o assunto no índice
0 e depois redefinimos nosso retorno de chamada
para impressão. Isso marca. Então, escreva a marca console.log. Você vê que há uma estrutura
aninhada porque estamos chamando vários
retornos de chamada em um retorno de chamada. E isso tornará nosso código difícil manter e entender. Esse problema é conhecido
como retorno de chamada ****. Isso não é, temos
uma pontuação assíncrona. Então, se todas essas funções
são síncronas, nosso código se parece com isso. Você pode ver como esse código
síncrono é fácil de entender
e manter. Então, para resolver esse problema de
callback ****, faremos uma
função anônima para nomear a função. Em outras palavras, como declaramos
aqui, função de retorno de chamada, que é uma função anônima
porque não tem nome e os define separadamente
como chamada de função. Então definimos aqui a função chamada display max e
obtemos Mark como parâmetro. Simplesmente console esta função malloc de
exibição de marca é a mesma que esse retorno de chamada. Então, vamos
substituí-lo pela nossa função. Agora, aqui definimos uma função
chamada assuntos de exibição. E obtemos assuntos como parâmetro aqui e copiamos essas
duas linhas daqui, e colamos dentro de nossa função de
exibição de assuntos. Portanto, essa função é
igual a esse retorno de chamada. Podemos substituí-lo por assuntos de
exibição. Agora, o mesmo para esse retorno de chamada. Criamos uma nova função
chamada display student e obtemos os
dados dos alunos como parâmetro. E então simplesmente copiamos
isso e colamos aqui. Agora, podemos substituir esse retorno de chamada por esse aluno
deslocado. Observe que não estamos
chamando essa função. Acabamos de passar a referência aqui e vemos que não temos
essa estrutura aninhada. Então eu copio esse código em um novo
arquivo chamado callbacks ab.js. Portanto, você pode consultar essa
pontuação no futuro. Agora, essa abordagem não é ideal, mas é melhor
do que Callback ****. Essa é a melhor
maneira de lidar com código
assíncrono
usando promessas.
5. Implementar promessas: Então, o que é promessa? Uma promessa é um objeto
que é capaz conter o resultado de uma operação
assíncrona. Em outras palavras, Rami está
prometido que você fornecerá o resultado da operação
assíncrona ou lhe dará erro. Deixe-me explicar
com um exemplo. Aqui. Eu crio um novo arquivo
chamado Promises ab.js e vinculo isso ao
nosso arquivo index.html. Agora, para criar uma promessa, reescrever uma nova palavra-chave
e depois prometer. Agora, essa função de promessa recebe um argumento que é uma função
com dois parâmetros. Aqui. primeiro parâmetro é resolvido e o segundo parâmetro
é rejeitado. E função de seta. Dentro disso, escrevemos
nossa pontuação assíncrona. Aqui. Novamente, estamos assumindo que estamos obtendo
dados do banco de dados. Então escrevemos aqui setTimeout e função bars
e dois segundos. Agora, imagine aqui que obtemos
nossos dados do banco de dados. Então eu crio uma variável chamada
student equals to object, digamos id2, um nome para Bob. Agora escrevemos aqui
resolvido porque obtemos dados
com sucesso e passamos aqui a variável
student. Agora vamos fazer essa promessa
em uma variável chamada promessa. E vamos consumir essa promessa. Eu prometo, que é
o ponto variável. Aqui. Temos dois
métodos principais e obtemos. Então, quando criamos a promessa, ela está em estado pendente. E se concluirmos as tarefas
assíncronas, então os brâmanes em estado
cumprido. E se isso for um erro, Brom está no estado rejeitado. Aqui, nossa promessa cumprida porque chamamos aqui resolvida. Então, quando a promessa é cumprida, obtemos nossos dados
nesse método de banda. Agora armazenamos nossos dados no
parâmetro result e, em seguida, simplesmente
consolamos esse resultado. Salve isso e veja
depois de dois segundos, obtemos esse resultado. Agora imagine que, por algum motivo, não
obtemos dados do banco de dados. Então eu comento essas linhas e chamo aqui a função de rejeição. Agora, para uma melhor prática, toda vez que criamos um novo erro e enviesamos nossa mensagem de
erro aqui. Salve as alterações e
reprima a página. Veja, temos esse erro aqui. Agora, vamos ver como
consumir esses erros. Então, após esses 10 metros, adicionamos outro
método chamado catch. E obtemos adder e
console.log esse erro, esse NC, obtemos esse erro aqui. Então, esta é a implementação
da promessa em JavaScript. Agora, deixe-me mostrar
como podemos converter nosso código anterior em promessas. Então eu tenho esse código, qualquer que seja o problema de retorno de chamada ****. Então, vamos começar com essa função
get student. Nesta função,
retornamos a nova
função PROMISE AND com
variáveis resolver e rejeitar dentro
dessa função de erro. Remova esse código. Agora, vamos remover esse retorno de chamada. Não precisamos disso e adicionamos
o local desse retorno de chamada. Nós adicionamos resolvido. Agora vamos testar essa promessa. Aqui. Chamamos essa
função de execução de esboço e passamos id1. Agora isso fica inchado função
retornará a promessa. Armazenamos essa promessa
em uma variável chamada promessa do que consumimos essa promessa e adicionamos
aqui que o método. Agora obtemos esses dados no parâmetro
student e simplesmente
console.log o aluno. Agora vamos comentar esse código. E eu vinculo esse
arquivo de script com o arquivo HTML. Salve isso e atualize a página. Veja, depois de dois
segundos, obtemos dados.
6. Exercício e solução: Agora, se você me
acompanhar, então eu tenho uma tarefa para você. Eu quero que você converta essas
duas funções em promessas. Então, pause este vídeo aqui
e experimente você mesmo. E depois disso, observe a
solução. Nesta função. Voltamos e escrevemos aqui Novo e selecionamos essa nova promessa. Veja, nós obtemos esse clichê
usando esses pequenos truques, você pode aumentar sua produtividade. Agora, mova esse código para
dentro dessa função e remova esse retorno de chamada e
substitua-o pelo resultado. Agora, aqui, também criamos uma nova promessa e movemos esse código para dentro
dessa função de seta. Agora remova esse retorno e substitua-o pelo resultado. Convertemos nossa antiga
função em promessa. Agora, vamos ver como consumir
essas promessas aninhadas. Então, removemos esse console
daqui e chamamos nossa próxima função. Acabamos de obter disciplinas e
passar o ano do aluno dot id. Agora sabemos que essa função
voltará a ser promissora. Então, temos que usar o método then. Fora desses 10 metros, adicionamos outro que não
armazenado em assuntos. Agora, depois disso, chamamos função
getMax e passamos
aqui nosso primeiro assunto. Agora temos outra promessa aqui. Então, adicionamos um a mais do que a
matéria e armazenamos essa marca. E simplesmente console
dot log esta marca, salve isso e atualize a página. Veja que está funcionando da mesma forma que antes. Agora podemos ver quando
usamos retornos de chamada, nosso código se parece com
essa estrutura aninhada. E depois de aplicarmos as promessas, o mesmo objetivo parece
simples e alinhado. Agora, para uma boa prática, sempre
adicionamos método de caixa, cabeçalho e erro console.log. Portanto, se obtivermos um erro em qualquer uma
dessas promessas, a função de
captura única será executada. Simples assim. Agora podemos até simplificar essas promessas
usando async await.
7. Async Await - [Melhor maneira de lidar com promessas]: Portanto, o async await nos ajuda a escrever código
assíncrono como núcleo síncrono. É como uma mágica. Deixe-me mostrar-lhe aqui. Eu chamo essa função
get student com id1. Agora, quando chamamos
qualquer função que está retornando uma promessa, podemos esperar por esse
resultado e, em seguida, armazenar esse resultado em variável como fizemos em código
síncrono. Então, vamos armazenar isso em uma
variável chamada student. Agora, da mesma forma, chamamos
a função next, que é get subjects e
Bhatia student dot ID. Agora vamos esperar por isso e armazenar em uma variável
chamada assuntos. Agora, depois disso, chamamos
nossa última função, que é getMax e objeto de fáscia de
polarização
da matriz students. Agora vamos também um peso para isso e armazená-lo
na variável Mark. E então nós
console.log essa marca. Agora você pode ver usando esse
assíncrono e nosso interpretador, podemos escrever código assíncrono, parece um núcleo síncrono. Isso é fácil de entender e manter em comparação com
o retorno de chamada, bem
como promessas. Não precisamos escrever esses
dez metros de novo e de novo. Agora você pode ter agressão. Isso é assíncrono. Então, sempre que usamos o operador
await, temos que mover isso em
função com o operador assíncrono. Deixe-me mostrar a você. Então eu simplesmente adiciono uma
função aqui chamada dados de
exibição e movo
esse código para dentro dela. Agora, no início
dessa função, eu adiciono async. É isso aí. Lembre-se, sem essa ação, você não pode usar
oito em seu código. Isso lhe dará erro e edição, e vamos chamar essa função de dados de
exibição. Agora eu comento
essa parte das promessas. Salve isso e atualize a página. Veja, temos o mesmo
deserto com async await. Nosso código parece síncrono,
mas sob o capô, o mecanismo JavaScript converte
discórdia em algo assim, frio ou frio, funciona como núcleo
assíncrono e
se parece com código síncrono. Simples assim. Agora, nas promessas, lidamos com o erro usando
esse método get. Mas como podemos lidar com
esse erro nessa abordagem assíncrona e aguardada
para tratamento de erros. Usamos o bloco try and catch. Então eu escrevo aqui seco. E dentro desse bloco try, movemos nosso código antigo. E depois disso,
adicionamos o bloco catch. E esse bloco catch
obtém objeto de erro. E nós simplesmente consolamos o
dot log desse erro. Então, em termos simples, se algum erro ocorreu
nesse bloco try, blog desse cara será executado. Então eu comento
essa variável de marca, degustação
parcial, salvei isso
e atualizo a página. E veja que recebemos esse erro. A marca não está definida. Então, quando usamos async
await como uma boa prática, sempre
quebramos nosso código
e tentamos capturar o bloco.
8. Recapitular todos os conceitos: Vamos recapitular o que aprendemos. Portanto, a função de retorno de chamada é o melhor método para lidar com pontuação
assíncrona. Mas em rúpias de função de retorno O problema chamado callback ****. Agora, depois disso, vemos promessas, que simplesmente prometiam
fornecer o resultado da operação assíncrona
ou dar erro. Então, para criar a promessa, usamos a nova promessa e dentro dela passamos a função
com dois métodos. Resultado, rejeição, o único meio cumprido e
rejeitar significa rejeitado. Mas com promessas, também
obtemos esses métodos aninhados. Então, depois disso, vemos operadores de espera
assíncronos. Essa espera assíncrona funciona como um código
assíncrono e se
parece com um núcleo síncrono. Então, quando chamamos a função, adicionamos um operador de peso
no início. Isso nos ajudará a escrever
código de forma síncrona. E o mais importante,
você precisa colocar esse código em uma função
com um único operador. Sem assíncrono, o await não
funcionará. E é por isso que é
conhecido como async await. E a última coisa, tratamento de erros. Usamos try and gauge block, suspiro por erros e
dry para todo o código. Então, colocamos nosso código antigo no bloco
try e lidamos com o
erro no bloco catch. Então, parabéns, você
concluiu esta aula e espero que você
entenda esses tópicos. Se você gostou dessa aula, pode compartilhar suas avaliações. Isso me ajudará a alcançar
mais estudantes como você. Então, vejo você na
próxima aula. Adeus.
Code Bless You, Make Coding Easy To Learn
