1
00:00:07,662 --> 00:00:09,545
Você está comprando
um produto na Amazon

2
00:00:09,545 --> 00:00:10,877
e, ao finalizar essa compra,

3
00:00:10,877 --> 00:00:13,125
esse produto
vai para a separação.

4
00:00:13,125 --> 00:00:15,033
Enquanto ele está
em separação,

5
00:00:15,033 --> 00:00:20,033
você pode comprar outros produtos
e realizar outros pedidos.

6
00:00:20,033 --> 00:00:24,498
Isso é uma visão de usuário.
E como desenvolvedor?

7
00:00:24,498 --> 00:00:26,324
No modo desenvolvedor,

8
00:00:26,324 --> 00:00:30,227
utilizamos duas sintaxes
muito poderosas:

9
00:00:30,227 --> 00:00:32,383
o "async" e o "await".

10
00:00:32,383 --> 00:00:34,455
Pensando no exemplo
da Amazon,

11
00:00:34,455 --> 00:00:38,400
o "async" é quando
você finaliza o pedido.

12
00:00:38,400 --> 00:00:43,385
Já o "await" é a espera
da separação desse pedido.

13
00:00:43,385 --> 00:00:46,307
Enquanto isso,
você pode comprar outras coisas,

14
00:00:46,307 --> 00:00:48,732
pode colocar
outros produtos no carrinho

15
00:00:48,732 --> 00:00:50,780
e até mesmo comprar
o mesmo produto,

16
00:00:50,780 --> 00:00:54,946
sem atrapalhar o pedido
que já está em andamento.

17
00:00:54,946 --> 00:01:00,133
Isso é uma forma de esperar
outras requisições serem executadas.

18
00:01:00,133 --> 00:01:03,864
Vamos colocar em prática
os conceitos de "async" e "await".

19
00:01:03,864 --> 00:01:08,165
Nesse exemplo,
vamos aplicar uma lista

20
00:01:08,165 --> 00:01:11,743
na qual eu consigo
trazer clientes inativos

21
00:01:11,743 --> 00:01:14,350
e quando foi a última
compra que eles fizeram.

22
00:01:14,350 --> 00:01:15,444
Vamos ao código?

23
00:01:15,444 --> 00:01:17,149
Na estrutura do código,

24
00:01:17,149 --> 00:01:21,171
temos aqui o nosso HTML
chamando o script,

25
00:01:21,171 --> 00:01:26,872
temos aqui o código do script
já pronto que está no seu material,

26
00:01:26,872 --> 00:01:32,176
e um arquivo novo,
que é um JSON,

27
00:01:32,176 --> 00:01:36,229
com os dados dos clientes
que eu preciso trazer,

28
00:01:36,229 --> 00:01:40,513
que estão inativos,
e quando foi a última compra deles.

29
00:01:40,513 --> 00:01:44,530
Vou explicar linha por linha
para que vocês possam entender.

30
00:01:44,530 --> 00:01:46,677
Bem, vamos começar 
pelo script.

31
00:01:46,677 --> 00:01:51,458
Primeiro, é criada
uma função "listaDados",

32
00:01:51,458 --> 00:01:56,747
mas, antes, eu coloco
a palavra "async",

33
00:01:56,747 --> 00:02:02,192
porque esta função vai executar
de forma assíncrona.

34
00:02:02,192 --> 00:02:07,086
Com isso, quando essa função
começar a ser executada,

35
00:02:07,086 --> 00:02:11,701
ela não terá problema 
em executar outras operações.

36
00:02:11,701 --> 00:02:14,500
Na segunda linha nós temos a requisição,

37
00:02:14,500 --> 00:02:17,875
Então, por exemplo: criei uma
variável chamada "response",

38
00:02:17,875 --> 00:02:23,073
que vai ter a outra palavra
chamada "await".

39
00:02:23,073 --> 00:02:26,158
Nesse caso aqui,
ele vai esperar.

40
00:02:26,158 --> 00:02:27,558
Esperar o quê?

