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:35,468
Pensando no exemplo da Amazon, assim

11
00:00:35,869 --> 00:00:38,972
é quando você finaliza o pedido ou alguém

12
00:00:39,539 --> 00:00:43,009
a espera da separação desse pedido.

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

14
00:00:46,479 --> 00:00:50,517
como por outros produtos no carrinho,
até mesmo comprar o mesmo produto,

15
00:00:50,950 --> 00:00:54,354
não atrapalhando o pedido
que já está em andamento.

16
00:00:55,054 --> 00:00:59,926
Isso é uma forma de esperar
outras requisições serem executadas.

17
00:01:00,260 --> 00:01:03,563
Vamos colocar em prática o conceito de
Assim que a Wish.

18
00:01:04,030 --> 00:01:05,698
Nesse exemplo,

19
00:01:05,698 --> 00:01:08,468
vamos aplicar uma lista

20
00:01:08,468 --> 00:01:11,437
aonde eu consigo trazer clientes inativos

21
00:01:11,938 --> 00:01:14,540
e quando foi a última compra que ele fez?

22
00:01:14,540 --> 00:01:15,708
Vamos ao código.

23
00:01:15,708 --> 00:01:20,413
Na estrutura do código
temos aqui o nosso HTML chamando o script.

24
00:01:21,347 --> 00:01:24,217
Temos aqui já o código do script

25
00:01:24,217 --> 00:01:27,353
pronto que está no seu material e

26
00:01:28,621 --> 00:01:31,624
um arquivo novo que é onde irão

27
00:01:32,358 --> 00:01:34,627
com os dados dos clientes

28
00:01:34,627 --> 00:01:37,630
que eu preciso trazer que estão inativos.

29
00:01:37,864 --> 00:01:40,733
E quando foi a última compra deles?

30
00:01:40,733 --> 00:01:44,103
Vou explicar linha por linha
para que vocês possam entender.

31
00:01:44,771 --> 00:01:46,873
Bem, vamos começar pelo script.

32
00:01:46,873 --> 00:01:50,977
Primeiro é criado uma função listar dados,

33
00:01:51,678 --> 00:01:56,049
mas antes eu coloca a palavra assim,

34
00:01:56,949 --> 00:02:01,921
porque esta função vai executar
de forma assíncrona.

35
00:02:02,455 --> 00:02:06,826
Com isso, essa função
quando começar a ser executada,

36
00:02:07,293 --> 00:02:11,330
ela não vai ter problema em executar
outras operações.

37
00:02:11,931 --> 00:02:15,401
Na segunda linha nós temos a requisição,
então por exemplo,

38
00:02:15,768 --> 00:02:19,238
criei uma variável chamado response
que vai ter

39
00:02:20,039 --> 00:02:23,042
a outra palavra chamada ao UI.

40
00:02:23,309 --> 00:02:26,312
Nesse caso aqui, ele vai esperar.

41
00:02:26,379 --> 00:02:27,680
Esperar o quê?

42
00:02:27,680 --> 00:02:31,984
Esse método fetch que vai até o arquivo

43
00:02:31,984 --> 00:02:36,322
dado o ponto,
diz O que é exatamente esse arquivo aqui?

44
00:02:36,989 --> 00:02:40,593
Aqui poderia ser também
uma requisição HTTP

45
00:02:41,194 --> 00:02:43,596
como placeholder

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

47
00:02:46,999 --> 00:02:50,703
Aqui eu to dando exemplo como arquivo,
porque o assim que eu

48
00:02:51,437 --> 00:02:56,909
ele ler arquivos ou requisições http
no material de vocês

49
00:02:56,909 --> 00:03:01,948
já tem um exemplo como requisição
e aqui estou fazendo um exemplo prático.

50
00:03:02,448 --> 00:03:04,150
Lendo um arquivo.

51
00:03:04,150 --> 00:03:07,720
Então nesse exemplo, o ao item vai esperar

52
00:03:08,120 --> 00:03:11,123
o frete ir até onde irão ponto

53
00:03:11,290 --> 00:03:15,995
o dados Ponto de irão ler toda
todos esses dados aqui

54
00:03:16,729 --> 00:03:22,001
ele traz joga dentro dessa variável aqui
o que eu estou criando chamada dados.

55
00:03:22,435 --> 00:03:25,771
Então esse response
percebem que esses pontos

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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