WEBVTT

00:00:07.662 --> 00:00:09.545
Você está comprando
um produto na Amazon

00:00:09.545 --> 00:00:10.877
e, ao finalizar essa compra,

00:00:10.877 --> 00:00:13.125
esse produto
vai para a separação.

00:00:13.125 --> 00:00:15.033
Enquanto ele está
em separação,

00:00:15.033 --> 00:00:20.033
você pode comprar outros produtos
e realizar outros pedidos.

00:00:20.033 --> 00:00:24.498
Isso é uma visão de usuário.
E como desenvolvedor?

00:00:24.498 --> 00:00:26.324
No modo desenvolvedor,

00:00:26.324 --> 00:00:30.227
utilizamos duas sintaxes
muito poderosas:

00:00:30.227 --> 00:00:32.383
o "async" e o "await".

00:00:32.383 --> 00:00:34.455
Pensando no exemplo
da Amazon,

00:00:34.455 --> 00:00:38.400
o "async" é quando
você finaliza o pedido.

00:00:38.400 --> 00:00:43.385
Já o "await" é a espera
da separação desse pedido.

00:00:43.385 --> 00:00:46.307
Enquanto isso,
você pode comprar outras coisas,

00:00:46.307 --> 00:00:48.732
pode colocar
outros produtos no carrinho

00:00:48.732 --> 00:00:50.780
e até mesmo comprar
o mesmo produto,

00:00:50.780 --> 00:00:54.946
sem atrapalhar o pedido
que já está em andamento.

00:00:54.946 --> 00:01:00.133
Isso é uma forma de esperar
outras requisições serem executadas.

00:01:00.133 --> 00:01:03.864
Vamos colocar em prática
os conceitos de "async" e "await".

00:01:03.864 --> 00:01:08.165
Nesse exemplo,
vamos aplicar uma lista

00:01:08.165 --> 00:01:11.743
na qual eu consigo
trazer clientes inativos

00:01:11.743 --> 00:01:14.350
e quando foi a última
compra que eles fizeram.

00:01:14.350 --> 00:01:15.444
Vamos ao código?

00:01:15.444 --> 00:01:17.149
Na estrutura do código,

00:01:17.149 --> 00:01:21.171
temos aqui o nosso HTML
chamando o script,

00:01:21.171 --> 00:01:26.872
temos aqui o código do script
já pronto que está no seu material,

00:01:26.872 --> 00:01:32.176
e um arquivo novo,
que é um JSON,

00:01:32.176 --> 00:01:36.229
com os dados dos clientes
que eu preciso trazer,

00:01:36.229 --> 00:01:40.513
que estão inativos,
e quando foi a última compra deles.

00:01:40.513 --> 00:01:44.530
Vou explicar linha por linha
para que vocês possam entender.

00:01:44.530 --> 00:01:46.873
Bem, vamos começar 
pelo script.

00:01:46.873 --> 00:01:50.977
Primeiro é criado uma função listar dados,

00:01:51.678 --> 00:01:56.049
mas antes eu coloca a palavra assim,

00:01:56.949 --> 00:02:01.921
porque esta função vai executar
de forma assíncrona.

00:02:02.455 --> 00:02:06.826
Com isso, essa função
quando começar a ser executada,

00:02:07.293 --> 00:02:11.330
ela não vai ter problema em executar
outras operações.

00:02:11.931 --> 00:02:15.401
Na segunda linha nós temos a requisição,
então por exemplo,

00:02:15.768 --> 00:02:19.238
criei uma variável chamado response
que vai ter

00:02:20.039 --> 00:02:23.042
a outra palavra chamada ao UI.

00:02:23.309 --> 00:02:26.312
Nesse caso aqui, ele vai esperar.

00:02:26.379 --> 00:02:27.680
Esperar o quê?

00:02:27.680 --> 00:02:31.984
Esse método fetch que vai até o arquivo

00:02:31.984 --> 00:02:36.322
dado o ponto,
diz O que é exatamente esse arquivo aqui?

00:02:36.989 --> 00:02:40.593
Aqui poderia ser também
uma requisição HTTP

00:02:41.194 --> 00:02:43.596
como placeholder

00:02:43.596 --> 00:02:46.599
que está no material de vocês
como requisição.

00:02:46.999 --> 00:02:50.703
Aqui eu to dando exemplo como arquivo,
porque o assim que eu

00:02:51.437 --> 00:02:56.909
ele ler arquivos ou requisições http
no material de vocês

00:02:56.909 --> 00:03:01.948
já tem um exemplo como requisição
e aqui estou fazendo um exemplo prático.

00:03:02.448 --> 00:03:04.150
Lendo um arquivo.

00:03:04.150 --> 00:03:07.720
Então nesse exemplo, o ao item vai esperar

00:03:08.120 --> 00:03:11.123
o frete ir até onde irão ponto

00:03:11.290 --> 00:03:15.995
o dados Ponto de irão ler toda
todos esses dados aqui

00:03:16.729 --> 00:03:22.001
ele traz joga dentro dessa variável aqui
o que eu estou criando chamada dados.

00:03:22.435 --> 00:03:25.771
Então esse response
percebem que esses pontos

00:03:26.172 --> 00:03:30.943
recebe o arquivo dados e vou colocar
dentro de uma variável chamada dados,

00:03:31.277 --> 00:03:35.414
porque a web ela só consegue ler arquivo.

