How to return a resolved promise from an AngularJS Service using $q?

Question

My service is:

myApp.service('userService', [
  '$http', '$q', '$rootScope', '$location', function($http, $q, $rootScope, $location) {
    var deferred;
    deferred = $q.defer();
    this.initialized = deferred.promise;
    this.user = {
      access: false
    };
    this.isAuthenticated = function() {
      this.user = {
        first_name: 'First',
        last_name: 'Last',
        email: 'email@address.com',
        access: 'institution'
      };
      return deferred.resolve();
    };
  }
]);

I'm calling this in my config file via:

myApp.run([
  '$rootScope', 'userService', function($rootScope, userService) {
    return userService.isAuthenticated().then(function(response) {
      if (response.data.user) {
        return $rootScope.$broadcast('login', response.data);
      } else {
        return userService.logout();
      }
    });
  }
]);

However, it complains that then is not a function. Aren't I returning the resolved promise?

Andrey Mikhaylov - lolmaus · Answer 1 · 2021-02-10T06:30:41.097

106

How to simply return a pre-resolved promise in AngularJS

Resolved promise:

return $q.when( someValue );    // angularjs 1.2+
return $q.resolve( someValue ); // angularjs 1.4+, alias to `when` to match ES6

Rejected promise:

return $q.reject( someValue );

edited Feb 10 '21 at 06:30

answered Jun 11 '15 at 11:08

Andrey Mikhaylov - lolmaus

23,107
6
84
133

2

This is exactly what I was looking for. A nice short way to return a static value when stubbing out http service calls. – Richard Oct 12 '15 at 12:01

score 35 · Answer 2 · edited Nov 25 '15 at 10:05

Return your promise , return deferred.promise.
It is the promise API that has the 'then' method.

https://docs.angularjs.org/api/ng/service/$q

Calling resolve does not return a promise it only signals the promise that the promise is resolved so it can execute the 'then' logic.

Basic pattern as follows, rinse and repeat
http://plnkr.co/edit/fJmmEP5xOrEMfLvLWy1h?p=preview

<!DOCTYPE html>
<html>

<head>
  <script data-require="angular.js@*" data-semver="1.3.0-beta.5" 
        src="https://code.angularjs.org/1.3.0-beta.5/angular.js"></script>
  <link rel="stylesheet" href="style.css" />
  <script src="script.js"></script>
</head>

<body>

<div ng-controller="test">
  <button ng-click="test()">test</button>
</div>
<script>
  var app = angular.module("app",[]);

  app.controller("test",function($scope,$q){

    $scope.$test = function(){
      var deferred = $q.defer();
      deferred.resolve("Hi");
      return deferred.promise;
    };

    $scope.test=function(){
      $scope.$test()
      .then(function(data){
        console.log(data);
      });
    }      
  });

  angular.bootstrap(document,["app"]);

</script>

How will the promise get resolved then? The `.then` will never get triggered — Shamoon, May 09 '14 at 14:43
@Shamoon deferred.resolve(); is resolved in the moment you call it because there is no value given in. I would suggest instead of write deferred.resolve("Hi"); just write deferred.resolve(); to get a resolved empty promise. But you could also use $q.when(); to get a resolved thenable empty promise ;-). — Sebastian, Sep 23 '14 at 06:33
IMHO this is better than the accepted answer, which by using $timeout to generate a promise that will be resolved is failing to show the mechanics of manually creating and resolving promises. — sifriday, Sep 01 '15 at 14:14

Brocco · Accepted Answer · 2014-05-09T18:45:33.013

21

From your service method:

function serviceMethod() {
    return $timeout(function() {
        return {
            property: 'value'
        };
    }, 1000);
}

And in your controller:

serviceName
    .serviceMethod()
    .then(function(data){
        //handle the success condition here
        var x = data.property
    });

edited May 09 '14 at 18:45

answered May 09 '14 at 14:52

Brocco

62,737
12
70
76

@BenjaminGruenbaum Yes, you are correct, I was unaware that `$timeout` actually returns a promise, serviceMethod can be shortened to: return $timeout(function() { return {property: 'value'}; }, 1000); – Brocco May 09 '14 at 18:46
15

This may work, but it's certainly not a recommended approach for returning promises – Mike Robinson May 09 '14 at 18:53
@BenjaminGruenbaum I did, now returning the promise which $timeout generates. – Brocco May 09 '14 at 19:04
Very well, I retracted my -1. – Benjamin Gruenbaum May 09 '14 at 19:05
I tend to agree with Mike, this might work, but the answer below from mccainz better explains the mechanics of creating, resolving and returning a promise. I've added a downvote for this reason. – sifriday Sep 01 '15 at 14:15
@sifriday liking a different answer does not mean another answer is bad. This example shows returning a contrived example of returning a promise, not a way to create promises. Mike's comments were in regards to me using `$q.defer()` instead of utilizing the promise that is generated with $timeout. – Brocco Sep 01 '15 at 14:22
3

