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, por que?
O "async" lê 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 "await" vai esperar
o "fetch" ir até o "dados.json" ler todos esses dados aqui.
Ele traz, joga dentro dessa variável aqui
que eu estou criando, chamada "dados",
Então, esse "response"...
Perceba que esse "response" recebe o arquivo "dados".
e vou colocar dentro de uma variável chamada "dados",
Por quê?
A web só consegue ler arquivos JSON.
Então, tudo que nós temos aqui por trás
do que o seu navegador pode entender é arquivo JSON.
Então, nessa função, eu fui lá, peguei os dados,
e joguei dentro de uma variável chamada "dados",
e vou retornar esse "dados".
Vou retornar tudo o que estiver dentro desse arquivo aqui.
Ótimo.
Para isso acontecer, eu tenho que fazer uma promessa.
Chamamos isso de "promise",
E o que é uma promessa?
É uma garantia de que, se os dados forem lidos corretamente,
vai dar certo, vai mostrar tudo bonitinho.
Se não, ele vai apresentar um erro.
Então, vamos lá.
Eu trago aqui a "listaDados", que é o nome da minha função,
e aí, aqui, eu coloco ".then".
Então, "dados"...
Aqui contém todos aqueles arquivos.
"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 estiverem corrompidos
ou não estiverem no formato correto,
ele vai entrar aqui nesse "catch" e vai apresentar como erro.
Esse é um exemplo de criar uma função com "async" e "await".
E o que vai acontecer?
Quando ele estiver com esse erro,
ele vai trazer o erro bonitinho, sem problemas de travar a página.
Em um modo síncrono, ele travava a página.
Se der erro, ele vai travar a página, e não vai deixar você sair dela.
Como nós estamos falando de um assíncrono,
eu consigo manipular a página,
limpar ou resetar, iniciar a 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"
antes de ser inicializado,
Então, ele já entrou no "catch" direto,
já é um exemplo do erro,
mas isso não fez com que a aplicação parasse, travasse.
O erro está aqui:
é que eu não estou passando dentro de aspas simples.
Olha lá, agora ele me trouxe os dados do cliente,
a última compra dele e se ele está ativo ou não.
"false", ele está inativo, "true", ele está ativo.
Então, nós temos aqui
dois clientes ativos e três clientes inativos.
E olha as datas em que eles fizeram a última compra.
Por exemplo: esse aqui foi em 10/02/2020.
Isso te ajuda a poder, depois, criar uma outra função
que mande mensagem para esses clientes
para que eles possam voltar a comprar.
Esse é um exemplo de "async" e "await".
Agora que você já sabe os conceitos de "async" e "await",
convido você a ter um olhar de usuário
e, ao mesmo tempo, de dev,
trazendo o seu mundo real ao olhar um aplicativo,
olhar para o código...
Onde está o "await",AO e aonde está o, assim como aplicá lo.