41
00:02:27,558 --> 00:02:33,651
Esse método "fetch" que vai
até o arquivo "dados.json",

42
00:02:33,651 --> 00:02:36,834
que é exatamente
esse arquivo aqui.

43
00:02:36,834 --> 00:02:40,909
Aqui também poderia ser
uma requisição HTTP

44
00:02:40,909 --> 00:02:43,596
como placeholder,

45
00:02:43,596 --> 00:02:46,631
que está no material de vocês
como requisição.

46
00:02:46,631 --> 00:02:49,319
Aqui, eu estou dando exemplo
como arquivo, por que?

47
00:02:49,319 --> 00:02:55,511
O "async" lê arquivos ou requisições HTTP.

48
00:02:55,511 --> 00:02:58,982
No material de vocês já tem
um exemplo como requisição,

49
00:02:58,982 --> 00:03:03,941
e aqui estou fazendo um exemplo
prático lendo um arquivo.

50
00:03:03,941 --> 00:03:07,902
Então, nesse exemplo,
o "await" vai esperar

51
00:03:07,902 --> 00:03:16,546
o "fetch" ir até o "dados.json"
ler todos esses dados aqui.

52
00:03:16,546 --> 00:03:20,334
Ele traz, joga dentro
dessa variável aqui

53
00:03:20,334 --> 00:03:22,227
que eu estou criando,
chamada "dados",

54
00:03:22,227 --> 00:03:24,032
Então, esse "response"...

55
00:03:24,032 --> 00:03:28,632
Perceba que esse "response"
recebe o arquivo "dados".

56
00:03:28,632 --> 00:03:31,117
e vou colocar dentro
de uma variável chamada "dados",

57
00:03:31,117 --> 00:03:32,046
Por quê?

58
00:03:32,046 --> 00:03:36,341
A web só consegue
ler arquivos JSON.

59
00:03:36,341 --> 00:03:38,984
Então, tudo que nós
temos aqui por trás

60
00:03:38,984 --> 00:03:43,689
do que o seu navegador
pode entender é arquivo JSON.

61
00:03:43,689 --> 00:03:46,726
Então, nessa função,
eu fui lá, peguei os dados,

62
00:03:46,726 --> 00:03:50,142
e joguei dentro de uma variável
chamada "dados",

63
00:03:50,142 --> 00:03:51,897
e vou retornar esse "dados".

64
00:03:51,897 --> 00:03:55,604
Vou retornar tudo o que estiver
dentro desse arquivo aqui.

65
00:03:55,604 --> 00:03:56,669
Ótimo.

66
00:03:56,669 --> 00:04:01,640
Para isso acontecer,
eu tenho que fazer uma promessa.

67
00:04:01,640 --> 00:04:03,457
Chamamos isso de "promise",

68
00:04:03,457 --> 00:04:05,177
E o que é uma promessa?

69
00:04:05,177 --> 00:04:09,571
É uma garantia de que, se os dados
forem lidos corretamente,

70
00:04:09,571 --> 00:04:12,162
vai dar certo,
vai mostrar tudo bonitinho.

71
00:04:12,162 --> 00:04:14,153
Se não, ele vai 
apresentar um erro.

72
00:04:14,153 --> 00:04:15,202
Então, vamos lá.

73
00:04:15,202 --> 00:04:19,519
Eu trago aqui a "listaDados",
que é o nome da minha função,

74
00:04:19,519 --> 00:04:21,694
e aí, aqui, eu coloco ".then".

75
00:04:21,694 --> 00:04:24,213
Então, "dados"...

76
00:04:24,213 --> 00:04:27,963
Aqui contém todos
aqueles arquivos.

77
00:04:27,963 --> 00:04:30,735
"dados", 
faço um "console.log",

78
00:04:30,735 --> 00:04:33,469
e apresento todos os dados
aqui na minha tela.

79
00:04:33,469 --> 00:04:35,525
Se não acontecer isso,

