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 vai ter problema em executar
outras operações.

Na segunda linha nós temos a requisição,
então por exemplo,

criei uma variável chamado response
que vai ter

a outra palavra chamada ao UI.

Nesse caso aqui, ele vai esperar.

Esperar o quê?

Esse método fetch que vai até o arquivo

dado o ponto,
diz O que é exatamente esse arquivo aqui?

Aqui poderia ser também
uma requisição HTTP

como placeholder

que está no material de vocês
como requisição.

Aqui eu to 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.