vimeo.com/.../1075761081

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
para o código

ao olhar um aplicativo.

Onde está o "await"?
Onde está o "async"?

E como aplicá-los?