javascript - example - Angular js-detecta cuando todos los $ http() han terminado
loading angular 5 (3)
Ok, tengo toneladas de llamadas $http() todo el código de la aplicación,
Me pregunto si hay alguna manera / mejor práctica para detectar cuándo han finalizado todos los $http() alrededor de la aplicación (el éxito / error no importa lo que devuelven, solo necesito saber si finalizó).
¿Para que pueda mostrar un gif de carga hasta que se carguen?
Gracias
Es posible si ejecuta todas las solicitudes por $q.all
$scope.request1 = $http.get(''request1URL'', {cache: false});
$scope.request2 = $http.get(''request2URL'', {''cache'': false});
$scope.loading = true;
$q.all([$scope.request1, $scope.request2]).then(function(values) {
$scope.loading = false;
// Do whatever you want
// values[0], values[1]
});
Usando ng-if , puedes mostrar y ocultar gif carga.
En el caso, si usa una llamada $http diferente, entonces tenga un count o una array en $rootScope y actualícelos cada vez que se complete $http . Basado en el count o array.length habilita el gif carga.
Hazlo asi:
angular.module(''app'').factory(''httpInterceptor'', [''$q'', ''$rootScope'',
function ($q, $rootScope) {
var loadingCount = 0;
return {
request: function (config) {
if(++loadingCount === 1) $rootScope.$broadcast(''loading:progress'');
return config || $q.when(config);
},
response: function (response) {
if(--loadingCount === 0) $rootScope.$broadcast(''loading:finish'');
return response || $q.when(response);
},
responseError: function (response) {
if(--loadingCount === 0) $rootScope.$broadcast(''loading:finish'');
return $q.reject(response);
}
};
}
]).config([''$httpProvider'', function ($httpProvider) {
$httpProvider.interceptors.push(''httpInterceptor'');
}]);
Luego use el evento vinculado a $rootScope cualquier lugar (preferiblemente en la directiva):
$rootScope.$on(''loading:progress'', function (){
// show loading gif
});
$rootScope.$on(''loading:finish'', function (){
// hide loading gif
});
Usando la respuesta de @karaxuna, implemento mi solución como a continuación. Plunker
<!doctype html>
<html ng-app="ui.bootstrap.demo">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular-animate.js"></script>
<script src="https://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.14.3.js"></script>
<script>
var app = angular.module(''ui.bootstrap.demo'', [''ngAnimate'', ''ui.bootstrap'']);
app.config([''$httpProvider'', function ($httpProvider) {
$httpProvider.interceptors.push(function ($q, $rootScope, $templateCache) {
var AjaxLoadingCount = 0;
return {
request: function (config) {
console.log("[config.interceptorService] request config", config);
if (++AjaxLoadingCount === 1)
{
if (!$templateCache.get(config.url)) {
$rootScope.$broadcast(''AjaxLoading:Progress'');
}
}
return config || $q.when(config);
},
requestError: function (rejection) {
console.log("[config.interceptorService] requestError rejection", rejection);
if(--AjaxLoadingCount === 0) $rootScope.$broadcast(''AjaxLoading:Finish'');
return $q.reject(rejection);
},
response: function (response) {
console.log("[config.interceptorService] response response", response);
if(--AjaxLoadingCount === 0) $rootScope.$broadcast(''AjaxLoading:Finish'');
return response || $q.when(response);
},
responseError: function (rejection) {
console.log("[config.interceptorService] responseError rejection", rejection);
if(--AjaxLoadingCount === 0) $rootScope.$broadcast(''AjaxLoading:Finish'');
return $q.reject(rejection);
}
};
});
}]);
app.factory(''ajaxFactory'', function ($http) {
var ajaxFactory = {};
ajaxFactory.LoadData = function () {
return $http({
method: "GET",
url: "http://www.w3schools.com/angular/customers.php",
});
};
return ajaxFactory;
});
app.controller(''ModalDemoCtrl'', function ($scope, ajaxFactory) {
$scope.doAjax = function () {
ajaxFactory.LoadData()
.success(function (data, status, headers, config) {
console.log("Data vai factory/n", JSON.stringify(data));
console.log("Loading finish.");
}).error(function (data, status, headers, config) {
});
};
});
app.directive("ajaxLoadingDirective", function ($uibModal) {
var modalInstance;
return {
restrict: ''EA'', //E = element, A = attribute, C = class, M = comment
scope: true,
link: function (scope, elem, attrs) {
console.log("AjaxLoadingDirective.AjaxLoading:Progress");
scope.$on("AjaxLoading:Progress", function () {
modalInstance = $uibModal.open({
animation: true,
templateUrl: ''myModalContent.html''
});
});
return scope.$on("AjaxLoading:Finish", function () {
console.log("AjaxLoadingDirective.AjaxLoading:Finish");
if(modalInstance === undefined) return;
modalInstance.dismiss();
});
}
}
});
</script>
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div ng-controller="ModalDemoCtrl">
<script type="text/ng-template" id="myModalContent.html">
Loading data .......................
</script>
<button type="button" class="btn btn-default" ng-click="doAjax()">Execute Ajax</button>
<div ajax-loading-directive ></div>
</div>
</body>
</html>