AngularJs Promise $q

Par Kitano, il y a 11 ans

Bonjour, J'ai une petite problèmatique.

j'aimerais construire un tableau grace a plusieurs requete api, j'utilise le service ressource pour me connecter à l'api, cette partie fonctionne tres bien.

Voici une partie de mon controller :

var getFullData = function(coursesData) { angular.forEach(coursesData, function(value, key) { ClientService.client.get( {id: value.client} ).$promise.then(function(client) { value.client = client.first_name+' '+client.last_name; }); }, coursesData); return coursesData; }; $scope.setPagingData = function(courses) { var coursesData = courses.results; $scope.courses = getFullData(coursesData); $scope.totalServerItems = courses.count; if (!$scope.$$phase) { $scope.$apply(); } };

J'aimerais que $scope.courses récupére les infos de getFullData(coursesData) que quand cette fonction aura terminée le forEach et que mes promises (il y en aura plusieurs dans la boucle) soit terminées.

4 réponses

Kitano,

il y a 11 ans

J'ai réussi a allez jusqu’à ce stade, mes clients semble bien chargé par contre comment faire pour resolve plusieurs choses avant le return ?

var getFullData = function(coursesData) { var deferred = $q.defer(); angular.forEach(coursesData, function(value, key) { ClientService.client.get( {id: value.client} ).$promise.then(function(client) { value.client = client.first_name+' '+client.last_name; deferred.resolve(coursesData); }); VehicleService.vehicle.get( {id: value.vehicle} ).$promise.then(function(vehicle) { value.vehicle = vehicle.immatriculation; }); }, coursesData); return deferred.promise; }; $scope.setPagingData = function(courses) { var coursesData = courses.results; $scope.courses = getFullData(coursesData).then(function(courses) { $scope.courses = courses; }); $scope.totalServerItems = courses.count; if (!$scope.$$phase) { $scope.$apply(); } };

Grafikart,

il y a 11 ans

Tu veux attendre que les 2 données soient chargé pour résolve ?

Si oui dans ce cas mettre une variable que tu incrémente dans le callback. Et ensuite si la variable == 2 alors tu resolve ^^

Maenhyr,

il y a 11 ans

J'essayerai de voir le problème d'une autre façon. Ne peux tu pas envoyer directement le tableau d'id en paramètre GET de ClientService.client.get( {id: value.client} ) ? Parce que la tu effectues autant de requêtes que tu ne possèdes d'id, cela surcharge ton serveur.

Sinon, si tu souhaites rester sur le code actuel, tu as la méthode $q.all() qui va te permettre de n'effectuer le code que lorsque toutes les promesses sont résolues.

Kitano,

il y a 11 ans

Merci pour vos réponses.

Pour conclure, l'utilisation de $q.all est tres pratique, effectivement l'api que j'utilisais n'était pas opti a la base, elle me retounée que les ids alors que j'ai besoin de toute les informations.
Maitnenant que j'ai les bonne infos, mon code est plus simple et clair:

var getFullData = function(coursesData) { var deferred = $q.defer(); var detailedCoureses = []; angular.forEach(coursesData, function (value, key) { detailedCoureses.push({ 'id': value.id, 'date': value.shedule_at, 'client': value.client.first_name + ' ' + value.client.last_name, 'vehicle': value.vehicle, 'start_at': value.start_at, 'end_at': value.end_at, 'short_note': value.short_note, 'notes': value.notes }) }, coursesData); $q.all(detailedCoureses).then(function() { deferred.resolve(detailedCoureses); }); return deferred.promise; }; $scope.setPagingData = function(courses) { var coursesData = courses.results; getFullData(coursesData).then(function(courses) { $scope.courses = courses; }); $scope.totalServerItems = courses.count; if (!$scope.$$phase) { $scope.$apply(); } };