1 00:00:03,950 --> 00:00:07,125 No exercício anterior, 2 00:00:07,125 --> 00:00:13,625 atualizamos nossos serviços de aplicativos Angular para usar promessas, 3 00:00:13,625 --> 00:00:15,960 e também atualizar os componentes para 4 00:00:15,960 --> 00:00:19,245 lidar com as promessas que são devolvidas pelos serviços. 5 00:00:19,245 --> 00:00:24,280 Neste exercício, que é uma extensão do exercício anterior, 6 00:00:24,280 --> 00:00:29,485 vamos simular um atraso de tempo para a promessa resolver. 7 00:00:29,485 --> 00:00:31,240 No exercício anterior, 8 00:00:31,240 --> 00:00:33,490 as promessas estavam resolvendo imediatamente. 9 00:00:33,490 --> 00:00:35,540 Mas na vida real, 10 00:00:35,540 --> 00:00:42,934 quando você solicita dados de um serviço e o serviço entrega uma promessa, 11 00:00:42,934 --> 00:00:44,540 o serviço, por sua vez, 12 00:00:44,540 --> 00:00:47,900 precisa ir e buscar os dados de um servidor back-end, 13 00:00:47,900 --> 00:00:49,295 e isso levará tempo. 14 00:00:49,295 --> 00:00:51,310 Então, para que a promessa resolva, 15 00:00:51,310 --> 00:00:53,740 haverá uma certa quantidade de tempo de atraso. 16 00:00:53,740 --> 00:00:59,880 Agora, como lidamos com esse atraso de tempo no lado do nosso componente? 17 00:00:59,880 --> 00:01:04,040 Como mantemos o usuário informado sobre o fato de que há 18 00:01:04,040 --> 00:01:09,810 um atraso de tempo envolvido antes que os dados possam ser buscados e mostrados ao usuário? 19 00:01:10,070 --> 00:01:14,490 Como lidamos com o atraso em si? 20 00:01:14,490 --> 00:01:15,830 Agora, neste exercício, 21 00:01:15,830 --> 00:01:24,820 Eu vou simular o atraso de tempo usando um método JavaScript dentro dos meus serviços, 22 00:01:24,820 --> 00:01:34,190 e, em seguida, também atualizar os componentes para ser capaz de mostrar uma mensagem para o usuário usando 23 00:01:34,190 --> 00:01:41,765 o componente giratório progresso material angular para mostrar um disco giratório em 24 00:01:41,765 --> 00:01:46,130 o modelo para manter o usuário informado sobre 25 00:01:46,130 --> 00:01:51,630 o fato de que os dados estão sendo obtidos do servidor, 26 00:01:51,630 --> 00:01:55,940 e nós renderizaremos na exibição assim que os dados se tornarem 27 00:01:55,940 --> 00:02:00,590 disponíveis para o componente quando a promessa for resolvida. 28 00:02:00,590 --> 00:02:04,680 Vamos ver como podemos fazer isso neste exercício. 29 00:02:04,680 --> 00:02:09,110 Novamente, voltando ao meu serviço, 30 00:02:09,110 --> 00:02:11,990 aqui tenho o serviço de pratos aberto aqui. 31 00:02:11,990 --> 00:02:15,490 Em vez de ter a promessa resolvida imediatamente, 32 00:02:15,490 --> 00:02:18,620 agora vamos entregar uma promessa e, em seguida, deixar 33 00:02:18,620 --> 00:02:22,500 a promessa resolver após um curto período de tempo. 34 00:02:22,500 --> 00:02:26,510 Então, para fazer isso, essa resolução de promessa não funcionará mais 35 00:02:26,510 --> 00:02:31,055 como mostrado aqui, então eu vou excluir isso. 36 00:02:31,055 --> 00:02:34,535 Em vez disso, quando meu método é chamado, 37 00:02:34,535 --> 00:02:38,915 o método retornará uma promessa criando uma nova promessa. 38 00:02:38,915 --> 00:02:42,310 Você se lembra que quando você criou a nova promessa, 39 00:02:42,310 --> 00:02:47,060 dentro da promessa você teria a função 40 00:02:47,060 --> 00:02:52,795 com resolver e rejeitar como os dois parâmetros. 41 00:02:52,795 --> 00:02:56,080 Agora, eu vou usar apenas a parte de resolução dele. 42 00:02:56,080 --> 00:03:02,665 Então, vou implementar a função dentro da promessa apenas usando uma função de seta aqui. 43 00:03:02,665 --> 00:03:04,690 Então, eu vou dizer resolve, 44 00:03:04,690 --> 00:03:13,380 e eu vou simular um curto atraso para que esta resolução ocorra. 45 00:03:13,380 --> 00:03:17,340 Deixe-me escrever um comentário. 46 00:03:17,440 --> 00:03:28,780 Simula a latência do servidor com atraso de dois segundos. 47 00:03:28,780 --> 00:03:31,410 Então, como simulamos isso? 48 00:03:31,410 --> 00:03:37,380 Então, usamos o método setTimeout 49 00:03:37,380 --> 00:03:43,900 que está disponível em JavaScript. 50 00:03:43,900 --> 00:03:45,870 Então, para o método setTimeout, 51 00:03:45,870 --> 00:03:48,115 novamente, vou implementar uma função de seta, 52 00:03:48,115 --> 00:03:52,625 o método setTimeout não tem nenhum parâmetro que precisamos lá. 53 00:03:52,625 --> 00:03:57,565 Então, quando este setTimeout é executado, 54 00:03:57,565 --> 00:04:04,245 então ele vai resolver entregar os pratos. 55 00:04:04,245 --> 00:04:08,480 Então, deixe-me cortar este prato e, em seguida, colá-lo nos pratos. 56 00:04:08,480 --> 00:04:14,650 Então, você vê que este resultado está agora retornando o resultado aqui, 57 00:04:14,650 --> 00:04:22,370 e este resultado será retornado após dois segundos de atraso aqui. 58 00:04:24,880 --> 00:04:31,160 Com esta atualização, nossa promessa agora será resolvida após dois segundos. 59 00:04:31,160 --> 00:04:37,010 Então, o método setTimeout disponível em JavaScript simula um pequeno atraso. 60 00:04:37,010 --> 00:04:38,710 Então, como você pode ver, 61 00:04:38,710 --> 00:04:44,345 ele simula o curto atraso e recebe um retorno de chamada aqui. 62 00:04:44,345 --> 00:04:46,280 Esta chamada de retorno como você pode ver, 63 00:04:46,280 --> 00:04:48,930 Eu implementei isso como uma função de seta aqui. 64 00:04:48,930 --> 00:04:51,730 Então, sem parâmetros e, em seguida, quando isso resolver, 65 00:04:51,730 --> 00:05:01,450 ele vai resolver retornar os pratos eo atraso para isso é de dois segundos. 66 00:05:01,450 --> 00:05:04,185 Então, esta parte é a função, 67 00:05:04,185 --> 00:05:09,180 e este é o tempo de atraso que temos aqui. 68 00:05:09,180 --> 00:05:14,590 Então, agora, minha promessa vai resolver após um atraso de dois segundos. 69 00:05:14,590 --> 00:05:19,870 Da mesma forma, vamos atualizar os dois métodos restantes aqui. 70 00:05:20,720 --> 00:05:22,785 Então, para fazer isso, 71 00:05:22,785 --> 00:05:29,430 Eu só vou copiar 72 00:05:29,430 --> 00:05:35,745 essa parte e então simplesmente colar isso lá, 73 00:05:35,745 --> 00:05:41,325 e você notaria que 74 00:05:41,325 --> 00:05:51,315 vai e eu preciso dizer 2000. 75 00:05:51,315 --> 00:05:56,390 Então, que completa o método setTimeout lá. 76 00:05:56,730 --> 00:06:00,445 Agora, teremos 77 00:06:00,445 --> 00:06:09,705 o parêntese de fechamento seguido. 78 00:06:09,705 --> 00:06:16,725 Da mesma forma, deixe-me atualizar o último método também. 79 00:06:16,725 --> 00:06:20,340 Então, você vê que ele resolve os pratos, 80 00:06:20,340 --> 00:06:26,020 e depois de dois segundos de atraso, 81 00:06:29,270 --> 00:06:32,840 e feche o método para lá. 82 00:06:32,840 --> 00:06:36,965 É isso. Então, agora meu serviço de prato é 83 00:06:36,965 --> 00:06:43,105 atualizado para resolver todas as promessas após dois segundos de atraso. 84 00:06:43,105 --> 00:06:47,810 Agora, da mesma forma, atualize o serviço líder e 85 00:06:47,810 --> 00:06:52,405 o serviço de promoção usando o mesmo padrão que eu mostrei aqui. 86 00:06:52,405 --> 00:06:57,890 A segunda parte da questão é de alguma forma manter o usuário informado sobre 87 00:06:57,890 --> 00:07:03,260 o fato de que há um atraso de tempo envolvido na obtenção dos resultados, 88 00:07:03,260 --> 00:07:07,700 e assim a visão será atualizada assim que os resultados forem obtidos. 89 00:07:07,700 --> 00:07:10,690 Você já viu esse tipo de comportamento em muitos aplicativos, 90 00:07:10,690 --> 00:07:18,020 incluindo aplicativos móveis onde você teria um girador mostrado na tela para manter 91 00:07:18,020 --> 00:07:21,620 o usuário informado sobre o fato de que algo está sendo carregado de trás 92 00:07:21,620 --> 00:07:25,445 as cenas e quando os resultados se tornam disponíveis, 93 00:07:25,445 --> 00:07:27,275 a vista será atualizado. 94 00:07:27,275 --> 00:07:33,750 Então, vamos usar uma abordagem semelhante dentro de nossos componentes. 95 00:07:33,750 --> 00:07:35,530 Para nos ajudar com isso, 96 00:07:35,530 --> 00:07:40,585 vamos usar o componente girador progresso de material angular. 97 00:07:40,585 --> 00:07:43,330 Então, para usar o componente de spinner progresso, 98 00:07:43,330 --> 00:07:47,625 vamos primeiro ir para o arquivo app 99 00:07:47,625 --> 00:07:52,725 module.ts e, em seguida, importar o módulo de spinner progresso lá. 100 00:07:52,725 --> 00:07:55,180 Então, indo para o app module.ts. 101 00:07:55,180 --> 00:08:01,595 Vamos primeiro subir aqui para importar 102 00:08:01,595 --> 00:08:12,150 o MatProgressSpinnerModule de angular/material/progress-spinner. 103 00:08:17,560 --> 00:08:23,025 Uma vez que tenhamos importado isso para o arquivo, 104 00:08:23,025 --> 00:08:28,415 então vamos para o decorador módulo ng para as importações, 105 00:08:28,415 --> 00:08:34,290 e, em seguida, adicionar no MatProgressSpinnerModule nisso. 106 00:08:34,290 --> 00:08:35,650 Uma vez que concluímos isso, 107 00:08:35,650 --> 00:08:42,075 então podemos atualizar os componentes para fazer uso do girador progresso. 108 00:08:42,075 --> 00:08:45,970 Então aqui, vou mostrar-lhe um exemplo por 109 00:08:45,970 --> 00:08:51,555 ilustrando como podemos atualizar o componente de menu para mostrar essa informação. 110 00:08:51,555 --> 00:08:55,505 Então, vá para o arquivo de layout de componentes do menu. 111 00:08:55,505 --> 00:09:02,425 Aqui, vemos que estamos mostrando o menu usando a lista de grade aqui. 112 00:09:02,425 --> 00:09:06,880 Então, o que vamos fazer é, para este div, 113 00:09:06,880 --> 00:09:14,060 Eu vou usar a diretiva nGif e dizer que isso deve ser exibido. 114 00:09:14,060 --> 00:09:18,465 O menu deve ser exibido somente quando os pratos não são nulos. 115 00:09:18,465 --> 00:09:23,670 Então, inicialmente, em seu arquivo de script de guia de componentes, 116 00:09:23,670 --> 00:09:27,325 você verá que quando você for para o arquivo de script de guia de componentes você verá que 117 00:09:27,325 --> 00:09:32,250 seus pratos são atualmente apenas um objeto indefinido aqui, 118 00:09:32,250 --> 00:09:39,255 e que os pratos serão atribuídos ao valor dos pratos somente quando os problemas resolverem. 119 00:09:39,255 --> 00:09:40,995 Então, até esse ponto, 120 00:09:40,995 --> 00:09:43,145 os pratos serão um valor indefinido. 121 00:09:43,145 --> 00:09:45,665 Então, podemos aproveitar esse fato, 122 00:09:45,665 --> 00:09:49,270 e, em seguida, re-projetar nosso modelo de tal forma que, 123 00:09:49,270 --> 00:09:58,955 nós diríamos mostrar este div somente se os pratos não são um indefinido ou não um objeto nulo. 124 00:09:58,955 --> 00:10:01,970 Quando é desconhecido, 125 00:10:01,970 --> 00:10:10,210 então vou usar uma segunda div aqui com o atributo oculto associado a ele. 126 00:10:10,210 --> 00:10:14,310 Então, você já viu oculto sendo usado antes. 127 00:10:14,310 --> 00:10:18,685 Então, eu vou usar isso para definir o tronco. 128 00:10:18,685 --> 00:10:23,350 Então, o que isso significa é que se os pratos não são nulos, 129 00:10:23,350 --> 00:10:25,145 então este div será escondido. 130 00:10:25,145 --> 00:10:26,865 Se os pratos forem nulos, 131 00:10:26,865 --> 00:10:28,405 então este div será mostrado. 132 00:10:28,405 --> 00:10:31,435 Então, agora você vê que você tem duas divs aqui. 133 00:10:31,435 --> 00:10:39,840 O primeiro será mostrado se os pratos não são matriz de prato nulo. 134 00:10:39,840 --> 00:10:42,365 Caso contrário, a segunda parte será mostrada. 135 00:10:42,365 --> 00:10:46,120 Então, com esta pequena mudança no meu modelo, 136 00:10:46,120 --> 00:10:54,745 Eu sou capaz de esconder o menu até o ponto que a matriz de pratos fica disponível para mim, 137 00:10:54,745 --> 00:10:57,350 e quando a matriz de pratos fica disponível, 138 00:10:57,350 --> 00:10:58,660 então eu vou mostrar o menu. 139 00:10:58,660 --> 00:11:06,000 Até esse ponto, eu vou mostrar um mat-spinner. 140 00:11:06,000 --> 00:11:11,295 Que é o girador de progresso indeterminado 141 00:11:11,295 --> 00:11:14,635 que está disponível como um componente de material angular. 142 00:11:14,635 --> 00:11:20,565 Então, isso mostrará como um círculo rotativo na minha visão, 143 00:11:20,565 --> 00:11:27,185 para este componente de menu até o ponto em que os resultados são obtidos, 144 00:11:27,185 --> 00:11:29,605 quando os problemas resolvem. 145 00:11:29,605 --> 00:11:35,330 Além disso, eu também usarei h4, e dentro do h4, 146 00:11:35,330 --> 00:11:43,680 vou dizer carregando, por favor aguarde. 147 00:11:43,680 --> 00:11:48,205 Então, o que acontece é que quando os pratos ainda não estão resolvidos, 148 00:11:48,205 --> 00:11:51,575 o girador e esta mensagem serão mostrados na tela. 149 00:11:51,575 --> 00:11:55,210 No momento em que os pratos ficam disponíveis quando os resultados prometidos, 150 00:11:55,210 --> 00:11:58,015 então o menu será mostrado na tela. 151 00:11:58,015 --> 00:12:03,685 Agora, vamos fazer atualizações semelhantes sobre componente, 152 00:12:03,685 --> 00:12:07,985 o componente doméstico, e o componente detalhe prato também. 153 00:12:07,985 --> 00:12:13,135 Correspondentemente, atualizaremos o serviço líder, 154 00:12:13,135 --> 00:12:18,570 e o serviço de promoção também para simular o atraso de tempo. 155 00:12:18,570 --> 00:12:22,000 Então, usando o padrão que acabei de ilustrar para você, 156 00:12:22,000 --> 00:12:26,660 vá em frente e atualize os serviços e também os modelos correspondentes, 157 00:12:26,660 --> 00:12:31,135 e veremos o resultado depois que terminarmos a atualização. 158 00:12:31,135 --> 00:12:34,710 Depois de concluir as atualizações de todos os serviços e 159 00:12:34,710 --> 00:12:38,255 os modelos correspondentes para os componentes, 160 00:12:38,255 --> 00:12:43,565 deixe-me rapidamente executá-lo através dos arquivos atualizados aqui. 161 00:12:43,565 --> 00:12:45,290 Então, este é o serviço líder. 162 00:12:45,290 --> 00:12:47,320 Então, você pode ver que no serviço líder, 163 00:12:47,320 --> 00:12:54,675 Eu atualizei o GetLeaders para usar o SetTimeout exatamente como fizemos com os pratos, 164 00:12:54,675 --> 00:12:58,880 e o GetLeader e o GetFeaturedLeader também. 165 00:12:58,880 --> 00:13:01,650 Da mesma forma, no serviço de promoção, 166 00:13:01,650 --> 00:13:08,190 atualizamos o id GetPromotions GetPromotion e o getFeaturedPromotion também. 167 00:13:08,190 --> 00:13:11,545 Então, os três serviços agora são atualizados 168 00:13:11,545 --> 00:13:15,955 para causar um atraso de tempo antes que eles retornem o resultado. 169 00:13:15,955 --> 00:13:18,325 Agora, em termos de modelos, 170 00:13:18,325 --> 00:13:22,150 já atualizamos o modelo menu.component. 171 00:13:22,150 --> 00:13:26,140 Vamos olhar para os modelos home.components. 172 00:13:26,140 --> 00:13:27,985 Então, dentro do home.component, 173 00:13:27,985 --> 00:13:31,100 você percebe que quando projetamos o home.component, 174 00:13:31,100 --> 00:13:36,420 já tínhamos configurado os cartões com o prato NGif estrela. 175 00:13:36,420 --> 00:13:38,320 Então, tudo o que precisamos fazer é, 176 00:13:38,320 --> 00:13:40,630 abaixo aqui nós adicionamos um div com 177 00:13:40,630 --> 00:13:47,490 o escondido e prato aqui, mas o girador assim como fizemos com o menu.componente. 178 00:13:47,490 --> 00:13:53,265 Da mesma forma, para a promoção o mat-card já tem o nGif no lugar, 179 00:13:53,265 --> 00:14:00,530 então só precisamos adicionar este div adicional aqui com a promoção oculta lá, 180 00:14:00,530 --> 00:14:05,015 e também para o líder aqui abaixo. 181 00:14:05,015 --> 00:14:09,220 Da mesma forma, indo para o componente de detalhe do prato. 182 00:14:09,220 --> 00:14:10,810 No componente de detalhe do prato, 183 00:14:10,810 --> 00:14:17,105 já tínhamos a lista com o prato NGif para os comentários. 184 00:14:17,105 --> 00:14:23,250 Além disso, o prato nGif para o cartão que exibe os detalhes do prato. 185 00:14:23,250 --> 00:14:30,440 Então, tudo o que precisamos fazer é adicionar neste novo div com o prato escondido aqui, 186 00:14:30,440 --> 00:14:32,970 eo div spinner no lugar. 187 00:14:32,970 --> 00:14:36,295 Da mesma forma, no componente sobre, 188 00:14:36,295 --> 00:14:39,015 quando você entra no componente sobre, 189 00:14:39,015 --> 00:14:42,515 você veria que tínhamos os líderes corporativos aqui, 190 00:14:42,515 --> 00:14:47,330 e já tínhamos a lista com a estrela NGIF com líderes. 191 00:14:47,330 --> 00:14:50,950 Então, tudo o que precisamos fazer é adicionar no div com 192 00:14:50,950 --> 00:14:55,715 escondido e líderes aqui com um girador no lugar. É isso. 193 00:14:55,715 --> 00:14:58,155 Nosso aplicativo está atualizado. 194 00:14:58,155 --> 00:15:04,665 Vamos dar uma olhada no aplicativo atualizado no navegador a seguir. 195 00:15:04,665 --> 00:15:06,530 Indo para o navegador, 196 00:15:06,530 --> 00:15:10,275 você verá que quando você tenta carregar no componente home, 197 00:15:10,275 --> 00:15:14,520 há um curto período de tempo quando você vê o girador na 198 00:15:14,520 --> 00:15:18,730 a tela antes que os cartões sejam carregados. 199 00:15:18,730 --> 00:15:21,520 Da mesma forma, quando você vai para o menu.componente, 200 00:15:21,520 --> 00:15:24,765 você veria o girador no lado esquerdo por 201 00:15:24,765 --> 00:15:28,995 dois segundos antes do menu real é atualizado, 202 00:15:28,995 --> 00:15:33,395 e quando você vai para um prato individual também você vê que 203 00:15:33,395 --> 00:15:38,505 o girador na tela antes que os detalhes do prato são renderizados, 204 00:15:38,505 --> 00:15:42,500 e em o componente sobre também da mesma forma, você verá que, 205 00:15:42,500 --> 00:15:50,400 você terá o círculo giratório lá antes que a informação do líder seja atualizada. 206 00:15:50,400 --> 00:15:53,520 Sempre que nos movemos para qualquer um destes, 207 00:15:53,520 --> 00:16:02,190 você veria um breve atraso semelhante antes que a inflamação seja atualizada na tela. 208 00:16:04,030 --> 00:16:12,860 Então, com isso você vê como você pode lidar com o atraso na obtenção dos resultados, 209 00:16:12,860 --> 00:16:18,874 ou atraso na resolução da promessa do lado do serviço dentro do seu componente 210 00:16:18,874 --> 00:16:21,830 e manter o usuário informado sobre o fato de que há 211 00:16:21,830 --> 00:16:25,495 um curto atraso antes que a tela seja atualizada. 212 00:16:25,495 --> 00:16:28,260 Isso conclui este exercício. 213 00:16:28,260 --> 00:16:35,420 Neste exercício, vimos como podemos simular um curto atraso com nossas promessas. 214 00:16:35,420 --> 00:16:38,575 Resolvendo a partir dos serviços, 215 00:16:38,575 --> 00:16:45,185 e também vimos como manter o usuário informado usando os componentes de material angular do MD spinner 216 00:16:45,185 --> 00:16:49,460 para mostrar na tela por 217 00:16:49,460 --> 00:16:53,900 a duração quando os resultados ainda não estão disponíveis, 218 00:16:53,900 --> 00:16:59,025 que é para a duração até que a promessa seja resolvida. 219 00:16:59,025 --> 00:17:01,470 Isso conclui este exercício. 220 00:17:01,470 --> 00:17:07,770 Este é um bom momento para você fazer um commit git com a promessa de mensagem Parte dois.