A partir da versão 4.3.1 do Angular temos disponível um novo cliente HTTP que trouxe além de diversas otimizações a possibilidade de interceptar requisições HTTP. Neste post iremos criar uma aplicação Angular para demostrar a utilização desse recurso, onde vamos interceptar requisições enviadas e recebidas, adicionar cabeçalho com token de autenticação e tratar erros nas requisições de resposta. O código completo está disponível no Github.
Utilizando o Angular CLI, vamos criar um novo projeto:
ng new http-interception
Após a criação do projeto devemos alterar o arquivo app.module.ts e registrar os módulos HttpClientModule e HTTP_INTERCEPTORS que fazem parte do pacote @angular/common/http:
Fizemos o import dos dois módulos e definimos um provider para o HTTP_INTERCEPTORS. Observe que na criação do provider temos a propriedade useClass que define a nossa classe(ou serviço) que fará a interceptação das requisições.
A classe MyCustomInterceptorService deve implementar a interface HttpInterceptor. Vamos criar a classe como um serviço e fazer a implementação:
ng g service services/MyCustomInterceptor
Após gerar o serviço com o Angular CLI vamos fazer a implementação da interface:
Interceptando as requisições
Para interceptar uma requisição antes que ela seja enviada precisamos clonar o objeto, fazer as modificações e retornar o objeto alterado:
No código acima estamos clonado todas as requisições e incluindo um cabeçalho do tipo Authorization com um token. Essa implementação é útil quando nossa aplicação precisa consumir uma API que faz autenticação via token. Em vez de implementar o cabeçalho com o token em cada serviço que consome a API, definimos na classe que implementa o HttpInterceptor e já vai valer pra todas as requisições.
Interceptando requisições de resposta
Como o módulo HTTP depende da API Observable podemos utilizar o operador “do(…)” para capturar os eventos da requisição e validar se é uma resposta. Para utilizar, precisamos fazer o import do operador utilizando import ‘rxjs/add/operator/do’; segue o código completo:
Capturando erros em respostas
O processo para capturar erros em respostas é bem parecido com o que implementamos utilizando o operador “do(…)”, só que utilizamos o operador “ catch()” e verificamos se a resposta é uma instância de HttpErrorResponse:
Com isso concluímos a implementação do HttpInterceptor, agora precisamos testar. Vamos criar um componente que faça o consumo de uma API externa. Para isso vamos consumir alguns dados fakes do JSONPlaceholder.
Vamos criar o componente:
ng g component components/Post
Após gerar o componente vamos apagar o conteúdo do arquivo app.component.html e fazer a chamada para o componente PostComponent que acabamos de criar:
Com isso, quando a aplicação for executada o nosso componente será carregado junto com o app.component. O próximo passo é editar o arquivo post.component.ts para injetar o HttpClient e implementar as requisições Http:
Fizemos a injeção do cliente Http no método construtor da nossa classe PostComponent, criamos a função getPost que faz uma requisição get para a API do JSONPlaceholder. Para testar, vamos executar a aplicação com o comando ng s e verificar no Chrome DevTools na aba Network a nossa requisição:
A requisição foi efetuada com sucesso e foi adicionado um cabeçalho authorization com o conteúdo “Bearer token” como definimos na serviço MyCustomInterceptorService. Na interceptação da requisição de resposta definimos um console.log(evento); para checar podemos ver na aba Console:
Assim como esperado, também interceptamos a resposta da requisição. Para testar a interceptação de erro basta alterarmos a URL da API pra alguma que não existe, teremos um retorno com o código 404 (Not Found) que irá ser interceptado:
Se esse post foi útil você pode me seguir no Twitter ou site pessoal para mais informações.