No exercício anterior,
atualizamos nossos serviços de aplicativos Angular para usar promessas,
e também atualizar os componentes para
lidar com as promessas que são devolvidas pelos serviços.
Neste exercício, que é uma extensão do exercício anterior,
vamos simular um atraso de tempo para a promessa resolver.
No exercício anterior,
as promessas estavam resolvendo imediatamente.
Mas na vida real,
quando você solicita dados de um serviço e o serviço entrega uma promessa,
o serviço, por sua vez,
precisa ir e buscar os dados de um servidor back-end,
e isso levará tempo.
Então, para que a promessa resolva,
haverá uma certa quantidade de tempo de atraso.
Agora, como lidamos com esse atraso de tempo no lado do nosso componente?
Como mantemos o usuário informado sobre o fato de que há
um atraso de tempo envolvido antes que os dados possam ser buscados e mostrados ao usuário?
Como lidamos com o atraso em si?
Agora, neste exercício,
Eu vou simular o atraso de tempo usando um método JavaScript dentro dos meus serviços,
e, em seguida, também atualizar os componentes para ser capaz de mostrar uma mensagem para o usuário usando
o componente giratório progresso material angular para mostrar um disco giratório em
o modelo para manter o usuário informado sobre
o fato de que os dados estão sendo obtidos do servidor,
e nós renderizaremos na exibição assim que os dados se tornarem
disponíveis para o componente quando a promessa for resolvida.
Vamos ver como podemos fazer isso neste exercício.
Novamente, voltando ao meu serviço,
aqui tenho o serviço de pratos aberto aqui.
Em vez de ter a promessa resolvida imediatamente,
agora vamos entregar uma promessa e, em seguida, deixar
a promessa resolver após um curto período de tempo.
Então, para fazer isso, essa resolução de promessa não funcionará mais
como mostrado aqui, então eu vou excluir isso.
Em vez disso, quando meu método é chamado,
o método retornará uma promessa criando uma nova promessa.
Você se lembra que quando você criou a nova promessa,
dentro da promessa você teria a função
com resolver e rejeitar como os dois parâmetros.
Agora, eu vou usar apenas a parte de resolução dele.
Então, vou implementar a função dentro da promessa apenas usando uma função de seta aqui.
Então, eu vou dizer resolve,
e eu vou simular um curto atraso para que esta resolução ocorra.
Deixe-me escrever um comentário.
Simula a latência do servidor com atraso de dois segundos.
Então, como simulamos isso?
Então, usamos o método setTimeout
que está disponível em JavaScript.
Então, para o método setTimeout,
novamente, vou implementar uma função de seta,
o método setTimeout não tem nenhum parâmetro que precisamos lá.
Então, quando este setTimeout é executado,
então ele vai resolver entregar os pratos.
Então, deixe-me cortar este prato e, em seguida, colá-lo nos pratos.
Então, você vê que este resultado está agora retornando o resultado aqui,
e este resultado será retornado após dois segundos de atraso aqui.
Com esta atualização, nossa promessa agora será resolvida após dois segundos.
Então, o método setTimeout disponível em JavaScript simula um pequeno atraso.
Então, como você pode ver,
ele simula o curto atraso e recebe um retorno de chamada aqui.
Esta chamada de retorno como você pode ver,
Eu implementei isso como uma função de seta aqui.
Então, sem parâmetros e, em seguida, quando isso resolver,
ele vai resolver retornar os pratos eo atraso para isso é de dois segundos.
Então, esta parte é a função,
e este é o tempo de atraso que temos aqui.
Então, agora, minha promessa vai resolver após um atraso de dois segundos.
Da mesma forma, vamos atualizar os dois métodos restantes aqui.
Então, para fazer isso,
Eu só vou copiar
essa parte e então simplesmente colar isso lá,
e você notaria que
vai e eu preciso dizer 2000.
Então, que completa o método setTimeout lá.
Agora, teremos
o parêntese de fechamento seguido.
Da mesma forma, deixe-me atualizar o último método também.
Então, você vê que ele resolve os pratos,
e depois de dois segundos de atraso,
e feche o método para lá.
É isso. Então, agora meu serviço de prato é
atualizado para resolver todas as promessas após dois segundos de atraso.
Agora, da mesma forma, atualize o serviço líder e
o serviço de promoção usando o mesmo padrão que eu mostrei aqui.
A segunda parte da questão é de alguma forma manter o usuário informado sobre
o fato de que há um atraso de tempo envolvido na obtenção dos resultados,
e assim a visão será atualizada assim que os resultados forem obtidos.
Você já viu esse tipo de comportamento em muitos aplicativos,
incluindo aplicativos móveis onde você teria um girador mostrado na tela para manter
o usuário informado sobre o fato de que algo está sendo carregado de trás
as cenas e quando os resultados se tornam disponíveis,
a vista será atualizado.
Então, vamos usar uma abordagem semelhante dentro de nossos componentes.
Para nos ajudar com isso,
vamos usar o componente girador progresso de material angular.
Então, para usar o componente de spinner progresso,
vamos primeiro ir para o arquivo app
module.ts e, em seguida, importar o módulo de spinner progresso lá.
Então, indo para o app module.ts.
Vamos primeiro subir aqui para importar
o MatProgressSpinnerModule de angular/material/progress-spinner.
Uma vez que tenhamos importado isso para o arquivo,
então vamos para o decorador módulo ng para as importações,
e, em seguida, adicionar no MatProgressSpinnerModule nisso.
Uma vez que concluímos isso,
então podemos atualizar os componentes para fazer uso do girador progresso.
Então aqui, vou mostrar-lhe um exemplo por
ilustrando como podemos atualizar o componente de menu para mostrar essa informação.
Então, vá para o arquivo de layout de componentes do menu.
Aqui, vemos que estamos mostrando o menu usando a lista de grade aqui.
Então, o que vamos fazer é, para este div,
Eu vou usar a diretiva nGif e dizer que isso deve ser exibido.
O menu deve ser exibido somente quando os pratos não são nulos.
Então, inicialmente, em seu arquivo de script de guia de componentes,
você verá que quando você for para o arquivo de script de guia de componentes você verá que
seus pratos são atualmente apenas um objeto indefinido aqui,
e que os pratos serão atribuídos ao valor dos pratos somente quando os problemas resolverem.
Então, até esse ponto,
os pratos serão um valor indefinido.
Então, podemos aproveitar esse fato,
e, em seguida, re-projetar nosso modelo de tal forma que,
nós diríamos mostrar este div somente se os pratos não são um indefinido ou não um objeto nulo.
Quando é desconhecido,
então vou usar uma segunda div aqui com o atributo oculto associado a ele.
Então, você já viu oculto sendo usado antes.
Então, eu vou usar isso para definir o tronco.
Então, o que isso significa é que se os pratos não são nulos,
então este div será escondido.
Se os pratos forem nulos,
então este div será mostrado.
Então, agora você vê que você tem duas divs aqui.
O primeiro será mostrado se os pratos não são matriz de prato nulo.
Caso contrário, a segunda parte será mostrada.
Então, com esta pequena mudança no meu modelo,
Eu sou capaz de esconder o menu até o ponto que a matriz de pratos fica disponível para mim,
e quando a matriz de pratos fica disponível,
então eu vou mostrar o menu.
Até esse ponto, eu vou mostrar um mat-spinner.
Que é o girador de progresso indeterminado
que está disponível como um componente de material angular.
Então, isso mostrará como um círculo rotativo na minha visão,
para este componente de menu até o ponto em que os resultados são obtidos,
quando os problemas resolvem.
Além disso, eu também usarei h4, e dentro do h4,
vou dizer carregando, por favor aguarde.
Então, o que acontece é que quando os pratos ainda não estão resolvidos,
o girador e esta mensagem serão mostrados na tela.
No momento em que os pratos ficam disponíveis quando os resultados prometidos,
então o menu será mostrado na tela.
Agora, vamos fazer atualizações semelhantes sobre componente,
o componente doméstico, e o componente detalhe prato também.
Correspondentemente, atualizaremos o serviço líder,
e o serviço de promoção também para simular o atraso de tempo.
Então, usando o padrão que acabei de ilustrar para você,
vá em frente e atualize os serviços e também os modelos correspondentes,
e veremos o resultado depois que terminarmos a atualização.
Depois de concluir as atualizações de todos os serviços e
os modelos correspondentes para os componentes,
deixe-me rapidamente executá-lo através dos arquivos atualizados aqui.
Então, este é o serviço líder.
Então, você pode ver que no serviço líder,
Eu atualizei o GetLeaders para usar o SetTimeout exatamente como fizemos com os pratos,
e o GetLeader e o GetFeaturedLeader também.
Da mesma forma, no serviço de promoção,
atualizamos o id GetPromotions GetPromotion e o getFeaturedPromotion também.
Então, os três serviços agora são atualizados
para causar um atraso de tempo antes que eles retornem o resultado.
Agora, em termos de modelos,
já atualizamos o modelo menu.component.
Vamos olhar para os modelos home.components.
Então, dentro do home.component,
você percebe que quando projetamos o home.component,
já tínhamos configurado os cartões com o prato NGif estrela.
Então, tudo o que precisamos fazer é,
abaixo aqui nós adicionamos um div com
o escondido e prato aqui, mas o girador assim como fizemos com o menu.componente.
Da mesma forma, para a promoção o mat-card já tem o nGif no lugar,
então só precisamos adicionar este div adicional aqui com a promoção oculta lá,
e também para o líder aqui abaixo.
Da mesma forma, indo para o componente de detalhe do prato.
No componente de detalhe do prato,
já tínhamos a lista com o prato NGif para os comentários.
Além disso, o prato nGif para o cartão que exibe os detalhes do prato.
Então, tudo o que precisamos fazer é adicionar neste novo div com o prato escondido aqui,
eo div spinner no lugar.
Da mesma forma, no componente sobre,
quando você entra no componente sobre,
você veria que tínhamos os líderes corporativos aqui,
e já tínhamos a lista com a estrela NGIF com líderes.
Então, tudo o que precisamos fazer é adicionar no div com
escondido e líderes aqui com um girador no lugar. É isso.
Nosso aplicativo está atualizado.
Vamos dar uma olhada no aplicativo atualizado no navegador a seguir.
Indo para o navegador,
você verá que quando você tenta carregar no componente home,
há um curto período de tempo quando você vê o girador na
a tela antes que os cartões sejam carregados.
Da mesma forma, quando você vai para o menu.componente,
você veria o girador no lado esquerdo por
dois segundos antes do menu real é atualizado,
e quando você vai para um prato individual também você vê que
o girador na tela antes que os detalhes do prato são renderizados,
e em o componente sobre também da mesma forma, você verá que,
você terá o círculo giratório lá antes que a informação do líder seja atualizada.
Sempre que nos movemos para qualquer um destes,
você veria um breve atraso semelhante antes que a inflamação seja atualizada na tela.
Então, com isso você vê como você pode lidar com o atraso na obtenção dos resultados,
ou atraso na resolução da promessa do lado do serviço dentro do seu componente
e manter o usuário informado sobre o fato de que há
um curto atraso antes que a tela seja atualizada.
Isso conclui este exercício.
Neste exercício, vimos como podemos simular um curto atraso com nossas promessas.
Resolvendo a partir dos serviços,
e também vimos como manter o usuário informado usando os componentes de material angular do MD spinner
para mostrar na tela por
a duração quando os resultados ainda não estão disponíveis,
que é para a duração até que a promessa seja resolvida.
Isso conclui este exercício.
Este é um bom momento para você fazer um commit git com a promessa de mensagem Parte dois.