Você está comprando um produto na Amazon e, ao finalizar essa compra, esse produto vai para a separação. Enquanto ele está em separação, você pode comprar outros produtos e realizar outros pedidos. Isso é uma visão de usuário. E como desenvolvedor? No modo desenvolvedor, utilizamos duas sintaxes muito poderosas: o "async" e o "await". Pensando no exemplo da Amazon, o "async" é quando você finaliza o pedido. Já o "await" é a espera da separação desse pedido. Enquanto isso, você pode comprar outras coisas, pode colocar outros produtos no carrinho e até mesmo comprar o mesmo produto, sem atrapalhar o pedido que já está em andamento. Isso é uma forma de esperar outras requisições serem executadas. Vamos colocar em prática os conceitos de "async" e "await". Nesse exemplo, vamos aplicar uma lista na qual eu consigo trazer clientes inativos e quando foi a última compra que eles fizeram. Vamos ao código? Na estrutura do código, temos aqui o nosso HTML chamando o script, temos aqui o código do script já pronto que está no seu material, e um arquivo novo, que é um JSON, com os dados dos clientes que eu preciso trazer, que estão inativos, e quando foi a última compra deles. Vou explicar linha por linha para que vocês possam entender. Bem, vamos começar pelo script. Primeiro, é criada uma função "listaDados", mas, antes, eu coloco a palavra "async", porque esta função vai executar de forma assíncrona. Com isso, quando essa função começar a ser executada, ela não terá problema em executar outras operações. Na segunda linha nós temos a requisição, Então, por exemplo: criei uma variável chamada "response", que vai ter a outra palavra chamada "await". Nesse caso aqui, ele vai esperar. Esperar o quê? Esse método "fetch" que vai até o arquivo "dados.json", que é exatamente esse arquivo aqui. Aqui também poderia ser uma requisição HTTP como placeholder, que está no material de vocês como requisição. Aqui, eu estou dando exemplo como arquivo, porque o assim que eu ele ler arquivos ou requisições http no material de vocês já tem um exemplo como requisição e aqui estou fazendo um exemplo prático. Lendo um arquivo. Então nesse exemplo, o ao item vai esperar o frete ir até onde irão ponto o dados Ponto de irão ler toda todos esses dados aqui ele traz joga dentro dessa variável aqui o que eu estou criando chamada dados. Então esse response percebem que esses pontos recebe o arquivo dados e vou colocar dentro de uma variável chamada dados, porque a web ela só consegue ler arquivo. Jeison Então, tudo o que nós temos aqui por trás do que o seu navegador pode entender é aqui o diz. Então, nessa função eu fui lá, peguei os dados e joguei dentro de uma variável chamada Dados. Ok, e vou retornar esses dados. Vou retornar tudo o que estiver dentro desse arquivinho aqui. Ótimo. Para isso acontecer eu tenho que fazer uma promessa. Chamamos isso de pro mais, que é uma promessa e uma garantia de que se os dados forem lidos corretamente, vai dar certo. Vai mostrar tudo bonitinho, senão ele vai apresentar um erro. Então vamos lá. Eu trago aqui a minha lista de dados, que é o nome da minha função, e aí aqui eu coloco o ponto B. Então dados aqui contém todos aqueles arquivos lá dados, faço um console log e apresento todos os dados aqui na minha tela. Se não acontecer isso, ele vai me trazer uma mensagem de erro. Ou seja, se os dados tiverem corrompidos ou não estiverem no formato correto, ele já vai entrar aqui nesse get e vai apresentar como erro. Esse é um exemplo de criar uma função com assim, que ao invés é o que vai acontecer quando ele tiver com esse erro, ele vai fazer o erro bonitinho, sem problemas de travar a sua página. Num modo síncrono, ele travava a página. Se deu erro, ele vai travar a página, vai deixar você sair dela. Como nós estamos falando de um assíncrono, eu consigo manipular a minha página, limpar ou resetar e iniciar minha função novamente. Então vamos lá. Bem pessoal, percebam que aqui ele deu um erro. Ele está falando que não pode acessar o dados A pode ser inicializado, então ele já entrou no cacete direto, já é um exemplo do erro, mas isso não fez com que a minha aplicação parasse, travasse. O erro está aqui. É que eu não estou passando dentro de aspas simples agora ele me trouxe os dados do cliente. A última compra dele é se ele está ativo ou não. False Ele está inativo, ele está ativo. Então nós temos aqui dois clientes ativos e três clientes inativos. E olha as datas que eles fizeram a última compra, por exemplo. Isso aqui desde dois 2020. Isso ajuda você a poder depois criar uma outra função que manda e mensagem para esses clientes para que eles possam voltar a comprar. Esse é um exemplo. É assim que a gente. Agora que você já sabe os conceitos de assim que eu convido você a ter um olhar de usuário e ao mesmo tempo de deve trazendo o seu mundo real. Ao olhar um aplicativo para o código aonde está o AO e aonde está o, assim como aplicá lo.