ah ok, but I still agree with his sentiment even if for a different reason! I appreciate a downvote is disheartening, and that we could just use upvotes to help the good content float to the top, but in this case I do feel your answer is not helpful, because it fails to explain the mechanics of $q and instead presents an abstraction of $q. Someone new to promises, or like me familiar with promises but new to Angular, could get totally the wrong end of the stick! – sifriday Sep 01 '15 at 14:29

score 4 · Answer 4 · answered May 09 '14 at 18:56

Here's the correct code for your service:

myApp.service('userService', [
  '$http', '$q', '$rootScope', '$location', function($http, $q, $rootScope, $location) {

    var user = {
      access: false
    };

    var me = this;

    this.initialized = false;
    this.isAuthenticated = function() {

      var deferred = $q.defer();
      user = {
        first_name: 'First',
        last_name: 'Last',
        email: 'email@address.com',
        access: 'institution'
      };
      deferred.resolve(user);
      me.initialized = true;

      return deferred.promise;
    };
  }
]);

Then you controller should align accordingly:

myApp.run([
  '$rootScope', 'userService', function($rootScope, userService) {
    return userService.isAuthenticated().then(function(user) {
      if (user) {
        // You have access to the object you passed in the service, not to the response.
        // You should either put response.data on the user or use a different property.
        return $rootScope.$broadcast('login', user.email);  
      } else {
        return userService.logout();
      }
    });
  }
]);

Few points to note about the service:

Expose in a service only what needs to be exposed. User should be kept internally and be accessed by getters only.
When in functions, use 'me' which is the service to avoid edge cases of this with javascript.
I guessed what initialized was meant to do, feel free to correct me if I guessed wrong.

score 2 · Answer 5 · answered Jun 03 '15 at 19:59

2

To return a resolved promise, you can use:

return $q.defer().resolve();

If you need to resolve something or return data:

return $q.defer().resolve(function(){

    var data;
    return data;

});

answered Jun 03 '15 at 19:59

Jakub Kozlowski

41
3

I've [posted](http://stackoverflow.com/a/30779102/901944) an even shorter version. – Andrey Mikhaylov - lolmaus Jun 11 '15 at 11:09

Sebastian · Answer 6 · 2014-09-23T07:13:53.393

For shorter JavaScript-Code use this:

myApp.service('userService', [
  '$q', function($q) {
    this.initialized = $q.when();
    this.user = {
      access: false
    };
    this.isAuthenticated = function() {
      this.user = {
        first_name: 'First',
        last_name: 'Last',
        email: 'email@address.com',
        access: 'institution'
      };
      return this.initialized;
    };
  }
]);

You know that you loose the binding to userService.user by overwriting it with a new object instead of setting only the objects properties?

Here is what I mean as a example of my plnkr.co example code (Working example: http://plnkr.co/edit/zXVcmRKT1TmiBCDL4GsC?p=preview):

angular.module('myApp', []).service('userService', [
    '$http', '$q', '$rootScope', '$location', function ($http, $q, $rootScope, $location) {
    this.initialized = $q.when(null);
    this.user = {
        access: false
    };
    this.isAuthenticated = function () {
        this.user.first_name = 'First';
        this.user.last_name = 'Last';
        this.user.email = 'email@address.com';
        this.user.access = 'institution';
        return this.initialized;
    };
}]);

angular.module('myApp').controller('myCtrl', ['$scope', 'userService', function ($scope, userService) {
    $scope.user = userService.user;
    $scope.callUserService = function () {
        userService.isAuthenticated().then(function () {
            $scope.thencalled = true;
        });
    };
}]);

score 0 · Answer 7 · answered May 09 '14 at 15:14

Try this:

myApp.service('userService', [
    '$http', '$q', '$rootScope', '$location', function($http, $q, $rootScope, $location) {
      var deferred= $q.defer();
      this.user = {
        access: false
      };
      try
      {
      this.isAuthenticated = function() {
        this.user = {
          first_name: 'First',
          last_name: 'Last',
          email: 'email@address.com',
          access: 'institution'
        };
        deferred.resolve();
      };
    }
    catch
    {
        deferred.reject();
    }

    return deferred.promise;
  ]);

Could someone tell me why this is marked for downvote? – premsh May 12 '14 at 14:54 — premsh, May 12 '14 at 14:54

How to return a resolved promise from an AngularJS Service using $q?

7 Answers7

How to simply return a pre-resolved promise in AngularJS

Linked

Related