Como já aprendemos na lição anterior, o protocolo HTTP
nos permite comunicar entre um cliente e um servidor.
Já vimos alguns detalhes sobre o protocolo HTTP na lição anterior.
Nesta lição, vamos explorar o suporte Angular para HTTP.
Angular suporta HTTP através do cliente Angular HTTP.
Vamos olhar para como podemos aproveitar
o cliente HTTP Angular para comunicação cliente-servidor,
em nossa aplicação Angular.
Os dois exercícios que seguem esta palestra,
vamos explorar o uso prático de
o cliente HTTP Angular dentro da nossa aplicação Angular.
Vamos olhar um pouco dos detalhes do cliente HTTP nesta palestra.
Como seria de esperar,
Angular aproveita o protocolo HTTP para permitir a comunicação entre
nosso cliente Angular e o servidor baseado em HTTP.
A maioria dos navegadores modernos, normalmente usados para suportar
a maneira XMLHttpRequest ou XHR de se comunicar com o servidor.
Cada vez mais, os navegadores estão adotando a API Fetch,
que é um substituto moderno para XMLHttpRequest como
uma maneira de fornecer comunicação entre o navegador e o servidor.
Angular aproveita isso para se comunicar com o servidor usando o cliente HTTP.
Vamos olhar para o uso do cliente HTTP e como podemos usar HttpClientModule,
dentro da nossa aplicação Angular para habilitar a comunicação Client-Server.
Qualquer comunicação entre o cliente e o servidor como esperamos,
será assíncrona na natureza.
Então, o que significa que seu cliente precisa de
para aguardar que os dados sejam entregues a partir do site do servidor.
Consequentemente, seu cliente precisa ser
configurado para lidar com esse atraso na obtenção dos dados.
No módulo anterior em si,
já tínhamos configurado nossos aplicativos cliente para
ser capaz de mostrar o spinner progresso na interface do usuário,
para manter o usuário informado sobre o fato de que há um atraso na obtenção dos dados,
antes que a vista seja renderizada.
Isso vem em nosso auxílio nesta lição,
onde obviamente temos que lidar com o atraso para obter dados do site do servidor.
O acesso aos dados dentro da nossa aplicação Angular,
é sempre melhor delegar esta responsabilidade ao serviço.
Então, deixamos o serviço lidar com a interação com o servidor,
e, em seguida, seu componente obtém os dados chamando os métodos do serviço.
A interação do serviço de componente que já configuramos no módulo anterior.
Então, tudo o que precisamos fazer,
é atualizar nossos serviços para alavancar o módulo HTTP para se comunicar com o servidor,
para obter os dados do servidor e, em seguida,
fornecer os dados para o componente.
O próprio servidor HTTP,
irá retornar os dados para o nosso cliente e
nosso módulo HTTP retorna os dados para o nosso serviço no acompanhamento observável.
Este observável, será então processado e
então retornado como um observável para o nosso componente.
Essa parte já configuramos no módulo anterior.
Então, vamos aproveitar isso para nos permitir rapidamente
deslizando a comunicação HTTP entre o cliente e o servidor,
entre o serviço e o site do servidor,
e, em seguida, o resto da infra-estrutura
que já está no lugar em nossa aplicação angular
pode facilmente lidar com o entrega do observável para o nosso componente,
e o componente que já se inscreve para esse observador.
O efeito adicional com o qual lidaremos,
é como lidar com erros.
Falaremos sobre isso com um pouco mais de detalhes nos slides posteriores.
Então, como já mencionei,
o cliente HTTP retorna um observável.
Então, quando você chamar o módulo HTTP,
assim você vai configurar o seu serviço para fazer uso do módulo HTTP,
e com o módulo HTTP,
ele fornece vários métodos que correspondem aos verbos get,
put, post e delete do protocolo HTTP.
Então, os métodos get, put, post,
e delete são automaticamente suportados pelo módulo HTTP.
Então, você aproveitará esses métodos para ser capaz de executar
essas operações específicas no site do servidor.
Então, quando você emite uma chamada HTTP get,
você está solicitando que os dados sejam entregues do servidor para o cliente.
O cliente HTTP, por sua vez,
irá processar o observável que é entregue através do módulo Angular HTTP,
e, em seguida, entregar que observável para o nosso componente.
Dentro do nosso componente, já subscrevemos
ao observável que é entregue pelo nosso serviço,
e assim lidar com os dados que são enviados através do observável,
é bastante direto para nós.
Se o aplicativo Angular é
comunicando com um servidor que está retornando a resposta no formato JSON,
os clientes Angular HTTP obter método em si
analisa a resposta JSON do servidor em um objeto anônimo.
O próprio cliente, não sabe exatamente como interpretar a forma deste objeto.
Assim, podemos ajudar o cliente HTTP especificando a forma do objeto,
especificando uma declaração de uma classe JavaScript,
que especificam a forma do objeto para que a saída
do get possa ser consumida facilmente pelo aplicativo.
Então, no exercício,
você vai me ver declarando.
Por exemplo, diremos isso.http.get,
e, em seguida, dentro de colchetes angulares,
Eu especifico prato lá.
Assim, dessa forma,
os dados recebidos para a solicitação get do site do servidor serão convertidos em
um objeto prato e, em seguida, podem ser consumidos imediatamente
pelo meu componente quando ele está colocando o conteúdo.
Agora, se você precisar,
você pode obter acesso à resposta completa que vem do site do servidor.
Mas isso seria apenas em circunstâncias específicas,
onde você precisa acessar, por exemplo,
os cabeçalhos da mensagem de resposta HTTP de entrada e assim por diante.
Mas para a maioria dos propósitos,
apenas declarando a forma do objeto,
podemos facilmente obter os dados JSON automaticamente analisados de uma maneira
que pode ser consumido pela nossa aplicação Angular mais facilmente.
Como esperamos, a comunicação
entre o cliente e o servidor não será livre de erros.
Erros vão surgir por muitas razões diferentes.
Pode ser que a conexão não seja estabelecida entre o cliente e o servidor,
pode ser o fato de que a resposta do servidor se perde,
pode ser o fato de que o servidor é incapaz de encontrar os dados que você está procurando,
e assim retorna um 404 indicando que o servidor
não consegue fornecer os dados para você ou dados ausentes no site do servidor, e assim por diante.
Então, seu cliente precisa lidar com todos esses erros.
Então, dentro do nosso serviço,
nós vamos configurar nosso serviço para ser capaz de detectar esse erro.
Então, este é o lugar onde o uso do método catch que é suportado pelo HTTP,
nos permite capturar o erro, processar esse erro,
e, em seguida, enviar a mensagem de erro para o nosso componente,
e, em seguida, deixar o componente lidar com a mensagem de erro em
qualquer maneira que pareça apropriado.
Agora, dentro do nosso componente, por exemplo,
vamos exibir as informações de erro que
obtivemos em nossa visão para indicar ao usuário,
que ocorreu um erro na obtenção dos dados do site do servidor.
Então, dentro do serviço,
precisamos processar esse erro.
Agora, quando esta informação de erro obtida de
o site do servidor através do cliente HTTP é processada dentro do nosso serviço,
então vamos converter isso para uma string,
e essa string será passada para o nosso componente usando o método de lançamento observável.
Então, o método throw nos permite lançar um erro.
Então, porque em nosso componente que
assinar este observável dentro do método de assinatura,
então você precisa lidar com o erro.
Então, na parte de assinatura,
anteriormente vimos apenas uma função sendo especificada para a assinatura,
e que lida com a operação normal.
Mas junto com isso,
também podemos fornecer uma segunda função para a qual o erro será entregue.
Então, você vai me ver configurando a parte de assinatura do meu componente
usando uma segunda função especificada dentro do método subscribe lá,
como um exemplo ilustrado por este código aqui.
Dessa forma, o erro será capturado dentro
meu componente e, em seguida, a mensagem de erro apropriada,
informações serão entregues ao usuário dentro da exibição.
Então, vamos ver isso como parte do segundo exercício nesta lição particular.
Com esta rápida compreensão do cliente HTTP,
vamos agora passar para os exercícios onde vamos empregar
o cliente HTTP Angular fornecido através do módulo HTTP da biblioteca Angular HTTP,
para nos permitir comunicar com o nosso servidor.