0:00:07.662,0:00:09.545
Você está comprando[br]um produto na Amazon

0:00:09.545,0:00:10.877
e, ao finalizar essa compra,

0:00:10.877,0:00:13.125
esse produto[br]vai para a separação.

0:00:13.125,0:00:15.033
Enquanto ele está[br]em separação,

0:00:15.033,0:00:20.033
você pode comprar outros produtos[br]e realizar outros pedidos.

0:00:20.033,0:00:24.498
Isso é uma visão de usuário.[br]E como desenvolvedor?

0:00:24.498,0:00:26.324
No modo desenvolvedor,

0:00:26.324,0:00:30.227
utilizamos duas sintaxes[br]muito poderosas:

0:00:30.227,0:00:32.383
o "async" e o "await".

0:00:32.383,0:00:34.455
Pensando no exemplo[br]da Amazon,

0:00:34.455,0:00:38.400
o "async" é quando[br]você finaliza o pedido.

0:00:38.400,0:00:43.385
Já o "await" é a espera[br]da separação desse pedido.

0:00:43.385,0:00:46.307
Enquanto isso,[br]você pode comprar outras coisas,

0:00:46.307,0:00:48.732
pode colocar[br]outros produtos no carrinho

0:00:48.732,0:00:50.780
e até mesmo comprar[br]o mesmo produto,

0:00:50.780,0:00:54.946
sem atrapalhar o pedido[br]que já está em andamento.

0:00:54.946,0:01:00.133
Isso é uma forma de esperar[br]outras requisições serem executadas.

0:01:00.133,0:01:03.864
Vamos colocar em prática[br]os conceitos de "async" e "await".

0:01:03.864,0:01:08.165
Nesse exemplo,[br]vamos aplicar uma lista

0:01:08.165,0:01:11.743
na qual eu consigo[br]trazer clientes inativos

0:01:11.743,0:01:14.350
e quando foi a última[br]compra que eles fizeram.

0:01:14.350,0:01:15.444
Vamos ao código?

0:01:15.444,0:01:17.149
Na estrutura do código,

0:01:17.149,0:01:21.171
temos aqui o nosso HTML[br]chamando o script,

0:01:21.171,0:01:26.872
temos aqui o código do script[br]já pronto que está no seu material,

0:01:26.872,0:01:32.176
e um arquivo novo,[br]que é um JSON,

0:01:32.176,0:01:36.229
com os dados dos clientes[br]que eu preciso trazer,

0:01:36.229,0:01:40.513
que estão inativos,[br]e quando foi a última compra deles.

0:01:40.513,0:01:44.530
Vou explicar linha por linha[br]para que vocês possam entender.

0:01:44.530,0:01:46.677
Bem, vamos começar [br]pelo script.

0:01:46.677,0:01:51.458
Primeiro, é criada[br]uma função "listaDados",

0:01:51.458,0:01:56.747
mas, antes, eu coloco[br]a palavra "async",

0:01:56.747,0:02:02.192
porque esta função vai executar[br]de forma assíncrona.

0:02:02.192,0:02:07.086
Com isso, quando essa função[br]começar a ser executada,

0:02:07.086,0:02:11.701
ela não terá problema [br]em executar outras operações.

0:02:11.701,0:02:14.500
Na segunda linha nós temos a requisição,

0:02:14.500,0:02:17.875
Então, por exemplo: criei uma[br]variável chamada "response",

0:02:17.875,0:02:23.073
que vai ter a outra palavra[br]chamada "await".

0:02:23.073,0:02:26.158
Nesse caso aqui,[br]ele vai esperar.

0:02:26.158,0:02:27.558
Esperar o quê?

0:02:27.558,0:02:33.651
Esse método "fetch" que vai[br]até o arquivo "dados.json",

0:02:33.651,0:02:36.834
que é exatamente[br]esse arquivo aqui.

0:02:36.834,0:02:40.909
Aqui também poderia ser[br]uma requisição HTTP

0:02:40.909,0:02:43.596
como placeholder,

0:02:43.596,0:02:46.631
que está no material de vocês[br]como requisição.

0:02:46.631,0:02:49.319
Aqui, eu estou dando exemplo[br]como arquivo, por que?

0:02:49.319,0:02:55.511
O "async" lê arquivos ou requisições HTTP.

0:02:55.511,0:02:58.982
No material de vocês já tem[br]um exemplo como requisição,

0:02:58.982,0:03:03.941
e aqui estou fazendo um exemplo[br]prático lendo um arquivo.

0:03:03.941,0:03:07.902
Então, nesse exemplo,[br]o "await" vai esperar

0:03:07.902,0:03:16.546
o "fetch" ir até o "dados.json"[br]ler todos esses dados aqui.

0:03:16.546,0:03:20.334
Ele traz, joga dentro[br]dessa variável aqui

0:03:20.334,0:03:22.227
que eu estou criando,[br]chamada "dados",

0:03:22.227,0:03:25.771
Então esse response[br]percebem que esses pontos

0:03:26.172,0:03:30.943
recebe o arquivo dados e vou colocar[br]dentro de uma variável chamada dados,