80
00:04:35,525 --> 00:04:38,032
ele vai me trazer
uma mensagem de erro.

81
00:04:38,032 --> 00:04:40,768
Ou seja, se os dados
estiverem corrompidos

82
00:04:40,768 --> 00:04:42,832
ou não estiverem
no formato correto,

83
00:04:42,832 --> 00:04:47,503
ele vai entrar aqui nesse "catch"
e vai apresentar como erro.

84
00:04:47,503 --> 00:04:53,460
Esse é um exemplo de criar
uma função com "async" e "await".

85
00:04:53,460 --> 00:04:54,696
E o que vai acontecer?

86
00:04:54,696 --> 00:04:56,770
Quando ele estiver
com esse erro,

87
00:04:56,770 --> 00:05:02,473
ele vai trazer o erro bonitinho,
sem problemas de travar a página.

88
00:05:02,473 --> 00:05:05,591
Em um modo síncrono,
ele travava a página.

89
00:05:05,591 --> 00:05:09,880
Se der erro, ele vai travar a página,
e não vai deixar você sair dela.

90
00:05:09,880 --> 00:05:12,160
Como nós estamos
falando de um assíncrono,

91
00:05:12,160 --> 00:05:15,648
eu consigo manipular a página,

92
00:05:15,648 --> 00:05:19,836
limpar ou resetar,
iniciar a função novamente.

93
00:05:19,836 --> 00:05:21,330
Então, vamos lá.

94
00:05:21,330 --> 00:05:24,782
Bem pessoal, percebam que,
aqui, ele deu um erro.

95
00:05:24,782 --> 00:05:27,314
Ele está falando que não
pode acessar o "dados"

96
00:05:27,314 --> 00:05:29,685
antes de ser inicializado,

97
00:05:29,685 --> 00:05:31,493
Então, ele já entrou
no "catch" direto,

98
00:05:31,493 --> 00:05:33,232
já é um exemplo do erro,

99
00:05:33,232 --> 00:05:38,658
mas isso não fez com que
a aplicação parasse, travasse.

100
00:05:38,658 --> 00:05:40,039
O erro está aqui:

101
00:05:40,039 --> 00:05:45,100
é que eu não estou passando
dentro de aspas simples.

102
00:05:45,100 --> 00:05:50,485
Olha lá, agora ele me trouxe
os dados do cliente,

103
00:05:50,485 --> 00:05:54,058
a última compra dele
e se ele está ativo ou não.

104
00:05:54,058 --> 00:05:58,096
"false", ele está inativo,
"true", ele está ativo.

105
00:05:58,096 --> 00:06:00,258
Então, nós temos aqui

106
00:06:00,258 --> 00:06:03,332
dois clientes ativos
e três clientes inativos.

107
00:06:03,332 --> 00:06:06,727
E olha as datas em que
eles fizeram a última compra.

108
00:06:06,727 --> 00:06:10,589
Por exemplo: esse aqui
foi em 10/02/2020.

109
00:06:10,589 --> 00:06:14,439
Isso te ajuda a poder, depois,
criar uma outra função

110
00:06:14,439 --> 00:06:16,840
que mande mensagem
para esses clientes

111
00:06:16,840 --> 00:06:20,557
para que eles possam
voltar a comprar.

112
00:06:20,557 --> 00:06:23,634
Esse é um exemplo
de "async" e "await".

113
00:06:23,634 --> 00:06:26,403
Agora que você já sabe 
os conceitos de "async" e "await",

114
00:06:26,403 --> 00:06:29,493
convido você a ter
um olhar de usuário

115
00:06:29,493 --> 00:06:31,981
e, ao mesmo tempo, de dev,

116
00:06:31,981 --> 00:06:37,358
trazendo o seu mundo real
ao olhar um aplicativo,

117
00:06:37,358 --> 00:06:38,642
olhar para o código...

118
00:06:38,642 --> 00:06:43,101
Onde está o "await",AO e aonde está o, assim como aplicá lo.