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.