0

Gostaria de saber como faço para usar o Interceptor em uma requisição $http do meu projeto.

A animação que gostaria de rodar enquanto a requisição é feita, é um loading feito em css. Alguém poderia me explicar de forma clara como o interceptor funciona?

1 Resposta 1

2

Assumindo que você está usando AngularJS, siga este exemplo:

app.js

    app.config(['$httpProvider', function ($httpProvider) {
   // Criando um interceptador de chamadas http.
   // O '$q' é um serviço que permite monitoração de chamadas assincronas através de 'promisses' que provem callbacks de funcoes.
   // $rootScope é o escopo de maior hierarquia em toda aplicação, e pode ser acessado de qualquer nivel
   var myHttpInterceptor = ['$q', '$rootScope', '$window', '$templateCache', 'srvMsgBus', function ($q, $rootScope, $window, $templateCache, srvMsgBus) {
      return {
         // O 'request' ocorre sempre que uma chamada http for iniciada
         'request': function (request) {

            // $emit envia um evento para todos os controlers 'filhos' do controle que o está executando.
            // Este evento pode ser interceptado por outros controllers e serve como meio de comunicação entre eles.
            // Como o $rootScope é o 'pai' de todo e qualquer outro controller, quando ele emite um $emit todos podem interceptar este sinal.
            $rootScope.emit('loading-started');

            // se o request já foi executado o devolve, senao devolve a promisse
            return request || $q.when(request);
         },
         // O 'response' ocorre sempre ao final de uma chamada http
         'response': function (response) {
            //$rootScope.$broadcast('loading-complete');
            $rootScope.emit('loading-complete');
            return response || $q.when(response);
         },
         'responseError': function (response) {
            $rootScope.emit('loading-complete');
         }
      };
   }];
   //maunalmente adicionando um interceptor ao array de http interceptors
   $httpProvider.interceptors.push(myHttpInterceptor);
}]);

Crie uma diretiva que intercepte os eventos 'loading-complete' e 'loading-started' para mostrar ou esconder o loadind de acordo com o evento:

app.directive("dirCarregando", ['$rootScope', function ($rootScope) {
   return {
      templateUrl: "<div ng-show='showMe'><span>Carregando</span></div>",
      link: function (scope, element, attrs) {

         $rootScope.on('loading-started', function () {
                  scope.showMe = true;
         });

         $rootScope.on('loading-complete', function () {
            scope.showMe = false;
         });
      }
   };
}]);

Coloque esta diretiva no seu index.html:

<div dir-carregando></div>

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .