Waiting for a promise?

Question

I have the following angularjs code:

$scope.clients = commonFactory.getData(clientFactory.getClients()); if ($scope.clients.length > 0) {     $scope.sampleForm.ClientId = $scope.clients[0].ClientId; } 

And the getData function in commonFactory:

factory.getData = function (method) {     method.then(function (response) {         return response.data;     }, function (error) {         $rootScope.alerts.push({ type: 'error', msg: error.data.ExceptionMessage });     }); }; 

The problem is that $scope.clients.length is undefined when it hits that line because of the async call.

Is there a way to not do my length check until I know that $scope.clients has been assigned? I've looked at something like this:

$scope.clients = commonFactory.getData(clientFactory.getClients()).then(function () {     if ($scope.clients.length > 0) {         $scope.sampleForm.ClientId = $scope.clients[0].ClientId;     } }); 

Trying to chain my then promises, but no dice... the goal here is to have the getData method to avoid a bunch of boilerplate code for catching errors... maybe I'm going about this wrong?

Answer 1

This is the most basic situation that promises are for. You simply need to make a promise with var deferred = $q.defer() when beginning an async operation, resolve the promise with deferred.resolve(result) when the async operation is complete, and return deferred.promise in your function. Angular's asynchronous methods do this internally and return promises already, so you can just return those same promises rather than creating new promises with $q.defer(). You can attach a .then to anything that returns a promise. Further, if you return a value from a then function, that value will be wrapped in a promise so that the then chain can continue

angular.module('myApp', [])  .factory('myService', function($q, $timeout, $http) {   return {     myMethod: function() {       // return the same promise that $http.get returns       return $http.get('some/url');     }   }; })  .controller('myCtrl', function($scope, myService) {   myService.myMethod().then(function(resp) {     $scope.result = resp.data;   }); }) 

And here is a bit more fun with the chaining:

.factory('myService', function($q, $timeout, $http) {   return {     myMethod: function() {       // return the same promise that $http.get returns       return $http.get('some/url').then(function() {         return 'abc';       });     }   }; })  .controller('myCtrl', function($scope, myService) {   myService.myMethod().then(function(result) {     console.log(result); // 'abc'     return someOtherAsyncFunc(); // for example, say this returns '123'   }).then(function(result) {     console.log(result); // '123'   }); })