Question

67

Waiting for a promise?

rated 0 times [ 72] [ 5] / answers: 1 / hits: 86857 / 11 Years ago, wed, september 11, 2013, 12:00:00

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?

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

mckenna

Add To Favorites

Follow

Total Points: 445

Total Questions: 109

Total Answers: 109

Location: Virgin Islands (U.S.)

Member since Sun, May 16, 2021

3 Years ago

mckenna questions

1 Laravel Livewire: Component in Foreach loop. Button Click shows on all items instead of Single item

Mon, Sep 6, 21, 00:00, 3 Years ago

1 Jest mock aws-sdk ReferenceError: Cannot access before initialization

Sat, Apr 11, 20, 00:00, 4 Years ago

1 Nest js POST Request Not Recognizing DTO method

Fri, Mar 20, 20, 00:00, 4 Years ago

1 How to use prop inside another prop as default value in vuejs

Thu, Mar 28, 19, 00:00, 5 Years ago

1 Javascript: Bind/unbind function behavior

Tue, Nov 27, 18, 00:00, 6 Years ago

View All

answered 11 Years ago zoiel · Accepted Answer

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'

  });

})