< Return to Video

vimeo.com/.../1075761081

  • 0:08 - 0:10
    Você está comprando
    um produto na Amazon
  • 0:10 - 0:11
    e, ao finalizar essa compra,
  • 0:11 - 0:13
    esse produto
    vai para a separação.
  • 0:13 - 0:15
    Enquanto ele está
    em separação,
  • 0:15 - 0:20
    você pode comprar outros produtos
    e realizar outros pedidos.
  • 0:20 - 0:24
    Isso é uma visão de usuário.
    E como desenvolvedor?
  • 0:24 - 0:26
    No modo desenvolvedor,
  • 0:26 - 0:30
    utilizamos duas sintaxes
    muito poderosas:
  • 0:30 - 0:32
    o "async" e o "await".
  • 0:32 - 0:34
    Pensando no exemplo
    da Amazon,
  • 0:34 - 0:38
    o "async" é quando
    você finaliza o pedido.
  • 0:38 - 0:43
    Já o "await" é a espera
    da separação desse pedido.
  • 0:43 - 0:46
    Enquanto isso,
    você pode comprar outras coisas,
  • 0:46 - 0:49
    pode colocar
    outros produtos no carrinho
  • 0:49 - 0:51
    e até mesmo comprar
    o mesmo produto,
  • 0:51 - 0:55
    sem atrapalhar o pedido
    que já está em andamento.
  • 0:55 - 1:00
    Isso é uma forma de esperar
    outras requisições serem executadas.
  • 1:00 - 1:04
    Vamos colocar em prática
    os conceitos de "async" e "await".
  • 1:04 - 1:08
    Nesse exemplo,
    vamos aplicar uma lista
  • 1:08 - 1:12
    na qual eu consigo
    trazer clientes inativos
  • 1:12 - 1:14
    e quando foi a última
    compra que eles fizeram.
  • 1:14 - 1:15
    Vamos ao código?
  • 1:15 - 1:17
    Na estrutura do código,
  • 1:17 - 1:21
    temos aqui o nosso HTML
    chamando o script,
  • 1:21 - 1:27
    temos aqui o código do script
    já pronto que está no seu material,
  • 1:27 - 1:32
    e um arquivo novo,
    que é um JSON,
  • 1:32 - 1:36
    com os dados dos clientes
    que eu preciso trazer,
  • 1:36 - 1:41
    que estão inativos,
    e quando foi a última compra deles.
  • 1:41 - 1:45
    Vou explicar linha por linha
    para que vocês possam entender.
  • 1:45 - 1:47
    Bem, vamos começar
    pelo script.
  • 1:47 - 1:51
    Primeiro é criado uma função listar dados,
  • 1:52 - 1:56
    mas antes eu coloca a palavra assim,
  • 1:57 - 2:02
    porque esta função vai executar
    de forma assíncrona.
  • 2:02 - 2:07
    Com isso, essa função
    quando começar a ser executada,
  • 2:07 - 2:11
    ela não vai ter problema em executar
    outras operações.
  • 2:12 - 2:15
    Na segunda linha nós temos a requisição,
    então por exemplo,
  • 2:16 - 2:19
    criei uma variável chamado response
    que vai ter
  • 2:20 - 2:23
    a outra palavra chamada ao UI.
  • 2:23 - 2:26
    Nesse caso aqui, ele vai esperar.
  • 2:26 - 2:28
    Esperar o quê?
  • 2:28 - 2:32
    Esse método fetch que vai até o arquivo
  • 2:32 - 2:36
    dado o ponto,
    diz O que é exatamente esse arquivo aqui?
  • 2:37 - 2:41
    Aqui poderia ser também
    uma requisição HTTP
  • 2:41 - 2:44
    como placeholder
  • 2:44 - 2:47
    que está no material de vocês
    como requisição.
  • 2:47 - 2:51
    Aqui eu to dando exemplo como arquivo,
    porque o assim que eu
  • 2:51 - 2:57
    ele ler arquivos ou requisições http
    no material de vocês
  • 2:57 - 3:02
    já tem um exemplo como requisição
    e aqui estou fazendo um exemplo prático.
  • 3:02 - 3:04
    Lendo um arquivo.
  • 3:04 - 3:08
    Então nesse exemplo, o ao item vai esperar
  • 3:08 - 3:11
    o frete ir até onde irão ponto
  • 3:11 - 3:16
    o dados Ponto de irão ler toda
    todos esses dados aqui
  • 3:17 - 3:22
    ele traz joga dentro dessa variável aqui
    o que eu estou criando chamada dados.
  • 3:22 - 3:26
    Então esse response
    percebem que esses pontos
  • 3:26 - 3:31
    recebe o arquivo dados e vou colocar
    dentro de uma variável chamada dados,
  • 3:31 - 3:35
    porque a web ela só consegue ler arquivo.
  • 3:35 - 3:39
    Jeison
    Então, tudo o que nós temos aqui por trás
  • 3:39 - 3:43
    do que o seu navegador pode entender
    é aqui o diz.
  • 3:44 - 3:47
    Então, nessa função
    eu fui lá, peguei os dados
  • 3:47 - 3:50
    e joguei
    dentro de uma variável chamada Dados.
  • 3:50 - 3:52
    Ok, e vou retornar esses dados.
  • 3:52 - 3:55
    Vou retornar tudo o que estiver
    dentro desse arquivinho aqui.
  • 3:56 - 3:57
    Ótimo.
  • 3:57 - 4:02
    Para isso acontecer
    eu tenho que fazer uma promessa.
  • 4:02 - 4:06
    Chamamos isso de pro mais,
    que é uma promessa e uma garantia
  • 4:07 - 4:11
    de que se os dados forem lidos
    corretamente, vai dar certo.
  • 4:11 - 4:14
    Vai mostrar tudo bonitinho,
    senão ele vai apresentar um erro.
  • 4:14 - 4:15
    Então vamos lá.
  • 4:15 - 4:18
    Eu trago aqui a minha lista de dados,
  • 4:18 - 4:22
    que é o nome da minha função, e aí aqui
    eu coloco o ponto B.
  • 4:22 - 4:27
    Então dados aqui contém
    todos aqueles arquivos lá
  • 4:28 - 4:30
    dados, faço um
  • 4:30 - 4:33
    console log e apresento todos os dados
    aqui na minha tela.
  • 4:34 - 4:38
    Se não acontecer isso,
    ele vai me trazer uma mensagem de erro.
  • 4:38 - 4:43
    Ou seja, se os dados tiverem corrompidos
    ou não estiverem no formato correto,
  • 4:43 - 4:47
    ele já vai entrar aqui nesse get
    e vai apresentar como erro.
  • 4:48 - 4:50
    Esse é um exemplo de criar
  • 4:50 - 4:53
    uma função com assim, que ao invés
  • 4:54 - 4:57
    é o que vai acontecer
    quando ele tiver com esse erro,
  • 4:57 - 5:00
    ele vai fazer o erro bonitinho,
    sem problemas
  • 5:00 - 5:03
    de travar a sua página.
  • 5:03 - 5:06
    Num modo síncrono, ele travava a página.
  • 5:06 - 5:10
    Se deu erro, ele vai travar a página,
    vai deixar você sair dela.
  • 5:10 - 5:15
    Como nós estamos falando de um assíncrono,
    eu consigo manipular a minha página,
  • 5:16 - 5:20
    limpar ou resetar
    e iniciar minha função novamente.
  • 5:20 - 5:22
    Então vamos lá.
  • 5:22 - 5:25
    Bem pessoal,
    percebam que aqui ele deu um erro.
  • 5:25 - 5:29
    Ele está falando que não pode acessar
    o dados A pode ser inicializado,
  • 5:30 - 5:30
    então ele já
  • 5:30 - 5:33
    entrou no cacete direto,
    já é um exemplo do erro,
  • 5:33 - 5:39
    mas isso não fez com que a minha aplicação
    parasse, travasse.
  • 5:39 - 5:40
    O erro está aqui.
  • 5:40 - 5:44
    É que eu não estou passando
    dentro de aspas simples
  • 5:46 - 5:50
    agora ele me trouxe os dados do cliente.
  • 5:51 - 5:54
    A última compra dele é se ele está ativo
    ou não.
  • 5:54 - 5:58
    False Ele está inativo, ele está ativo.
  • 5:58 - 6:00
    Então nós temos aqui
  • 6:00 - 6:03
    dois clientes
    ativos e três clientes inativos.
  • 6:03 - 6:08
    E olha as datas que eles fizeram
    a última compra, por exemplo.
  • 6:08 - 6:11
    Isso aqui desde dois 2020.
  • 6:11 - 6:14
    Isso ajuda
    você a poder depois criar uma outra função
  • 6:15 - 6:18
    que manda e mensagem para esses clientes
    para que eles possam
  • 6:19 - 6:21
    voltar a comprar.
  • 6:21 - 6:22
    Esse é um exemplo.
  • 6:22 - 6:24
    É assim que a gente.
  • 6:24 - 6:28
    Agora que você já sabe os conceitos de
    assim que eu convido você a ter
  • 6:28 - 6:31
    um olhar de usuário e ao mesmo tempo de
  • 6:31 - 6:35
    deve trazendo o seu mundo real.
  • 6:35 - 6:37
    Ao olhar um aplicativo
  • 6:38 - 6:39
    para o código aonde
  • 6:39 - 6:43
    está o
    AO e aonde está o, assim como aplicá lo.
Title:
vimeo.com/.../1075761081
Video Language:
Portuguese, Brazilian
Duration:
06:47

Portuguese, Brazilian subtitles

Revisions Compare revisions