0:03:31.277,0:03:35.414
porque a web ela só consegue ler arquivo.

0:03:35.414,0:03:38.984
Jeison[br]Então, tudo o que nós temos aqui por trás

0:03:38.984,0:03:43.122
do que o seu navegador pode entender[br]é aqui o diz.

0:03:43.989,0:03:46.826
Então, nessa função[br]eu fui lá, peguei os dados

0:03:46.826,0:03:49.829
e joguei[br]dentro de uma variável chamada Dados.

0:03:49.962,0:03:51.897
Ok, e vou retornar esses dados.

0:03:51.897,0:03:55.067
Vou retornar tudo o que estiver[br]dentro desse arquivinho aqui.

0:03:55.868,0:03:56.869
Ótimo.

0:03:56.869,0:04:01.640
Para isso acontecer[br]eu tenho que fazer uma promessa.

0:04:01.807,0:04:06.412
Chamamos isso de pro mais,[br]que é uma promessa e uma garantia

0:04:06.612,0:04:10.950
de que se os dados forem lidos[br]corretamente, vai dar certo.

0:04:10.950,0:04:14.153
Vai mostrar tudo bonitinho,[br]senão ele vai apresentar um erro.

0:04:14.453,0:04:15.488
Então vamos lá.

0:04:15.488,0:04:18.157
Eu trago aqui a minha lista de dados,

0:04:18.157,0:04:21.694
que é o nome da minha função, e aí aqui[br]eu coloco o ponto B.

0:04:21.927,0:04:27.099
Então dados aqui contém[br]todos aqueles arquivos lá

0:04:28.267,0:04:30.002
dados, faço um

0:04:30.002,0:04:33.005
console log e apresento todos os dados[br]aqui na minha tela.

0:04:33.739,0:04:38.177
Se não acontecer isso,[br]ele vai me trazer uma mensagem de erro.

0:04:38.177,0:04:42.681
Ou seja, se os dados tiverem corrompidos[br]ou não estiverem no formato correto,

0:04:43.082,0:04:47.186
ele já vai entrar aqui nesse get[br]e vai apresentar como erro.

0:04:47.753,0:04:50.189
Esse é um exemplo de criar

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

0:04:53.792,0:04:56.795
é o que vai acontecer[br]quando ele tiver com esse erro,

0:04:56.962,0:04:59.965
ele vai fazer o erro bonitinho,[br]sem problemas

0:05:00.199,0:05:02.768
de travar a sua página.

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

0:05:05.871,0:05:09.975
Se deu erro, ele vai travar a página,[br]vai deixar você sair dela.

0:05:09.975,0:05:15.214
Como nós estamos falando de um assíncrono,[br]eu consigo manipular a minha página,

0:05:15.648,0:05:19.718
limpar ou resetar[br]e iniciar minha função novamente.

0:05:20.119,0:05:21.587
Então vamos lá.

0:05:21.587,0:05:25.024
Bem pessoal,[br]percebam que aqui ele deu um erro.

0:05:25.024,0:05:28.661
Ele está falando que não pode acessar[br]o dados A pode ser inicializado,

0:05:29.862,0:05:30.229
então ele já

0:05:30.229,0:05:33.232
entrou no cacete direto,[br]já é um exemplo do erro,

0:05:33.399,0:05:38.504
mas isso não fez com que a minha aplicação[br]parasse, travasse.

0:05:38.937,0:05:40.039
O erro está aqui.

0:05:40.039,0:05:44.209
É que eu não estou passando[br]dentro de aspas simples

0:05:45.611,0:05:49.782
agora ele me trouxe os dados do cliente.

0:05:50.783,0:05:53.786
A última compra dele é se ele está ativo[br]ou não.

0:05:54.219,0:05:57.990
False Ele está inativo, ele está ativo.

0:05:58.390,0:06:00.426
Então nós temos aqui

0:06:00.426,0:06:03.495
dois clientes[br]ativos e três clientes inativos.

0:06:03.495,0:06:07.699
E olha as datas que eles fizeram[br]a última compra, por exemplo.

0:06:07.699,0:06:10.702
Isso aqui desde dois 2020.

0:06:10.803,0:06:14.439
Isso ajuda[br]você a poder depois criar uma outra função

0:06:14.740,0:06:18.010
que manda e mensagem para esses clientes[br]para que eles possam

0:06:19.044,0:06:20.779
voltar a comprar.

0:06:20.779,0:06:22.314
Esse é um exemplo.

0:06:22.314,0:06:23.715
É assim que a gente.

0:06:23.715,0:06:27.886
Agora que você já sabe os conceitos de[br]assim que eu convido você a ter

0:06:27.886,0:06:31.490
um olhar de usuário e ao mesmo tempo de

0:06:31.490,0:06:34.660
deve trazendo o seu mundo real.

0:06:35.294,0:06:36.895
Ao olhar um aplicativo

0:06:37.930,0:06:39.097
para o código aonde

0:06:39.097,0:06:43.101
está o[br]AO e aonde está o, assim como aplicá lo.