00:03:35.414 --> 00:03:38.984
Jeison
Então, tudo o que nós temos aqui por trás

00:03:38.984 --> 00:03:43.122
do que o seu navegador pode entender
é aqui o diz.

00:03:43.989 --> 00:03:46.826
Então, nessa função
eu fui lá, peguei os dados

00:03:46.826 --> 00:03:49.829
e joguei
dentro de uma variável chamada Dados.

00:03:49.962 --> 00:03:51.897
Ok, e vou retornar esses dados.

00:03:51.897 --> 00:03:55.067
Vou retornar tudo o que estiver
dentro desse arquivinho aqui.

00:03:55.868 --> 00:03:56.869
Ótimo.

00:03:56.869 --> 00:04:01.640
Para isso acontecer
eu tenho que fazer uma promessa.

00:04:01.807 --> 00:04:06.412
Chamamos isso de pro mais,
que é uma promessa e uma garantia

00:04:06.612 --> 00:04:10.950
de que se os dados forem lidos
corretamente, vai dar certo.

00:04:10.950 --> 00:04:14.153
Vai mostrar tudo bonitinho,
senão ele vai apresentar um erro.

00:04:14.453 --> 00:04:15.488
Então vamos lá.

00:04:15.488 --> 00:04:18.157
Eu trago aqui a minha lista de dados,

00:04:18.157 --> 00:04:21.694
que é o nome da minha função, e aí aqui
eu coloco o ponto B.

00:04:21.927 --> 00:04:27.099
Então dados aqui contém
todos aqueles arquivos lá

00:04:28.267 --> 00:04:30.002
dados, faço um

00:04:30.002 --> 00:04:33.005
console log e apresento todos os dados
aqui na minha tela.

00:04:33.739 --> 00:04:38.177
Se não acontecer isso,
ele vai me trazer uma mensagem de erro.

00:04:38.177 --> 00:04:42.681
Ou seja, se os dados tiverem corrompidos
ou não estiverem no formato correto,

00:04:43.082 --> 00:04:47.186
ele já vai entrar aqui nesse get
e vai apresentar como erro.

00:04:47.753 --> 00:04:50.189
Esse é um exemplo de criar

00:04:50.189 --> 00:04:53.192
uma função com assim, que ao invés

00:04:53.792 --> 00:04:56.795
é o que vai acontecer
quando ele tiver com esse erro,

00:04:56.962 --> 00:04:59.965
ele vai fazer o erro bonitinho,
sem problemas

00:05:00.199 --> 00:05:02.768
de travar a sua página.

00:05:02.768 --> 00:05:05.771
Num modo síncrono, ele travava a página.

00:05:05.871 --> 00:05:09.975
Se deu erro, ele vai travar a página,
vai deixar você sair dela.

00:05:09.975 --> 00:05:15.214
Como nós estamos falando de um assíncrono,
eu consigo manipular a minha página,

00:05:15.648 --> 00:05:19.718
limpar ou resetar
e iniciar minha função novamente.

00:05:20.119 --> 00:05:21.587
Então vamos lá.

00:05:21.587 --> 00:05:25.024
Bem pessoal,
percebam que aqui ele deu um erro.

00:05:25.024 --> 00:05:28.661
Ele está falando que não pode acessar
o dados A pode ser inicializado,

00:05:29.862 --> 00:05:30.229
então ele já

00:05:30.229 --> 00:05:33.232
entrou no cacete direto,
já é um exemplo do erro,

00:05:33.399 --> 00:05:38.504
mas isso não fez com que a minha aplicação
parasse, travasse.

00:05:38.937 --> 00:05:40.039
O erro está aqui.

00:05:40.039 --> 00:05:44.209
É que eu não estou passando
dentro de aspas simples

00:05:45.611 --> 00:05:49.782
agora ele me trouxe os dados do cliente.

00:05:50.783 --> 00:05:53.786
A última compra dele é se ele está ativo
ou não.

00:05:54.219 --> 00:05:57.990
False Ele está inativo, ele está ativo.

00:05:58.390 --> 00:06:00.426
Então nós temos aqui

00:06:00.426 --> 00:06:03.495
dois clientes
ativos e três clientes inativos.

00:06:03.495 --> 00:06:07.699
E olha as datas que eles fizeram
a última compra, por exemplo.

00:06:07.699 --> 00:06:10.702
Isso aqui desde dois 2020.

00:06:10.803 --> 00:06:14.439
Isso ajuda
você a poder depois criar uma outra função

00:06:14.740 --> 00:06:18.010
que manda e mensagem para esses clientes
para que eles possam

00:06:19.044 --> 00:06:20.779
voltar a comprar.

00:06:20.779 --> 00:06:22.314
Esse é um exemplo.

00:06:22.314 --> 00:06:23.715
É assim que a gente.

00:06:23.715 --> 00:06:27.886
Agora que você já sabe os conceitos de
assim que eu convido você a ter

00:06:27.886 --> 00:06:31.490
um olhar de usuário e ao mesmo tempo de

00:06:31.490 --> 00:06:34.660
deve trazendo o seu mundo real.

00:06:35.294 --> 00:06:36.895
Ao olhar um aplicativo

00:06:37.930 --> 00:06:39.097
para o código aonde

00:06:39.097 --> 00:06:43.101
está o
AO e aonde está o, assim como aplicá lo.