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:25,771
Então esse response
percebem que esses pontos

55
00:03:26,172 --> 00:03:30,943
recebe o arquivo dados e vou colocar
dentro de uma variável chamada dados,

56
00:03:31,277 --> 00:03:35,414
porque a web ela só consegue ler arquivo.

57
00:03:35,414 --> 00:03:38,984
Jeison
Então, tudo o que nós temos aqui por trás

58
00:03:38,984 --> 00:03:43,122
do que o seu navegador pode entender
é aqui o diz.

59
00:03:43,989 --> 00:03:46,826
Então, nessa função
eu fui lá, peguei os dados

60
00:03:46,826 --> 00:03:49,829
e joguei
dentro de uma variável chamada Dados.

61
00:03:49,962 --> 00:03:51,897
Ok, e vou retornar esses dados.

62
00:03:51,897 --> 00:03:55,067
Vou retornar tudo o que estiver
dentro desse arquivinho aqui.

63
00:03:55,868 --> 00:03:56,869
Ótimo.

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

65
00:04:01,807 --> 00:04:06,412
Chamamos isso de pro mais,
que é uma promessa e uma garantia

66
00:04:06,612 --> 00:04:10,950
de que se os dados forem lidos
corretamente, vai dar certo.

67
00:04:10,950 --> 00:04:14,153
Vai mostrar tudo bonitinho,
senão ele vai apresentar um erro.

68
00:04:14,453 --> 00:04:15,488
Então vamos lá.

69
00:04:15,488 --> 00:04:18,157
Eu trago aqui a minha lista de dados,

70
00:04:18,157 --> 00:04:21,694
que é o nome da minha função, e aí aqui
eu coloco o ponto B.

71
00:04:21,927 --> 00:04:27,099
Então dados aqui contém
todos aqueles arquivos lá

72
00:04:28,267 --> 00:04:30,002
dados, faço um

73
00:04:30,002 --> 00:04:33,005
console log e apresento todos os dados
aqui na minha tela.

74
00:04:33,739 --> 00:04:38,177
Se não acontecer isso,
ele vai me trazer uma mensagem de erro.

75
00:04:38,177 --> 00:04:42,681
Ou seja, se os dados tiverem corrompidos
ou não estiverem no formato correto,

76
00:04:43,082 --> 00:04:47,186
ele já vai entrar aqui nesse get
e vai apresentar como erro.

77
00:04:47,753 --> 00:04:50,189
Esse é um exemplo de criar

78
00:04:50,189 --> 00:04:53,192
uma função com assim, que ao invés

79
00:04:53,792 --> 00:04:56,795
é o que vai acontecer
quando ele tiver com esse erro,

80
00:04:56,962 --> 00:04:59,965
ele vai fazer o erro bonitinho,
sem problemas

81
00:05:00,199 --> 00:05:02,768
de travar a sua página.

82
00:05:02,768 --> 00:05:05,771
Num modo síncrono, ele travava a página.

83
00:05:05,871 --> 00:05:09,975
Se deu erro, ele vai travar a página,
vai deixar você sair dela.

84
00:05:09,975 --> 00:05:15,214
Como nós estamos falando de um assíncrono,
eu consigo manipular a minha página,

85
00:05:15,648 --> 00:05:19,718
limpar ou resetar
e iniciar minha função novamente.

86
00:05:20,119 --> 00:05:21,587
Então vamos lá.

87
00:05:21,587 --> 00:05:25,024
Bem pessoal,
percebam que aqui ele deu um erro.

88
00:05:25,024 --> 00:05:28,661
Ele está falando que não pode acessar
o dados A pode ser inicializado,

89
00:05:29,862 --> 00:05:30,229
então ele já

90
00:05:30,229 --> 00:05:33,232
entrou no cacete direto,
já é um exemplo do erro,

91
00:05:33,399 --> 00:05:38,504
mas isso não fez com que a minha aplicação
parasse, travasse.

92
00:05:38,937 --> 00:05:40,039
O erro está aqui.

93
00:05:40,039 --> 00:05:44,209
É que eu não estou passando
dentro de aspas simples

94
00:05:45,611 --> 00:05:49,782
agora ele me trouxe os dados do cliente.

95
00:05:50,783 --> 00:05:53,786
A última compra dele é se ele está ativo
ou não.

96
00:05:54,219 --> 00:05:57,990
False Ele está inativo, ele está ativo.

97
00:05:58,390 --> 00:06:00,426
Então nós temos aqui

98
00:06:00,426 --> 00:06:03,495
dois clientes
ativos e três clientes inativos.

99
00:06:03,495 --> 00:06:07,699
E olha as datas que eles fizeram
a última compra, por exemplo.

100
00:06:07,699 --> 00:06:10,702
Isso aqui desde dois 2020.

101
00:06:10,803 --> 00:06:14,439
Isso ajuda
você a poder depois criar uma outra função

102
00:06:14,740 --> 00:06:18,010
que manda e mensagem para esses clientes
para que eles possam

103
00:06:19,044 --> 00:06:20,779
voltar a comprar.

104
00:06:20,779 --> 00:06:22,314
Esse é um exemplo.

105
00:06:22,314 --> 00:06:23,715
É assim que a gente.

106
00:06:23,715 --> 00:06:27,886
Agora que você já sabe os conceitos de
assim que eu convido você a ter

107
00:06:27,886 --> 00:06:31,490
um olhar de usuário e ao mesmo tempo de

108
00:06:31,490 --> 00:06:34,660
deve trazendo o seu mundo real.

109
00:06:35,294 --> 00:06:36,895
Ao olhar um aplicativo

110
00:06:37,930 --> 00:06:39,097
para o código aonde

111
00:06:39,097 --> 00:06:43,101
está o
AO e aonde está o, assim como aplicá lo.