*NOVO* AJAX - Curso completo de fundamentos - Parte 9: loop de eventos e Async/Await

2. O que é o loop de evento: Você está pronto? Espero que sim. Esta é uma seção incrível e vidro incrível e poucas palestras falando sobre assíncrono e aguardam. E isso realmente está adicionando uma fuga moderna à já moderna API de TI. E eu odeio essa palavra, mas para entender assíncrono e aguardar, você precisa de um entendimento de alto nível sobre qual é o loop de eventos. Não quero entrar em muitos detalhes sobre o loop de eventos que você precisa saber que ele existe. E isso só ajudará a solidificar solicitações assíncronas. Ou em, deixe-me começar bem no básico. Sabemos que o navegador, também conhecido como Chrome e JavaScript, por exemplo, Node.js, eles são de um único encadeamento. E como estamos lidando com o ajax, estou mais preocupado agora o navegador e entendo isso, tudo dentro de um navegador é executado em um thread principal. Todos os navegadores têm uma coisa chamada thread principal. E neste tópico principal, muitas coisas acontecem. É aqui que as partes para o navegador. É aqui que seu código JavaScript é executado. É onde a renderização acontece e é como o DOM, o Document Object Model faz loops. O que isso significa? Isso significa que, se algo no segmento principal levar muito tempo para ser executado, todo o resto será bloqueado. Eu quero que você visualize essa imagem. Eles estão sendo um fio principal. Neste tópico principal, tudo acontece como eu mencionei, é aqui que as festas ainda. Não é apenas o JavaScript executado no encadeamento principal, mas também a atualização do DOM quando um navegador atualiza CSAs. Tudo isso acontece neste tópico principal. Para evitar certas tarefas bloqueando todo o resto, o navegador teve uma boa ideia de gerar vários segmentos longe do thread principal. Mas é claro que, uma vez que essas cepas tenham feito algo que uma página precisa se preocupar, elas precisam voltar ao tópico principal para dar ao navegador essa informação e peso como o pé do tubo do evento . Você sabe? Bem, é o loop de eventos que lida e gerencia todo esse processo. Vamos, isso é muito legal, certo? Esse é o tubo par. E para levar o ponto para casa, por que não olhamos para o código especificamente. Quero ver a função setTimeout. Já vimos isso algumas vezes neste curso. Mas deixe-me quebrá-lo. É assim que você escreve. São necessários dois argumentos, o retorno de chamada e milissegundos. Mas o que significa a função de tempo limite de sake ? O que ele está fazendo? O que está fazendo? Duas coisas. A primeira coisa é que ele espera x milissegundos sempre que definimos. E uma vez concluído, esperar que esses milissegundos passem será então executar a função de retorno de chamada. Mas agora não vamos tratar isso como uma função assíncrona. Vamos agora considerar que a função setTimeout é executada de forma síncrona. Se o executássemos como função assíncrona, assim como nós, ele seria executado no thread principal e isso significa que ele puxará todo o resto até que seja feito. Não queremos que isso aconteça, certo? Isso é muito ruim para a experiência do usuário. Como resolvemos isso? Bem, isso é certo Para evitar essa função de tempo limite de estado não seja executada no thread principal. Lembre-se desses negócios paralelos. Um termo de desenvolvimento extravagante para isso é que ele está sendo executado em paralelo. E isso é apenas uma conversa extravagante para fora do tópico principal em um desses tópicos laterais que, se você realmente parar de pensar nisso, isso vai representar outro problema, porque quando chegar a hora de executar essa função de retorno de chamada , lembre-se, depois que os milissegundos passaram, então o que acontece? Bem, essa função de retorno de chamada tem que ser executada e a execução está ocorrendo. Isso é mesmo no tópico principal. Você pode ver o problema com isso indo automaticamente para o segmento principal sempre que eles chamarem essa função estiver pronta. O problema é que você pode estar executando muito código JavaScript em paralelo. Isso significa que, potencialmente, você poderia estar editando o mesmo DOM ao mesmo tempo, o dia NG completo correr para o que os desenvolvedores chamaram de problemas de condição de corrida. Efetivamente, o que isso significa é que você não quer que uma função JavaScript manipule metade o DOM. E, de repente, essa função de retorno de chamada é lançada no thread principal e começa executar outra parte do DOM, ou pior ainda, substituindo o que a primeira função de execução do JavaScript estava fazendo. Como resolvemos esse problema? Bem, o navegador, novamente, é muito inteligente para garantir que você não tenha problemas com a execução de vários códigos JavaScript ao mesmo tempo, as dicas de tarefa foram introduzidas. Eu sei o que você está pensando, você está pensando que o desenvolvimento do cliente é difícil o suficiente. Agora, quando estamos falando de loops de eventos, temos termos como paralelo fora das filas de tarefas do lado do segmento principal, mas simplesmente não pára. Não se preocupe, não se preocupe. Sei que estive lá, mas realmente faz sentido intuitivo. Se você der um passo atrás, você tem esse tópico principal. Pode jogar tudo no fio principal ao mesmo tempo em que caem. Funções, tarefas precisam ser enfileiradas. Então, isso realmente faz sentido. Lembre-se, uma parte fundamental de como o loop de eventos funciona é o conceito de filas de tarefas. E como essas filas de tarefas funcionam? Bem, o que o navegador faz é dizer ao tubo do forno que ele tem algumas funções em queria fazer algo no fio principal. E seu navegador adicionará essa função à fila de tarefas quando essa função estiver pronta para ser executada. Basicamente, quando a função está pronta, ela é adicionada a essa tarefa. Você, está esperando. E somente quando há uma lacuna em vantagem, as pessoas devem ser colocadas de volta no tópico principal. Isso garante que as coisas sejam executadas de forma ordenada. Faz sentido porque, eventualmente, o loop de ventilação conseguiremos executar essas tarefas quando estiver pronto. Então vamos falar novamente sobre nossa função sit timeout porque sabemos que a função setTimeout é, na verdade, uma função assíncrona. Como isso parece na realidade? Bem, novamente, escreveríamos exatamente da mesma forma. Novamente, duas coisas estão acontecendo quando executamos essa função. Mas isso é o que realmente está acontecendo. Primeiro, temos um peso x milissegundos, mas isso está sendo executado em paralelo. Sabe o que isso significa? Não sendo executado no segmento principal. Qual é a segunda coisa que o navegador faz aqui? Ela enfileirará a tarefa quando o retorno de chamada estiver pronto. Depois de esperarmos uma certa quantidade de milissegundos, e esse retorno de chamada está pronto para ser executado. O navegador editará a tarefa. Obviamente, o loop de eventos invocará a função de retorno de chamada quando estiver pronta. Quando o loop de eventos estiver pronto. Só vou explodir sua mente um pouco mais. Isso está ficando muito avançado, ou talvez poderia ter parado aqui. Mas você precisa saber que todas elas são diferentes categorias de tarefas. Temos microtarefas e microtarefas. Acho que uma boa maneira de pensar nisso é que você tem tarefas importantes e não tarefas tão importantes. O que faz a macro tarefa? Faremos tarefas na fila de tarefas de macro, como a função sit timeout. Então você precisa esperar pela próxima rodada do loop de eventos antes de ser executado. Outra maneira de dizer isso é que as tarefas e a macro Q processaram um item de cada vez. No entanto, as tarefas na fila de micro serão executadas na rodada atual do evento. Outra nuance é que as tarefas da micro fila todo o processo até a conclusão, incluindo quaisquer itens, funções e o código adicional que você adiciona à fila em tempo real. E devido à grande importância nas microtarefas, isso significa que o loop de eventos bloqueará a renderização enquanto estiver executando microtarefas. Cliente, ok, cliente, eu entendo, eu entendo, mas onde o ajax se encaixa em tudo isso? Bem, sabemos que ajax lida com promessas. Promessas muito, muito importantes quando se trata de navegadores. Isso significa quando o código é eventualmente editado no thread principal a ser executado. Deixe-me dizer isso. Quando o navegador adiciona essas funções de retorno de chamada à fila de tarefas, ele trata essas funções como micro tarefas. Eu sei, eu sei. Provavelmente explodindo sua mente. Não se preocupe. Você não precisa saber estritamente sobre tudo isso para entender o ajax. Mas são conceitos muito, muito interessantes e avançados. É divertido. E eu quero que você seja um grande mestre. Nas próximas palestras, quero que agora vamos para o console e quero começar a ver como a veia para loop funciona. Eu queria escrever algum código com você e falar sobre minhas ideias sobre o que está acontecendo em segundo plano realmente vai levar o ponto para casa. E então, claro, vamos saltar para o que assíncrono e um peso realmente. Mal posso esperar. 3. Tarefas de macro vs Micro: Bem-vindo, bem-vindo, bem-vindo. Estou super animado. Espero que você dançe. Espero que você esteja se divertindo muito. Espero que você esteja aprendendo um tempo. E muito obrigado por ficar comigo. Nós realmente percorremos um longo caminho. E é claro que estamos entrando em tópicos de fazendas de vídeo agora. Temos discutido o ciclo de eventos, mas o que é melhor do que mostrar a você? Não sei nada, e é por isso que vou mostrar o loop de eventos em ação. Isso vai ser bem interessante. Estritamente falando, não preciso te mostrar isso, mas quero que você se torne uma codificação de grande mestre. Eu não quero apenas que você entenda o básico do Ajax. Quero que você entenda o que está acontecendo nos bastidores. Claro, vamos discutir assíncrono e aguardar. Mas, para entender o assíncrono aguardar, eu só quero pausar um pouco mais de conhecimento sobre o loop de eventos. Lembre-se de que uma das coisas importantes com o loop de eventos é o conceito de filas de tarefas. Funções, métodos, tarefas ou edição em uma fila de tarefas. E, claro, você obtém diferentes tipos de tarefas. Recebemos tarefas macro e recebemos microtarefas. Mas Clyde, já sabemos tudo isso. Eu sei que você sabe. Então, por que não brincamos em um editor de texto? Por que nos divertimos um pouco? Aqui vamos nós. um editor de código Visual Studio em branco aberto. Tenho um arquivo chamado test.js. É isso. Agora, eu poderia simplesmente abrir o terminal, poderíamos apenas registrar tudo na tela. Poderíamos executar nosso JavaScript no navegador. Existem muitas maneiras de fazer algo na programação. Vou te mostrar outro. Agora eu quero implementar o modo de depuração no código do Visual Studio. Então, vou clicar nessa guia. E eu vou clicar nisso, criar um arquivo JSON de ponto de lançamento. E vamos usar o Node.js para provar. Obviamente, o código do Visual Studio cria automaticamente esse arquivo JSON de parada de inicialização. Eu não quero que você se preocupe com tudo isso. Você não precisa saber como tudo funciona. Ou eu estou querendo chegar a esse console de depuração que é muito, muito útil. O que eu quero fazer? Bem, vamos apenas registrar algo na tela para começar. E eu não sei, vamos apenas console de log do console um. Como é isso? Mas o que há de bom conosco? Ambiente de depuração como você pode colocar pontos de interrupção em seu código, você pode entrar em seu código. Muito útil. Mas de qualquer forma, aqui vou apenas executar esse código. E em nosso console de depuração vemos os resultados. É console um. Isso é um regado a propósito, meu animal de empurrão favorito. Lá vamos nós. O que eu quero mostrar a você? Bem, deixe-me fazer essa pergunta. Em vez de resfriá-lo console, eu não sei, apenas esfrie. Eu não sabia síncrono porque sabemos que o log do console de função é executado de forma assíncrona. Se tivermos dois assim, certo? O que você acha que vai acontecer? Qual você acha que o resultado será em nosso console de depuração? Vamos escrever, sabemos que o medidor de ajuste JavaScript e Node é de um único segmento. Sabemos que a primeira linha executará síncrona. Um na parcela passará para a próxima linha e a rede será executada. Tudo bem, então vamos executá-lo. Conseguimos exatamente o que esperaríamos. Pensa-se ficar um pouco mais descolado. Vamos adicionar uma tarefa de macro. Permaneça tarefa macro. Por exemplo, o método setTimeout, tarefas de macro que conhecemos ou editamos, lançamos, enfileiramos e executamos o marrom misto da vinculina. Isso é o que é uma macro tarefa. E conhecemos o método setTimeout, que é assíncrono. É uma tarefa macro. Só vou usar atalhos. Por isso, é muito fácil de ler. E tudo o que eu quero fazer é que eu quero consolar o log. Não sei, digamos que os tempos limite. E podemos ter uma foto de uma girafa. E sabemos que o segundo argumento para a sexta função de tempo limite é quantos milissegundos queremos esperar. Bem, neste caso, digamos Sarah milissegundos. Exemplo muito simples. Agora eu quero que você pense qual será o resultado em nosso console. O que acontecerá se executarmos esse código? Vamos executá-lo. É praticamente o que tenho certeza que você estava esperando. O primeiro console, ele é executado no segmento principal. Agora chegamos ao método sit timeout que é adicionado à tarefa macro fofa, também conhecido como está sendo executado fora do thread principal. É claro que isso significa, mesmo que queiramos registrar os resultados desse tempo limite imediatamente, ele ainda está fora do thread principal. E enquanto ele reside temporariamente fora do thread principal, obtemos esse log do console, que novamente é executado no thread principal, e é por isso que o log do console síncrono acontece primeiro, log do console síncrono para acontecer em segundo lugar. E, finalmente, quase instantaneamente, digamos o método de tempo limite, edite de volta para o thread principal e, em seguida, ele é executado. Interessante. Mas agora, por que não lidamos com promessas? Lembre-se, ajax é tudo sobre promessas. E sabemos que essa promessa não é uma tarefa macro. Uma promessa é um watt. Isso mesmo. É uma microtarefa. E sabemos que eles são editados para a micro tarefa e eles são executados antes. Esta é a principal diferença entre microtarefas e as tarefas de macro são executadas antes do início da próxima. Por que não usamos o objeto promissor e executamos seu método de resolução? É claro que, na vida real, você teria um monte de código e, em seguida, executaria o método de resolução. Então, é claro, vamos executar nosso callback dentro de um reitor. Não precisamos de nenhum argumento, para que possamos apenas registrar algo de volta à tela. Neste caso, por que não pegamos nossa girafa? Em vez de chamar um tempo limite, podemos chamá-lo de promessa. O que você acha que vai acontecer agora? Isso está ficando um pouco mais complicado. Você precisa pensar sobre isso. Que ordem você esperaria ver as coisas? Eu esperaria ver um síncrono, que console.log o primeiro na linha um. Isso aconteceria instantaneamente. Agora, o que é interessante é que o setTimeout que conhecemos será editado para o jogo macro Q. O pulsante vai para a promessa. E quando atingir essa promessa, uma promessa em si estará no tópico principal. Mas quando os pulsos vêem o método lean que será executado fora do fio principal. Na verdade, ele será adicionado à microtarefa fofa. O possível então atingiu o console.log perdido. O síncrono para linha mostraria porque isso será executado imediatamente. Então eu esperaria que um síncrono, síncrono mostrasse primeiro, porque a declaração de promessa está no micro arremesso Q para esperar que a dívida seja emitida de volta para nós primeiro, a promessa de girafa, então finalmente, o tempo limite da girafa. Vamos ver se estou certo. Vamos apertar o botão Executar e vamos ver o que acontece. Exatamente o que esperaríamos. Super, super interessante. Você pode ver o quão divertido isso é? Você consegue ver o quão intuitivo tudo isso se torna? Certo? Isso é apenas um aquecimento. Quero que façamos uma pausa aqui. Na próxima palestra, quero que fiquemos mais avançados, não cortando isso. Quero começar a criar nossas próprias promessas. Eu conheço excitante. Eu quero usar um loop while para que possamos ver como ele bloqueia a execução ou ferimentos de outras funções. E vai ser super fascinante. Isso foi apenas um aquecimento. Vejo você na próxima palestra. 4. Como criar nossa própria promessa: Bem-vindo de volta. Espero que você esteja se divertindo muito. E como eu mencionei, isso fica mais complicado, então vamos excluir tudo. Cara, odeio excluir todo meu belo trabalho. De qualquer forma, vamos continuar. O que eu quero fazer é implementar carimbos de data/hora em todo o nosso código. Agora, só para mostrar como fazer algo novo. Para fazer isso, quero começar com o tempo agora mesmo antes de executarmos o código. É muito fácil de fazer em JavaScript. Você pode simplesmente excesso do objeto de data do JavaScript e executar o indicado. Muito simples. Em seguida, eu queria criar uma função que console registrasse algo na tela. Não quero escrever o tempo todo. Registro do console. Implemente isso em uma função. Então, por que não criamos uma função e a chamamos saída por falta de uma palavra melhor, porque é isso que uma saída. Vai ser preciso uma discussão. Digamos apenas por falta de uma palavra melhor, isso pode ser o que passamos para ela. E o que queremos que aconteça? Bem, como mencionei, quero implementar uma função de log de console. Simples. O que eu quero um registro de console? Vamos colocar isso em modelos literais que desejam console log. Em primeiro lugar, seja lá o que for que passamos para a função de saída, eu quero realmente console log que se leva. A próxima coisa que quero fazer é que eu quero implementar uma nova linha. Então eu quero mostrar quanto tempo levou para executar essa função. Quero o tempo decorrido. Em outras palavras, isso vai ser o quê? A propósito, os colchetes encaracolados do cifrão dentro joules de temperatura apenas significa que podemos referenciar variáveis e escrever JavaScript. É muito útil. Então, o que podemos fazer é conseguir o tempo agora mesmo depois que o código foi executado, que é ponto de data. Agora nós o revendemos. Podemos deduzir isso da variável bucal que definimos no início. Sabe, talvez seja melhor não chamar isso agora. Talvez eu deva chamar isso começa porque esse é o nosso horário de início, só para não confundir você. Espero que isso esteja fazendo sentido. Deixe-me apenas diminuir o zoom ainda um pouco para que você possa ver tudo em uma linha. Apenas encontramos a diferença entre a hora agora e a hora em que começamos a executar a função. Muito simples. Deixe-me ampliar um pouco. O que eu quero fazer a seguir. Bem, eu queria definir uma função de bloqueio. Vai ser uma função muito simples. Bem, eu quero fazer é que eu quero criar um loop. Então, vamos definir uma variável i começando em 0. E então vou usar a função while do JavaScript. Isso será executado o tempo todo, desde que o que é fornecido nesse parêntese seja verdadeiro. Vamos dizer que ele vai ser executado enquanto eu for menor do que, eu não sei, apenas um número muito grande. E então, em cada iteração ou eu quero fazer é aumentar a linha. Você pode ver que não estamos fazendo muito. Oee. E quando tudo estiver pronto, quando este loop enquanto terminar, o código seguirá para a próxima linha. E então podemos simplesmente devolver alguma coisa. O que eu quero retornar? Podemos simplesmente retornar texto. Podemos dizer feito o suficiente para colocar uma bela coruja bonita. Sim. Já tenho uma coruja no meu jardim, e quero construir uma caixa de coruja. Tão animado. De qualquer forma, acho que isso parece muito legal. Tudo pronto. Lá vamos nós. Esse é o nosso código de bloqueio. E agora fizemos, tudo o que vou fazer agora é executar essas funções e quero perguntar o que vai acontecer. Então, em primeiro lugar, vamos vê-lo. Nossa função de saída que definimos acima. Lembre-se que vamos pausá-lo de algum gosto. Que dicas queremos passar para ele? Bem, podemos passá-lo no gelo, vamos falar, e então podemos apenas olhar para um assíncrono, que foi o que fizemos antes, síncrono, o que eu quero fazer a seguir? Bem, eu quero executar nossa função de saída novamente, mas desta vez como um argumento. Lembre-se de que lhe damos um argumento x. Eu não quero passar texto simples. Bem, na verdade, eu faço. Mas eu quero passar em nossa função que acabará retornando. Vou aceitar dizer tudo isso. Para fazer isso, podemos passar a função, podemos executar esse bloqueio de função. Então, finalmente, você adivinhou. Eu quero fazer outro log de console síncrono, mas desta vez, é claro. Tudo bem. Deixe-me fazer essa pergunta. Em que você acha que o resultado desse código vai ser? O que será exibido para nós primeiro. Bem, eu esperaria que um síncrono mostrasse primeiro, isso mesmo. D nada. Bem, temos esse código de bloqueio e não é nada assíncrono nisso. Embora o loop em JavaScript seja muito simples, ele é executado no thread principal. Então, quando o analisador, quando o agente atingir essa função selvagem no thread principal, ele permanecerá no thread principal. E tudo o resto vai ter que esperar. Chato. Sei que isso é uma experiência ruim para o usuário. Então, finalmente, quando o loop estiver concluído, chegamos à ferramenta síncrona de saída final. Vamos ver se estou correto, isso é lança corredores. E olhe para isso. Síncrono uma vez decorrido foi de 0 milissegundos. Foi assim que foi rápido. Nós entramos neste loop while misto, Você sabe o que 80 milissegundos também é mas, mas água curta e adicione mais alguns zeros. Vamos executá-lo novamente. Só para torná-lo um pouco mais longo. Nós obtemos um síncrono e depois decorre e finalmente chegamos a síncrono. Dois muito interessantes, muito interessantes. Eu sei, eu sei. É por isso que eu queria te mostrar. Mas agora eu quero lhe fazer outra pergunta. Como impedimos que esse código de bloqueio aconteça? Como podemos detê-lo? Como podemos transformar isso em um código assíncrono? O que você acha? Lembre-se do que queremos fazer é criar um tópico separado. Eu quero sair desse segmento principal enquanto esse loop estiver em execução. E, claro, nós estamos trabalhando enquanto o loop está terminado. Quero adicionar essa instrução return à microtarefa. Bonito, é o que eu quero. Como fazemos isso? Você pode pensar, sim, podemos criar uma promessa. Você pode estar correto, dependendo de como você acha que você faz essa promessa. Deixe-me mostrar o que não vai funcionar. Então, vamos apenas comentar isso. Agora devemos chamá-lo de desbloqueio. Por falta de uma palavra melhor. Como poderíamos fazer isso? Bem, você pode pensar, vamos apenas retornar novas promessas. É executar o objeto de promessa do JavaScript. Sabemos que isso nos devolverá o objeto de resolução e um objeto de rejeição. Sabemos disso de palestras anteriores. Podemos executar nosso retorno de chamada dentro desses colchetes encaracolados. Você pode pensar que podemos implementar nosso loop while aqui. Eu é igual a 0. Implemente enquanto. Quantos zeros fazemos isso? Basta copiá-lo. Embora eu seja menos do que qualquer que seja esse grande número. Bem, queremos fazer é aumentar eu em um. Quando terminar. Não queremos devolver nada. O que queremos fazer é chamar o método de resultado e resolver o método. Claro, podemos apenas ter esse ditado aguente. Certo. Você está comigo? Desculpe, falso. Então, tentamos, na verdade, excluir isso. Tentamos converter o código de bloqueio desbloqueio implementando uma promessa. Sabe o que eles significam? Livre-se da capital novamente, meu TOC, não uma função de construtor. Então deixe-me fazer um u. você pode pensar que implementamos em nossa promessa. Essa promessa acontece fora do tópico principal e, portanto, tudo acontece como esperaríamos que seja desbloqueado. Agora, você pode pensar que um síncrono será exibido primeiro. Então, como o código de desbloqueio está fora do thread principal, devemos ver dois síncronos. E finalmente, quando terminar, devemos ver o resultado. Tudo pronto. Que isso não vai acontecer, não é? Se eu estiver pensando corretamente, vamos iniciar este programa. Vamos ver o que isso aconteceu. Lá vamos nós. Então você viu que, na verdade, mesmo que estejamos tentando executar uma promessa, ainda está bloqueando a execução de nossa próxima saída síncrona. É por isso que só chegamos a dois síncronos em 143 milissegundos. Um tão estranho, Clyde, estou tão confuso, pensei porque envolvemos isso em uma promessa, isso significa que vamos executar todo esse código fora do tópico principal. Pode ficar muito confuso. Mas agora há algo muito avançado que eu queria compartilhar com você. Você está pronto para isso? Então, vai explodir sua mente. Apenas permaneça apenas a criação real da promessa em si e a execução do loop while, o que está acontecendo na criação dessa promessa que ainda está acontecendo no tópico principal. Aqui está a coisa. As promessas em si são apenas ferramentas de monitoramento. Eles não são realmente assíncronos. O peso é assíncrono, se encaixa quando se trata de promessa. Ele se encaixa. Quando executamos as instruções da veia. Quando o motor vê uma declaração em dinamarquês, ele tira o que está dentro da declaração do tema da tarefa principal do tópico principal. E somente quando o resultado líquido estiver pronto, ele adicionado à micro tarefa. Em outras palavras, é apenas a resolução da promessa em uma declaração de veia que acontece fora do fio principal como uma microtarefa. Muito, muito fascinante. É por isso que a primeira linha de log do console síncrono é executada imediatamente. Que esse segundo log síncrono seja executado somente fora do loop while é feito porque a criação dessa promessa ainda está bloqueando o thread principal. Sinto muito, eu não queria continuar me repetindo, mas este é um conceito tão importante para você entender e vai ajudá-lo. Então deixe-me perguntar isso. Como é que, então, nenhum trocadilho pretendido. Como resolvemos esse problema? Como garantimos que o loop while esteja acontecendo fora do segmento principal? Bem, é claro que queremos executar o método de resolução e, em seguida, colocar tudo dentro da instrução 18. Nem precisamos dessa propriedade de rejeição porque nunca a usamos. Na verdade, posso excluir essa coisa toda. Podemos executar imediatamente o método de resolução nessa promessa. Sabemos que é executado, o motor procurará a declaração da veia. E é aqui que nosso código pode mentir. Eles podem realmente colocar um TIA. Não precisamos de nenhum argumento. Ele deve funcionar. Acho que temos suportes suficientes, eles devem funcionar. Agora, o loop while está dentro de uma instrução Dane. Devemos esperar que isso agora aconteça fora do tópico principal. Agora é executar esse código chamado type area promise resolve não é um construtor. Claro, não só a nova palavra-chave. Muito útil ter mensagens de erro lá. Tudo bem, vamos agora. E lá vamos nós. É uma mão estranha. Vamos ver aqui que recebemos outro erro de referência. Resolver não está definido. Claro que estou chamando o método de resolução aqui. Na verdade, eu só quero devolver isso porque nós dentro vein statement drive, eles vão cidade. Claro que nem preciso de suportes. É simplesmente inútil. Vamos tentar isso novamente. Desculpe, terceira vez, sorte, vamos. Isso é um aviso que não estamos recebendo nossa declaração antiga. Por quê? Isso? Interessante novamente, lembre-se do que estamos fazendo aqui. Criamos uma promessa e essa promessa retorna alguma coisa. No final do dia, ele retornará uma string dizendo tudo feito. O problema que estamos tendo é nunca acessamos esse retorno. Lembre-se do que uma promessa espera? Ele espera nos dar o resultado. E então podemos sair que resulta em declarações de reitor. Então, na verdade, temos que chamar que estou bloqueando a função. E então, quando temos aquela filha, fomos executar algum tipo de função. A função que queremos executar aqui é essa função de saída. Podemos executar essa função de saída. Isso deve funcionar. É uma maneira rápida e suja, mas deve funcionar. Saída. Vamos ver se isso funciona. Agora vamos executar nosso código. Fizemos isso, fizemos tempo falso, sorte. Desculpe por isso, mas chegamos lá no final. Apenas lembre-se do que fizemos. Estou tentando mostrar que uma promessa, a criação real de uma promessa é feita no tópico principal. É somente quando começamos a acertar essas instruções de links, também conhecido como quando o método resolve é chamado. Então, saímos do fio principal? E é aí que a magia assíncrona acontece. Eu só queria deixar isso claro. É por isso que aqui recebemos um síncrono que nos foi dado primeiro, recebemos dois vetores síncronos em seguida. Então, finalmente, recebemos essa declaração de retorno de tudo feito. A propósito, você pode estar pensando, por que acabei de colocar as saídas do nome da função? Não preciso passar em uma variável x. É praticamente fazer isso nos bastidores. Eu poderia ter sido, se for bem de argumentos, poderíamos ter tomado os dados. Nesse caso, será apenas a filha do texto terminada. E então podemos escrevê-lo após a maneira usual que costumávamos neste curso. E então, é claro, execute essa função de saída e passamos esses dados. Então poderíamos ter escrito um Titus. Acabei de fazer um atalho. Se executarmos este programa novamente, isso deve nos dar exatamente a mesma coisa que ele faz. Eu sei, eu sei que isso é muito avançado, bem feito para ficar comigo. E você não precisa saber estritamente isso para trabalhar com assíncrono e aguardar. Na verdade, você nem precisa saber disso ao trabalhar com o Ajax. Mas eu quero que você seja melhor do que a corrida. Espero que você tenha se divertido muito e espero que isso seja apenas ******** um pouco mais de luz sobre como o Vancouver funciona e como o código assíncrono funciona. Na realidade, eles não são duas principais ameaças que não funcionam dessa forma quando se trata de JavaScript. Mas na laca x faz. Se eu pudesse tirar as coisas da tarefa principal, você as coloca de volta. É muito interessante que o suficiente do ciclo de eventos agora, acho que você tem conhecimento suficiente de alto nível sobre isso. Na próxima palestra, eu realmente quero começar a falar sobre assíncrono e aguardar. Queremos melhorar nosso corpo docente da Fetch API. Mal posso esperar para vê-lo na próxima palestra. 5. Introdução ao Async: Finalmente, estamos no tópico assíncrono e aguardamos. O que exatamente é isso? Bem, em primeiro lugar, podemos adicionar assíncrono e aguardar. Essas são apenas palavras-chave fornecidas por JavaScript para reduzir nossas declarações. Lembre-se quando estamos lidando com chamadas de peixe, com lidar com promessas. E toda vez que uma promessa resolver, a primeira coisa será executada dentro dessa declaração. Você precisa de promessa retornada, então procurará a próxima declaração do reitor. Então, na realidade, como vimos, você pode ter várias cadeias de palhetas. Isso pode ficar bastante confuso. Confie em mim, especialmente se você tem um código muito complexo e você colocou muitas promessas sendo resolvidas. Uma solução alternativa é usar assíncrono e aguardar que nos permita escrever código de forma síncrona. Mesmo que todas essas promessas estejam acontecendo em segundo plano. Não se preocupe se você não sabe o que quero dizer, vou te mostrar em breve. O ponto que estou tentando fazer é que usar assíncrono e aguardar funciona muito bem com o Ajax porque você usa assíncrono e aguarda quando trabalha com promessas. E é claro que sabemos que a Fitch usa promessas antes de falarmos sobre aguardar. Lembre-se das duas palavras-chave ainda, assíncrono e um peso. Quero falar sobre assíncrono, não em sincronia, não uma pia. Adoro piadas do meu pai. Quero falar sobre assíncrono e colocar a palavra async antes da função. Significa uma coisa simples. Não se perca em todos os detalhes. Só significa uma coisa. O que faz, o que ele nos diz? O que ele está fazendo? Está dizendo à função para nos devolver uma promessa. Que estranho, mas não há nada melhor do que mostrar a você com um exemplo ao vivo. Vamos pular para o Editor de Texto agora. 6. Async retorna uma Promessa: Se você conhece o drill, Isso é criar um novo arquivo. Vamos chamá-lo por falta de uma palavra melhor, mensagens ab.js. Porque vou criar uma função chamada mensagem. É por isso que vamos criar uma função chamada mensagem. Para fazer isso em JavaScript, apenas usamos a palavra-chave function. Podemos chamá-lo de tudo o que quisermos. Eu liguei para mensagem. Então, dentro desses colchetes encaracolados, definimos o que queremos que aconteça. Sim, eu só quero devolver a palavra Olá. Isso é tudo que eu quero que aconteça. Sim, eu poderia executar isso no navegador. Então podemos ver os resultados. Por que não uso coca? Ithaca nos permite executar JavaScript em tempo real neste editor de texto, é muito, muito útil. É grátis a propósito, minha voz amava Mahila. Tudo bem, o que eu quero fazer, vamos registrar essa função no console. Sim, esperamos que o resultado fosse olá, que é o que você vê na tela. Isso faz sentido intuitivo. Mas lembre-se do que eu disse na palestra. assíncrono pode ser usado antes de qualquer função. Isso é muito legal. Então, o que editamos na frente da nossa função? Lembra do que eu disse? Usar assíncrono significa uma coisa. Em vez de função retornará uma promessa. Então, vamos testá-lo. Vamos colocar assíncrono na frente da nossa função. Agora, quando executamos essa função, não recebemos esse texto Olá, recebemos uma promessa. Isso não é interessante? Isso é tudo o que ele faz. Essa palavra-chave assíncrona retorna uma promessa, mas Clyde, não podemos simplesmente retornar explicitamente uma promessa? Podemos, em vez de retornar Olá, não podemos simplesmente devolver um preço? O que eles fazem? Isso nos dá exatamente a mesma coisa que nos dá uma promessa, claro que desta vez Isso não vai resolver a palavra Olá. Não temos isso no animal deles. E então o que poderíamos fazer é executar o método de resultados. E aqui podemos digitar a palavra olá. É exatamente o mesmo que fazemos isso colocando assíncrono, então podemos nos livrar do assíncrono. Vamos estar recebendo exatamente a mesma coisa. Então, em vez de escrever esse grande nome de mentira, podemos colocar a palavra assíncrona. E é claro que agora não precisamos de resultados promissores. Podemos simplesmente devolver o que quisermos retornado da promessa. Isso faz sentido? Você está comigo? Desculpe, caia. Isso é tudo na palavra assíncrona faz. assíncrono garante que a função retorne uma promessa. Simples o suficiente, não só faz isso. Há outra palavra-chave que estou deixando de fora. E isso é uma espera. Esperar só funciona dentro de funções com a palavra-chave assíncrona. Algum trovão lá fora, está chovendo, está chovendo. Mas precisávamos. Não chovemos há alguns dias. De qualquer forma, onde estava. Sim. Discutimos apenas assíncrono que retorna uma promessa. Mas na próxima palestra, quero começar a mostrar a você sobre a palavra-chave await. Mal posso esperar para te mostrar. 7. Introdução à palavra-chave do Await: Hall, todas as coisas boas chegam ao fim e um pouco tristes porque sei que nos aproximamos do final deste curso. Mas não se preocupe, ainda não terminamos . Ainda não terminamos. E estou sempre chegando com novos cursos. Então, espero que não tenhamos sido caminhos aqui para sempre. Mas de qualquer forma, estamos falando de assíncrono e aguardamos. Analisamos o que a palavra-chave assíncrona faz. Você se lembra? Isso mesmo. assíncrono garante que a função retorne uma promessa. Poderíamos fazer isso manualmente, mas é complicado. Então, assíncrono é apenas uma boa maneira útil dizermos à função para nos devolver uma promessa. Sabemos disso. Mas agora eu quero falar sobre aguardar. A primeira coisa é que só funciona dentro de funções assíncronas se você tentar usar a palavra aguardar em uma função aleatória em algum código, só não vai funcionar. Você tem que usá-lo dentro de uma promessa, dentro de uma função com a palavra-chave assíncrona. Aguarde, não, eu acho que a palavra real em si a dá. Isso faz com que o JavaScript espere até que sua promessa se estabeleça e retorne Muito, muito intuitivo. Dê um passo para trás, no entanto. Não se perca em todos os detalhes. O objetivo do assíncrono e aguardar é simplificar a sintaxe necessária para consumir APIs baseadas em promessas. Você não precisa usar async await quando fizer uma chamada Fitch ajax, você poderia apenas fazer testes futuros simples com todas essas declarações então e capturar todas as áreas no bloco catch. Está perfeitamente bom. No entanto, às vezes pode ficar confuso, às vezes fica confuso. E naqueles casos em que seu código começa a ficar um pouco confuso, muitas vezes, você quer recorrer ao uso assíncrono e aguardar. É muito mais fácil de ler. É muito mais fácil de seguir. A maneira como eu penso nisso é que eu tomo uma função assíncrona. Dentro dessa função assíncrona, você pode pensar nela como sendo dividida por 0 ou mais expressões de peso. E seu código dentro dessa função até e incluindo a primeira expressão de espera é executado de forma síncrona. Sabemos que a execução síncrona acontece automaticamente por padrão em JavaScript. E é somente se e quando houver uma expressão de espera dentro de sua função. O navegador sabe executar esse código de forma assíncrona, também conhecido como fora do thread principal. É muito, muito interessante, muito intuitivo. Mas conversa suficiente, teoria suficiente. Vamos pular para a próxima palestra. Vamos parar por aqui. E mostrarei um exemplo de uso assíncrono e usando uma espera. Mal posso esperar para ver, sabe. 8. Exemplo de uso de Async: As ações falam mais alto que as palavras, é por isso que, você sabe, eu amo meus exemplos. Então, vamos agora usar assíncrono e aguardar, e eu mostrarei como isso funciona. É muito, muito interessante. Eu queria encontrar uma função chamada mensagem. Então eu quero executar muitas coisas aqui dentro. Notamos que o que quero fazer é que eu quero eventualmente obter o resultado do hello world. Eventualmente, tente chegar a esse resultado apenas um texto dado a nós pelo console, mas eu quero fazê-lo usando duas funções assíncronas. Vamos dividir cada palavra. Vamos primeiro lidar com a primeira palavra, colocá-la em uma variável chamada primeira palavra. E eu quero agora usar promessas. Normalmente não podemos fazer isso, criar uma promessa e, claro, sabemos que isso nos dá determinação e rejeição. Não estamos realmente usando a propriedade reject que, de qualquer forma, ela está lá. Se quiséssemos, agora podemos usar o método setTimeout apenas para falsificar uma chamada de API. Vamos apenas criar tempo, um intervalo de tempo. É claro que, dentro daqui, quero resolver a palavra olá porque esta é a primeira palavra que queremos, e eu quero que isso leve 1 segundo. Não podemos fazer isso. Porque por quê? Isso mesmo? Porque estamos implementando uma promessa. Os resultados não estarão disponíveis na primeira palavra da variável. Então isso não funcionará. Para que isso funcione. Queremos transformar toda essa função em uma função assíncrona. Fazemos isso usando a palavra-chave assíncrona na frente. Agora sabemos que essa função nos devolverá uma promessa. Mas, novamente, a linha quatro ainda não funcionará. Vamos receber um erro. Você não acredita em mim. Deixe-me mostrar a você. Deixe-me mostrar a você. No final, queremos consolar o log. Não sei, vamos usar literais temporários. Podemos dizer que acabou. E é claro que aqui temos a primeira palavra. Isso não vai funcionar. Agora ele executa nossa função chamada mensagem. Não obtemos os resultados que esperaríamos. Na verdade, vamos para o navegador. Lá vamos nós. Vamos colar nosso código que executou a função de mensagem. Lá vamos nós. Ficamos indefinidos. Estamos recebendo erros aqui. Isso é um problema. Não queremos isso, só queremos a mensagem simples, olá. Não vai funcionar porque esta primeira palavra, variável de propriedade, ainda não está disponível para esperar até que a promessa seja resolvida e eles entraram nessa variável de primeira palavra. Usamos a palavra-chave await. É assim que é fácil trabalhar com assíncrono e aguardar. Bem, essa é a primeira palavra. Antes de seguir em frente, vamos criar uma segunda palavra. Primeira palavra. Sim, podemos chamá-lo de segunda palavra. E sabemos que a segunda palavra é enganada. Aqui vamos nós. Então, quando consolamos o log e terminamos, podemos dizer a primeira palavra. É claro que podemos ter resolvedores, não a multa, é claro que resultados não definidos. E eu chamei de RES. Sabe o que devo mudar? Posso fazer esse resultado ou mudar em matrizes, mas vamos apenas resolver isso. Lá vamos nós. Agora, é claro, quando executamos esta função de mensagem, tudo deve correr de acordo com o planejado. O coocorre nos diz que recebemos o console registrado, concluído. Olá, mundo. Mas meus queridos alunos, quero que vocês entendam o porquê. Deixe-me apenas diminuir o zoom. Deixe-me rolar para cima. Este é todo o nosso bloco de código. Deixe-me explicar o que acontece aqui. E isso vai ser muito técnico, mas é muito, muito importante para você entender esse exemplo. Esperávamos promessas. O que vai acontecer. Bem, ok, vamos falar sobre o código que é executado. Sabemos que o progresso se move através dessa função de mensagem em três estágios. Fase um, a primeira linha do corpo da função será executada de forma síncrona. Esse é o comportamento padrão do JavaScript. Isso significa que vamos acertar a linha para, esta é a primeira coisa que será executada. Mas agora, quando o analisador atinge que aguarda palavra-chave, o navegador sabe que há uma promessa de pintura. Ele precisa esperar pelo que vai acontecer. Bem, o resultado é que o progresso da nossa função de mensagem será pausado e o controle será entregue de volta ao ambiente que chamou a função de mensagem. Nesse caso, vou misturar cada função é chamada no escopo da janela e nada mais está acontecendo nas principais ameaças e nada mais vai acontecer. Mas isso é o que está acontecendo nos bastidores. Prepare-se para algum momento depois, quando a primeira promessa foi para dobra ou rejeitada. O controle voltará para esta mensagem. Função, o resultado da primeira promessa, ouça a palavra olá. Vai ser devolvido da expressão aguardada. Aqui. A palavra hello é atribuída à variável chamada primeira palavra. Isso é feito. O progresso continuará. O passado agora verá a segunda palavra-chave aguardar. Novamente, o navegador sabe que há uma promessa pendente que precisa esperar e progredir. E quantas dessas funções agora serão pausadas novamente. E o controle será rendido de volta ao meio ambiente. Essa mensagem fria. Acabamos de repetir o processo aqui. Por último, mas não menos importante, o estágio três, algum momento depois, quando as segundas promessas foram cumpridas ou rejeitadas, o controle reentrará nesta função de mensagem. É claro que o resultado da segunda resolução da promessa é o retorno da segunda expressão aguarda. Em nosso exemplo, o mundo da palavra é atribuído a uma variável que definimos como segunda palavra. Mas agora é a principal diferença porque agora não temos outra palavra-chave esperada. O controle passará por essa função de mensagem, eventualmente atingindo uma expressão de retorno. Aqui estamos apenas o console registrando algo na tela. Você tem isso? Disse que isso é muito avançado. Espero que você esteja entendendo, espero que eu esteja explicando até que você realmente seja bastante intuitivo, uma vez que você entenda como funciona. Mas antes de terminar esta palestra, deixe-me fazer mais uma pergunta. Lembre-se que eu disse que quando palavra-chave debt aguarda for atingida pelo analisador, eu disse que o controle será rendido de volta ao ambiente que chamou, que faz com que a TI funcione em primeiro lugar. Lembre-se que eu disse isso e ele tem os ambientes das janelas e nada mais acontece. Mas o que eu quero dizer? E se não for o objeto de janela que chamou essa função de mensagem? E se fosse outra função? Sei que está ficando um pouco complicado, mas deixe-me mostrar o que quero dizer. Vamos descer aqui. Isso não é executar essa função agora vamos apenas comentá-la. Digamos que tenhamos outra função. E esta função, vamos chamar execute por falta de uma palavra melhor. E dentro dessa função, queremos executar esta função de mensagem. E queremos que um log do console seja o primeiro para o console. momento eu não executei essa função, acabamos de defini-la, mas o que você acha que vai acontecer agora, com base no que eu disse há alguns momentos, para ilustrar a rua em uma cópia barata essas duas funções, navegador, console. O que vai acontecer quando eu executo esta função. Vamos tentar. Quão incrível é sermos executados? Sou o primeiro, primeiro. E somente quando todos esses tempos limite definidos tiverem resolvido que concluímos a palavra, Hello World retornou para nós. Ou apenas alunos, quão incrível é isso? O que é realmente legal com isso, porém, é que você está entendendo o que acontece nos bastidores. Porque quando o analisador atinge a palavra-chave aguarda pela primeira vez, isso irá renderizar o controle dessa função de mensagem para o ambiente, depois chamá-la, e essa é a função de execução. E continuará a executar o código de forma síncrona. Sabemos que enquanto ele está pausado e enquanto isso promete resolver, sabemos que esse log do console primeiro será dado a nós antes de toda a função de mensagem ser executada. A razão pela qual eu tive que ir ao navegador a propósito, é claro, se eu executar essa função agora, por que não está mostrando nada? Coca-cola e mostre-nos a ordem em que as coisas são feitas. Então podemos ver aqui que temos, eu sou o primeiro n, terminamos. Olá, mundo. Não podemos ver a ordem de quando isso aconteceu. É por isso que eu queria mostrar a vocês aqui como funciona. Deixe-me mostrar-lhe novamente, você pode realmente ver o tempo necessário para executar esses tempos limite também. É fascinante. Então, vamos definir nossas funções. Vamos executá-lo. Chegamos imediatamente, primeiro temos que esperar dois segundos e depois terminamos isso. Fascinante. Quero parar por aqui. Quero fazer uma pausa. Na próxima palestra, vou mostrar outro exemplo rápido e nomeado finalmente, quero que usemos o que aprendemos. Quero que usemos a palavra-chave async and await para melhorar o código que fizemos anteriormente em outros exemplos. Mal posso esperar e te vejo na próxima palestra. Certo. 9. Segundo exemplo de uso de Async/Await: Sabe, eu amo meus exemplos porque eu realmente acho que exemplos levam o ponto para casa. Eu só quero que você se acostume muito com o conceito de vento que aguarda palavra-chave é atingido pelo pasa. O progresso de toda a execução em JavaScript é reduzido nessa função e o controle é dado ao ambiente que, naturalmente, executou essa função. Eu só quero que você se acostume com esse conceito. Então, por que não criamos uma função assíncrona para que saibamos que ela retornará uma promessa. Usamos a palavra-chave function em JavaScript. Vamos chamá-lo de foo. Isso é apenas uma convenção simulada. Não sei por que usamos comida o tempo todo. É apenas uma função inventada. É apenas um nome de função. Poderíamos ter chamado de tudo o que quisermos. Eu quero agora definir uma promessa e ela instanciar a função de construtor prometida. Sabemos que temos x's para resolver e rejeitar em nossa função de construtor. Claro, o que queremos que aconteça aqui? Basta obter todos os colchetes e tudo isso ordenado. Estamos prontos para executar. Tudo o que quero fazer é implementar o método setTimeout. Eu realmente não quero que nada aconteça além de resolver essa promessa. E podemos resolver a palavra olá. Como é isso? Muito simples em cem, dezentos milissegundos. Aqui vamos nós está toda a função assíncrona muito simples chamada foo. A próxima coisa que eu queria fazer, não queria executar isso agora . Sabe o que vou fazer? Vamos realmente escrever isso em nosso estado no F, mais fácil ver o que está acontecendo. Claro, a menos que iniba o capital N para novo. Lá vamos nós. Agora vou editor de texto, pelo menos está nos dizendo que tudo é uma sintaxe K. é muito importante quando se trata de codificação. Obviamente, seu computador só entende 1 e nada, também conhecido como impulsos elétricos. É lixo entrado, lixo de forma eficaz, se eu cometer algum erro, se eu não fizer isso, se eu chamar essa promessa de promessa, o mecanismo JavaScript não vai entender o que isso é, vai ser. Lixo. Então, de qualquer forma, é por isso que a nova palavra-chave é muito específica. E JavaScripts, tenho que usar mu minúsculas. Esse foi meu erro. De qualquer forma, ainda estamos dentro desta função foo. Implementamos uma promessa. A promessa será resolvida com a palavra olá em 1 segundo. Agora, isso é o que eu quero mostrar até este ponto, não usamos a palavra-chave weight. O que eu quero fazer é definir uma variável de mensagem. E vamos aguardar essa promessa. Para entender o que é que estou tentando fazer. Vou esperar até que a promessa acima resolva com a palavra olá. Isso é o que vou fazer. E então vou colocá-lo em uma variável chamada mensagem. Interessante. Então, claro, o que eu quero fazer é querer alertar a mensagem para o navegador. Eu quero que esse pequeno pop-up apareça e quero que vejamos a palavra olá. Vamos para o navegador. É claro, tudo é definir nossa função. Lá vamos nós, nós o definimos. Deixe-me ampliar um pouco dadas nossas conversas que temos tido. Dado o exemplo que mostrei na palestra anterior. Quero que pense logicamente o que acontece aqui. Bem, em primeiro lugar, vamos executar esta função para que você possa ver o que acontece. Nós o executamos. Resolver não está definido. Vamos limpar isso. Eu liguei para ele. Vamos levantar. Aqui vamos nós. E vamos chamar a função novamente. Lá vamos nós. E recebemos o alerta dizendo olá. Isso, claro, aconteceu depois 1 segundo, como esperaríamos. Lá vamos nós. Isso faz sentido. Mas você entende a lógica agora? Deixe-me explicar o nível de lógica. Você provavelmente já sabe, mas deixe-me dirigir o ponto para casa. Vejamos nosso código. A execução da função vai puxar qual linha? Bem, ele vai pausar quando atingir a palavra-chave aguarda. Vai fazer uma pausa online no comeu. Sabemos qualquer ambiente chamado essa função foo, que a dor continuará sendo executada de forma síncrona. Quando a promessa eventualmente retornar um resultado, o controle será devolvido a essa função foo. É claro que, então, executamos essa mensagem de alerta, faz sentido. Isso é o que eu quero enfatizar. Usar a palavra aguardar literalmente suspende a execução da função e disse que a promessa se resolve. Em seguida, será retomado com o resultado da promessa. Isso não custa nenhum recurso de CPU porque o mecanismo JavaScript pode fazer outros trabalhos. Enquanto isso, ele pode executar outras funções ou os scripts que lidam com beans, etc, etc. É muito, muito poderoso. Mas, de qualquer forma, acho que você tem um entendimento de alto nível o suficiente para começar a se aprofundar no assíncrono e aguardar. Antes de terminarmos esta seção, nesta aula, quero que você use o que aprendemos de forma prática. Na próxima palestra, quero chamar algum código que analisamos anteriormente. E eu quero que você tente converter esse código ou melhore o código deles usando assíncrono e aguarde. Mal posso esperar e te vejo em breve. 10. Introdução ao desafio — como melhorar o código de Fetch de curso anterior: Bem-vindo, bem-vindo, bem-vindo. Se você se divertindo muito. Agora, tudo bem, aqui estamos nós. Este é o código de algumas seções, classes, Beck e você sabe, a gaveta que tínhamos essa API Fitch que fez chamadas para fazer sites diferentes. A primeira solicitação de recurso foi substituir essa batida pelo nosso endereço IP. O meu não está funcionando no momento porque estou no Zimbábue, na África. E ei, às vezes, não temos poder. Agora mesmo. Não tenho energia, nem eletricidade. E isso significa, claro, sem roteador e Wi-Fi. Então eu não posso provar esse código agora com você. Mas o que posso fazer é melhorar nosso código, podemos refatorá-lo. Na segunda face do seu questionário, fizemos o restante para o nosso próprio servidor, mostrando uma imagem, clique no botão e mostramos o Ajax. Se formos ao nosso código, podemos ver aqui na parte inferior do arquivo, esta é a nossa busca de recursos para Fitch essas imagens. E há muitas declarações temáticas. É uma declaração de captura. Eu quero que você pense em como podemos mudar isso, como podemos melhorar esse código usando assíncrono e aguardar, dar uma chance você mesmo. Vamos parar a palestra aqui. E na próxima palestra, deixe-me codificá-lo com seu canal e eu te vejo em breve. 11. Solução de desafio — como buscar nossa imagem usando async/await: Você deu uma chance? Espero que sim. Espero que sim porque essa é a coisa mais importante. Nem importa se você não acertou. O mais importante é que você deu uma chance. Deixe-me fazer isso de forma fragmentada para que você entenda o que está acontecendo. Você deve ter pensado, Ei, nós sabemos que Fetch retorna uma promessa. Lidamos com promessas para que possamos lidar com assíncrono e aguardar. Mas mesmo antes disso, você pode pensar, ei, vamos colocar isso em uma variável chamada resposta. E podemos executar essa função de busca. Sabe o quê? Deixe-me apenas, deixe-me apenas comentar todo o resto aqui. Vamos burro confusos. Você pode ter pensado , ok, vamos pegar nossa resposta. Sabemos que respostas fluxo legível você pode ter se sentido bem, bem, vamos tentar extrair os dados tomando essa resposta e executando o método blob nela. Porque sabemos que estamos lidando com uma imagem. São dados binários, não são JSON. Então, é claro, deixe-me realmente copiar as próximas linhas de código abaixo aqui. Você pode ter sido salvo. Vamos definir um URL de imagem usando a interface de URL e passando esse objeto de dados. Talvez tenha tentado fazer isso. Então, é claro, pegando os elementos de origem da imagem e atribuindo-os a essa URL da imagem. Obviamente, a etapa final é consolar sucesso do registro na tela. Isso vai funcionar? Bem, vamos testá-lo e vamos ao nosso navegador. Claro, agora, quando clico no botão, ele não está funcionando. Que mensagens de erro que estamos recebendo. Estamos recebendo uma resposta de erro de tipo. Blob não é uma função. Você entende por quê? Por que estamos recebendo esse erro de tipo? Bem, se voltarmos ao nosso código, lembre-se, a razão pela qual estamos recebendo essa era é que, embora saibamos o objeto de resposta tem o método blob, no momento em que o navegador chega à próxima linha de código sendo online 97 e alcanos, o objeto de resposta, essa variável. Ainda não voltou do carvão fago. Lembre-se de que a chamada Fitch está sendo feita em outro segmento, além de três, que está sendo feita em paralelo ao thread principal. É por isso que estamos recebendo um erro. Ok, o cliente vai querer ou não, então basta adicionar a palavra aguardar na frente do Fitch e aguardar na frente do método blob, certo? Esses são os únicos dois que retornam uma promessa, então não precisamos esperar em nenhum outro lugar. Isso funcionará? Bem, isso também não funcionará. Vamos ao navegador, atualize tudo. Marque o botão. Não está funcionando. Não vai funcionar. Por que isso não vai funcionar? Isso mesmo. Porque você precisa usar aguardar dentro de uma função sinc. Então só temos que expandir nosso código um pouco mais. Mas você verá que vale a pena porque se torna muito fácil de ler. Lembre-se, precisamos da palavra-chave assíncrona e, em seguida, precisamos definir uma função. Vamos apenas dizer que se chama imagem Fitch e tudo reside dentro desses colchetes encaracolados. Aqui vamos nós, começando a fazer sentido. Agora, definimos uma função. Colocamos o dia da palavra-chave assíncrona, estamos usando um peso. Podemos lê-lo de forma síncrona. E é claro que, na verdade, temos que implementar ou executar essa função, certo? Caso contrário, nada acontecerá. Lá vai você. É assim que usamos assíncrono e aguardamos. Isso vai funcionar? O que você acha? Vamos para o navegador. Clique na imagem. Uau, isso é muito, muito legal, não é? Não se perca em todos os detalhes. É uma montagem muito simples de ler. Não vou passar pela lógica em detalhes porque você já sabe como isso funciona. Mas lembre-se em nosso código original, se você rolar para baixo aqui, nós implementamos algumas outras funções, verificamos o status e convertemos em blob. Bem aqui. Nós ignoramos essas coisas que não são boas. Queremos verificar o status e queremos colocar nossa lógica em outro lugar. Se rolarmos para cima, temos a seção chamada funções universais. Definimos certas funções. Definimos uma função chamada check status. Mas o que é interessante nisso? Isso mesmo. Ele retorna uma promessa. Interessante. E eu funcionarei convertidos em blob também retorna uma promessa porque sabemos que o método blob retorna uma promessa. Então, por que melhoramos esse código um pouco? Acho que a primeira linha está boa. A resposta é o que recebemos de volta do nosso carvão adequado. Então só queremos lidar com uma boa resposta. Uma resposta. Não quero executar nossa função blob. O que eu quero fazer é implementar nossa função de status de verificação e passamos nosso objeto de resposta. Sabemos disso. Assim que tivermos essa boa resposta, a próxima dica é convertê-la em um blob. Então, por que não chamamos isso em dados de blob por falta de uma palavra melhor. E sim, podemos executar nossa função Convert to blob. Isso levará nossos bons dados de resposta. Lá vamos nós. Literalmente, fizemos o trabalho. Se formos ao navegador, tudo, clique na imagem. Era de referência, a filha não está definida. O que eu fiz de errado? Os dados aqui devem ser blogados no curso filha. Vamos voltar ao nosso navegador. Clique em Mostrar imagem. Quão incrível é isso? Quão incrível é isso? Estou muito, muito feliz com isso. Meus queridos alunos, Quão legal foi isso? Agora quero que façamos uma pausa na palestra aqui. Isso vai parar a palestra aqui. Quero que você tente fazer exatamente a mesma coisa, melhore o código. Mas se eu rolar para cima, quero que você faça o mesmo para buscar o endereço IP. Aqui está, o carvão Fitch para obter nosso endereço IP. Pare a palestra aqui, tente converter isso você mesmo. E depois mostrarei como fiz isso na próxima palestra. 12. Solução de desafio — como obter nosso endereço IP usando async/await: Você deu uma chance? Espero que sim. Espero que sim. E ainda não tenho Internet aqui termina e não temos poder. Então eu não posso provar, mas vou escrever com você. Se não estiver correto, por favor me avise nas perguntas e respostas e eu vou corrigi-lo, mas espero que a lógica prevaleça e faça sentido. Então, como convertemos isso? Como corrigimos isso? Bem, em primeiro lugar, vamos nos livrar desse bloco inteiro. Se não precisarmos disso. Agora é definida uma função assíncrona. Podemos usar a palavra-chave function em JavaScript. Podemos chamá-lo de Fitch IP porque é exatamente o que estamos fazendo dentro deste bloco de código aqui, podemos realizar nosso ajuste real à sua pergunta, o que vem a seguir? O que fazemos? Bem, eu não sei. Vamos apenas dizer nossa resposta rural. Só estou mostrando que podemos defini-lo. Tudo o que quisermos é o resultado dessa solicitação da Fitch. E é claro que estou usando a palavra-chave assíncrona aqui porque sabemos que essa solicitação de recurso retorna uma promessa. O que vem a seguir? Bem, queremos verificar com ele, temos uma boa resposta. Então, vamos definir uma variável chamada boa resposta e executar nossa função de status de verificação, que passamos para ela, nossa resposta rural. Você pode realmente ver que isso é muito, muito simples, é muito intuitivo. Sabemos que, uma vez que tivermos a resposta desse FetchRequest, sabemos que redobramos o fluxo. Sabemos que é Jason porque fazemos uma chamada para esse URL da API em tempo mundial e ele nos diz que recebemos dados JSON devolvidos. O que queremos fazer é realmente definir uma variável chamada data, que será JSON. Na verdade, não é, vai ser um objeto JavaScript, mas sabemos que será o resultado de ter frio o método JSON. Usamos a palavra-chave aguardar mais uma vez, se tivermos uma boa resposta, sabemos que ela tem esse método JSON. Agora vamos o método JSON. Sabemos de palestras anteriores que a dívida nos retorna uma promessa. É por isso que temos que usar a palavra-chave await. Claro, podemos terminar o mesmo exemplo de pneu. Ao pegar nosso seletor de consulta de IP pega. Podemos pegar nosso elemento HTML que tem um ID de tomada de IP, acho que é isso que chamamos. Isso é rolar para cima. Estas são tomadas de IP de cabeçalho, você pode vê-lo? Vamos pequeno t. Se eu pega, vamos apenas fazer pequenos dentes. Isso altera sua propriedade HTML interna para o que sabemos neste objeto JavaScript. Vamos devolvê-los para nós. Ele tem uma propriedade chamada IP do cliente. Já fizemos isso antes. Sabe do que estou falando? Isso deve funcionar. Na verdade, não deveria porque ainda não executamos uma função. Então, é claro, fora desse bloco de código, vamos executar essa função. Alunos do Mit, isso deve funcionar. Como mencionei, não tenho poder. Portanto, não vai funcionar para nós. É por isso que esse gosto não foi substituído. Mas você entende o ponto. Acho que essa lógica permanecerá se houver algo errado com ela. Por favor, basta olhar nos comentários. Alguns shorts já foram resolvidos. Mas sim. Sim. Espero que você se divirta. Eu estaria me divertindo. Só há mais uma coisa que eu quero mencionar. Isso é eras. Agora mesmo. Não estamos pegando erros aqui. Quer saber, deixe-me excluir mais agora deixe-me manter o dia comum. Está tudo bem. Mas agora, se voltarmos à nossa imagem, carvão, não estamos lidando com áreas. Na próxima palestra, deixe-me mostrar rapidamente como podemos usar um bloco try and catch para lidar com erros. Mal posso esperar. 13. Erro para lidar com o uso de Tente e Catch: A última coisa sobre a qual quero falar com você é o tratamento de erros. Quero dizer, sabemos que executamos o status de verificação convertido em blob. E se formos a essas funções no topo do nosso código, teremos algum tratamento de erros. Nós o chamamos de método de rejeição. Por exemplo, se a resposta estiver bem, a propriedade é falsa. Mas o que acontece se tivermos outras áreas? E se tivermos áreas não nesses blocos de código? Bem, há uma solução muito fácil para isso. E isto é, podemos envolver todo o nosso bloco de código em uma instrução try. Muito, muito útil, muito, muito intuitivo. Então, apenas movemos nosso código dentro deste try-block. E o que isso faz é permitir que todas as áreas sejam capturadas por esse bloco de captura. Claro, recebemos um objeto de erro que podemos colocar em qualquer variável. Colocamos isso em uma variável chamada Era. E então ele executará esta função de retorno de chamada é medicamente e, claro, você pode fazer o que quiser. Este registro apenas do console que o objeto de ar aposta para o usuário. Ok, então podemos literalmente fazer isso, colocá-lo em uma tentativa e pegar bolsos. Muito simples. Eu te disse, eu disse que não vai ser difícil. E então você tem um erro, como um URL incorreto. Vá para o navegador, vá para o console e clique na imagem. Recebemos um erro. E esse é nosso erro personalizado. Deixe-me provar isso para você. Olá, mundo. Temos, vamos voltar para o navegador. Clique na imagem e, em seguida, vamos, Hello world. Opa, esse bloco catch está realmente pegando o erro. Espero que tudo isso esteja fazendo sentido. Se eu me diverti muito com esse falso, cobrimos uma tonelada de informações. Dando um passo atrás, quero que você perceba que você realmente percorreu um longo caminho. Você sabe o que são dados JSON, dados XML, você conhece a história do Ajax, de onde eles vieram. Você sabe o que é uma função de construtor que usamos para usar o objeto XHR. E a lista continua. Walden, dê um tapinha nas costas. Lá, nós o temos. Muito, muito simples. Foi uma palestra muito rápida. Espero que você possa começar a ver o poder de usar assíncrono e aguardar.