How do I add an animation while loading a request?

Question

I’d like to know how to use Interceptor in a $http request from my project.

The animation you’d like to run while the request is being made is a loading done in css. Could someone explain to me clearly how the Interceptor works?

Answer 1

Assuming you are using Angularjs, follow this example:

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);
}]);

Create a directive that intercepts 'loading-complete' and 'loading-Started' events to show or hide the loadind according to the event:

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;
         });
      }
   };
}]);

Place this directive in your index.html:

<div dir-carregando></div>