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:24.032
Então, esse "response"...

0:03:24.032,0:03:28.632
Perceba que esse "response"[br]recebe o arquivo "dados".

0:03:28.632,0:03:31.117
e vou colocar dentro[br]de uma variável chamada "dados",

0:03:31.117,0:03:32.046
Por quê?

0:03:32.046,0:03:36.341
A web só consegue[br]ler arquivos JSON.

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

0:03:38.984,0:03:43.689
do que o seu navegador[br]pode entender é arquivo JSON.

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

0:03:46.726,0:03:50.142
e joguei dentro de uma variável[br]chamada "dados",

0:03:50.142,0:03:51.897
e vou retornar esse "dados".

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

0:03:55.604,0:03:56.669
Ótimo.

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

0:04:01.640,0:04:03.457
Chamamos isso de "promise",

0:04:03.457,0:04:05.177
E o que é uma promessa?

0:04:05.177,0:04:09.571
É uma garantia de que, se os dados[br]forem lidos corretamente,

0:04:09.571,0:04:12.162
vai dar certo,[br]vai mostrar tudo bonitinho.

0:04:12.162,0:04:14.153
Se não, ele vai [br]apresentar um erro.

0:04:14.153,0:04:15.202
Então, vamos lá.

0:04:15.202,0:04:19.519
Eu trago aqui a "listaDados",[br]que é o nome da minha função,

0:04:19.519,0:04:21.694
e aí, aqui, eu coloco ".then".

0:04:21.694,0:04:24.213
Então, "dados"...

0:04:24.213,0:04:27.963
Aqui contém todos[br]aqueles arquivos.

0:04:27.963,0:04:30.735
"dados", [br]faço um "console.log",

0:04:30.735,0:04:33.469
e apresento todos os dados[br]aqui na minha tela.

0:04:33.469,0:04:35.525
Se não acontecer isso,

0:04:35.525,0:04:38.032
ele vai me trazer[br]uma mensagem de erro.

0:04:38.032,0:04:40.768
Ou seja, se os dados[br]estiverem corrompidos

0:04:40.768,0:04:42.832
ou não estiverem[br]no formato correto,

0:04:42.832,0:04:47.503
ele vai entrar aqui nesse "catch"[br]e vai apresentar como erro.

0:04:47.503,0:04:53.460
Esse é um exemplo de criar[br]uma função com "async" e "await".

0:04:53.460,0:04:54.696
E o que vai acontecer?

0:04:54.696,0:04:56.770
Quando ele estiver[br]com esse erro,

0:04:56.770,0:05:02.473
ele vai trazer o erro bonitinho,[br]sem problemas de travar a página.

0:05:02.473,0:05:05.591
Em um modo síncrono,[br]ele travava a página.

0:05:05.591,0:05:09.880
Se der erro, ele vai travar a página,[br]e não vai deixar você sair dela.

0:05:09.880,0:05:12.160
Como nós estamos[br]falando de um assíncrono,

0:05:12.160,0:05:15.648
eu consigo manipular a página,

0:05:15.648,0:05:19.836
limpar ou resetar,[br]iniciar a função novamente.

0:05:19.836,0:05:21.330
Então, vamos lá.

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

0:05:24.782,0:05:27.314
Ele está falando que não[br]pode acessar o "dados"

0:05:27.314,0:05:29.685
antes de ser inicializado,

0:05:29.685,0:05:31.493
Então, ele já entrou[br]no "catch" direto,

0:05:31.493,0:05:33.232
já é um exemplo do erro,

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

0:05:38.658,0:05:40.039
O erro está aqui:

0:05:40.039,0:05:45.100
é que eu não estou passando[br]dentro de aspas simples.

0:05:45.100,0:05:50.485
Olha lá, agora ele me trouxe[br]os dados do cliente,

0:05:50.485,0:05:54.058
a última compra dele[br]e se ele está ativo ou não.

0:05:54.058,0:05:58.096
"false", ele está inativo,[br]"true", ele está ativo.

0:05:58.096,0:06:00.258
Então, nós temos aqui

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

0:06:03.332,0:06:06.727
E olha as datas em que[br]eles fizeram a última compra.

0:06:06.727,0:06:10.589
Por exemplo: esse aqui[br]foi em 10/02/2020.

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

0:06:14.439,0:06:16.840
que mande mensagem[br]para esses clientes

0:06:16.840,0:06:20.557
para que eles possam[br]voltar a comprar.

0:06:20.557,0:06:23.634
Esse é um exemplo[br]de "async" e "await".

0:06:23.634,0:06:26.403
Agora que você já sabe [br]os conceitos de "async" e "await",

0:06:26.403,0:06:29.493
convido você a ter[br]um olhar de usuário

0:06:29.493,0:06:31.981
e, ao mesmo tempo, de dev,

0:06:31.981,0:06:37.358
trazendo o seu mundo real[br]ao olhar um aplicativo,

0:06:37.358,0:06:38.642
olhar para o código...

0:06:38.642,0:06:43.101
Onde está o "await",AO e aonde está o, assim como aplicá lo.