Após a breve introdução às promessas na palestra anterior,
vamos passar para o nosso próximo exercício onde vamos
fazer uso de promessas dentro da nossa aplicação angular.
Em particular, as promessas são uma forma essencial de lidar com os atrasos, especialmente quando
você precisa acessar e obter os dados de um servidor
antes de ser entregue ao componente através do seu serviço.
Assim, os serviços muitas vezes retornam promessas para
os componentes quando os componentes chamam os métodos de serviço,
e depois quando a promessa
resolve, então os componentes terão os resultados disponíveis para eles.
Vamos reconfigurar os serviços que temos dentro
nossa aplicação angular para retornar
promessas e, em seguida, vamos reconfigurar
nossos componentes para ser capaz de lidar com as promessas.
Nosso primeiro passo neste exercício é reconfigurar todos os serviços para retornar promessas.
Assim, cada um dos métodos dentro do nosso serviço em vez de retornar
o valor imediatamente ele irá retornar promessas.
Então, como configuramos nossos serviços para retornar promessas?
Então, indo para o arquivo dishservice.ts,
o método getDates aqui retornará uma promessa em vez da matriz dish.
Então, nós configuramos o método getDish para retornar
promessa, colocando este objeto prato dentro de uma promessa.
O que isso significa é que se a promessa resolver, então o resultado entregue
pela promessa GetDish seria uma matriz de pratos.
Então, dentro do seu componente
você receberá a matriz de pratos se a promessa resultar corretamente.
Agora que configuramos o GetDistes para retornar uma promessa,
precisamos reconfigurar o código para
que esta matriz de pratos seja retornada como parte de uma promessa.
Agora, já que temos o resultado já disponível para nós,
Eu vou usar o método de atalho de
retornando a promessa resolvendo a promessa imediatamente.
Agora, obviamente, isso funciona bem se você tiver os resultados imediatamente disponíveis com você.
Mas, quando você reconfigurar seu serviço para
ser capaz de ir e buscar esses dados de um servidor,
então teremos que reescrever este código para lidar com o fato de que
o serviço não irá retornar o resultado
imediatamente em vez disso você terá que esperar por algum tempo.
No próximo exercício,
vamos simular o atraso usando um método JavaScript para que ele lhe dê
uma sensação do que significa lidar com atrasos em receber um resultado de uma promessa.
Agora que configuramos o GetDistes para retornar a promessa,
da mesma forma, vamos reconfigurar os dois métodos restantes.
Então eu vou copiar esta promessa de
aqui e, em seguida, simplesmente anexar isso para os dois restantes lá,
para que eu vou convertê-los também para retornar
promessas e, em seguida, é claro, o que nós
temos aqui deve ser fechado dentro da promessa resolver.
Então eu vou apenas copiar a promessa resolve
e colocar isso dentro da resolução aqui.
Da mesma forma, para o prato em destaque vou colocar isso dentro da promessa resolver.
Agora, meu serviço de prato está configurado para retornar promessas.
Obviamente, isso também significa que eu preciso ir para
meus componentes e, em seguida, reconfigurar os componentes para ser capaz de lidar
com o fato de que eles não estão recebendo os dados
imediatamente em vez disso eles estão recebendo uma promessa e então eles
terão que implementar o método então dentro
que a promessa quando resultar irá entregar os dados para você.
Então, agora que configuramos o serviço de prato,
sabemos um lugar onde o serviço está sendo usado ativamente e que é componente de menu.
Então deixe-me mostrar-lhe como vamos reconfigurar
o componente para ser capaz de lidar com a promessa.
Então, quando você vai para o menucomponent.ts você vai imediatamente
notar que há uma linha vermelha rabugenta sob pratos porque,
como você vê, agora,
o DishService.GetDates está devolvendo uma promessa e então aqui você tem,
a promessa sendo atribuída a um objeto de matriz de prato e isso não é Correto.
Como reconfiguramos esse código?
Então, como mencionei,
quando reconfiguramos o código,
precisamos implementar o então e o catch para o getDistes.
Então, deixe-me ir em frente e implementar apenas o então neste momento,
para o método getDistes porque o catch pode ser implementado mais tarde.
Agora sabemos que a promessa sempre resolverá corretamente,
então vamos implementar o método então aqui,
e então, dentro do método então,
Eu vou receber o objeto pratos chegando quando a promessa resolver.
E quando isso é pratos objeto vem como um parâmetro,
então você vê que eu estou escrevendo uma função de seta aqui,
Eu só vou cortar isso e incluir isso aí mesmo.
Lá vai você. É assim que seu componente agora pode
assumir a promessa e, em seguida, recuperar os resultados quando a promessa é resolvida.
Você pode ver que temos o DishService GetDishService e, em seguida, o método
mudar para ele e pelo qual quando o então é chamado,
quando a promessa resolve do outro lado,
então os pratos serão entregues a você porque o método getDishDishES
está retornando uma promessa, mas o resultado será uma matriz de pratos.
Essa matriz de prato vem como um parâmetro aqui então eu estou escrevendo uma função de seta
aqui onde eu estou atribuindo que este pratos para pratos.
Então, quando esta promessa resolver, em seguida, os pratos serão
ser atribuído a este prato. É isso.
Agora meu componente de menu está pronto para lidar com a promessa.
Claro, para lidar com o erro, você também precisa
encadear o método catch no método getDistes.
Então, o então e o catch são métodos que
a promessa fornece para você e então você implementa isso e dentro
que você fornecerá a função que lida com
a situação quando a promessa resolve ou quando a promessa rejeita com um erro.
Agora, da mesma forma, devemos reconfigurar o método de detalhe do prato
e também o componente doméstico para lidar com o fato de que
o DishService agora está entregando promessas em vez de entregar os valores imediatamente.
Enquanto estamos nisso,
podemos muito bem reconfigurar tanto o líder quanto o serviço de promoção também.
Então vou deixá-lo como um exercício para você completar,
atualizando tanto o serviço líder quanto o serviço de promoção para poder
entregar as promessas correspondentes.
Além disso, você terá que reconfigurar
o código de script do tipo de componente no componente about no componente de detalhe do prato,
no componente home para lidar com o fato de que você está
agora recebendo promessas em vez dos resultados reais.
Então eu vou deixar você completar essa parte em vez de ilustrar tudo isso em detalhes,
Eu lhe mostrei um passo com o componente detalhe prato.
Conclua as etapas com o líder e o serviço de promoção,
e configure os componentes correspondentes de acordo.
Deixe-me orientá-lo rapidamente através das atualizações que você precisa concluir.
Então, como você vê o serviço de líderes Eu já atualizei com a promessa.
Como você pode ver aqui,
todos os métodos agora foram atualizados para retornar
promessas assim como fizemos com o DishService.
Da mesma forma, os serviços de promoção também atualizaram para
promessas de retorno de todos os métodos lá.
Agora, indo para o componente sobre,
você veria que no componente sobre também temos configurado para
receber os valores dentro do então da promessa lá.
Da mesma forma, no componente de detalhe do prato você notaria que eu tenho
reconfigurou isso para lidar com a promessa lá.
Da mesma forma, no componente home,
você notaria que dentro do componente home
todos os três métodos aqui: getFeaturedDish,
FeaturedPromotion e featuredLeader foram atualizados,
com o então anexado a cada um deles para lidar com a promessa.
O código é muito parecido com o que eu ilustrei com o componente de menu.
Uma vez que você concluir isso,
vamos dar uma olhada rápida em nosso aplicativo.
Indo para o nosso aplicativo no navegador,
você não verá nenhuma diferença no aplicativo.
Ele funciona exatamente da mesma maneira que antes,
exceto agora ele está usando promessas quando
os serviços são implementados e seus componentes
estão lidando com as promessas quando eles são resolvidos.
Assim, o componente de menu funcionando corretamente e
também o componente de detalhe prato também funciona corretamente.
Com isso, completamos este exercício.
Neste exercício, vimos como conseguimos atualizar nossos serviços para
entregar promessas e também atualizamos nossos componentes para podermos lidar com promessas.
Isso conclui este exercício.
Este é um bom momento para você fazer um commit git com a mensagem 'Promessa parte um'.