Como utilizar o $http interceptor do Angular.JS

Olás, hoje uma dica para como utilizar um $http interceptor do Angular.JS.

Como o próprio nome já diz, o interceptor serve para interceptar requisições http ($http.get, $http.post, etc..) request do angular. Utilizo para os casos abaixo:

  • Colocar um header em todas as requisições que serão enviadas ao backend;
  • Ter um tratamento genérico para todas as resposta do backend (ex.: erro 404, erro 500 );
  • Iniciar e parar uma spinner de forma automática a cada requisição ao backend;

Basicamente, precisamos criar um Factory, injetar o $q, e usando convenção do Angular, implementar algumas functions.

Uma descrição mais detalhada pode ser encontrada na página da api $http do angular.

Na página do angular podemos ver que temos 4 tipos de interceptors (functions), são eles:

  • request: esse interceptor é executado toda vez que temos um $http.get;
  • requestError: esse interceptor é executado quando o “request” retorna um erro ou uma “rejeição de promisse”;
  • response: esse interceptor é executado quando temos uma resposta para o request;
  • responseError: esse interceptor é executado quando temos uma resposta com erro;

Para o nosso exemplo, vou utilizar apenas o request e o responseError, para inserir um header na requisição e tratar um erro de acesso negado, vamos lá:

Primeiro vamos criar um factory:

(function(){
    angular.module('app', []).factory('Interceptor', Interceptor);
    
    Interceptor.$inject = ['$q'];
    
    function Interceptor($q) {
        
    }   
})();

Com o Interceptor criado, vamos adicionar as functions necessárias para interceptar as requisições:

function Interceptor($q) {        
        return {
            request: function(config) {                                         
                config.headers['X-TOKEN'] = "exemplo";              
                return config;
            },
            responseError: function(error) {
                if (error.status === 401 || error.status === 403) {
                    //faz alguma coisa.
                }
                return $q.reject(error);
            }
        };
    }

No request temos uma function que recebe um valor “config”, nele temos os dados da requisição, os headers, etc… No exemplo acima, adicionamos um header na requisição e damos um “return” com os dados alterados. Quando ele passa por esse interceptor, ele faz a alteração e o fluxo da requisição continua normalmente.

Já o responseError é executado quando obtemos uma resposta com o status 40x, que representa algum tipo de erro no lado do servidor, no nosso caso, quando temos um erro 401 ou 403, eu executo alguma ação e uso o $q.reject para que a requisição vá para o callback de error do $http do angular.

Mas pra isso funcionar ainda falta um passo importante, registrar o interceptor no Angular:

angular.module('app').config(['$httpProvider', Interceptor]);
    
function Interceptor($httpProvider) {
    $httpProvider.interceptors.push('Interceptor');     
}

Feito isso, todas as requisições $http irão passar pelo interceptor acima.

É isso ai, até a próxima.