I would like to know how to use the Interceptor in a $ http request from my project.
The animation I would like to run while the request is made, is a loading done in css. Could someone explain me clearly how the interceptor works?
I would like to know how to use the Interceptor in a $ http request from my project.
The animation I would like to run while the request is made, is a loading done in css. Could someone explain me clearly how the interceptor works?
Assuming you're 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 policy that intercepts the '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>