0
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?
0
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?
2
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>
Browser other questions tagged angularjs
You are not signed in. Login or sign up in order to post.