操纵Promise中的数据并将其返回到服务函数 - AngularJS中

Question

I'm having a problem where I can't assign the service return value into a variable. I have two controllers (AddProject and EditProject) and this function was in both of them, and I wanted to make a service to avoid repeating the code.

        ... 
        .service("UserService", function($http) {
        var allUsers;
        var usersPromise = $http.get("/users");
        usersPromise.then(
            function(response) {
                allUsers = response.data.map(function(user) {
                    user._lowername = user.name.toLowerCase();
                    return user;
                });
                console.log(allUsers) //It prints the object array 
                return allUsers;
            },
            function(error) {
                console.log(error);
                return error;
            });

        this.AllUsers = function() {
            return allUsers;
        }
    })

And in my controller I have a variable: (assume that all required injections were made)

self.AllUsers = UserService.AllUsers(); //it is undefined

I tried to use $q but it gets undefined too.

Answer 1

The main reason for using promises is to deal with asynchronous calls (like you $http.get()), but you you seem to be trying to use it in a synchronous way. Your service should just return the promise, then your controller should call it and do what it needs to when it resolves:

.service("UserService", function($http) {
    var allUsers;
    var usersPromise = $http.get("/users");
    usersPromise.then(
            function(response) {
                allUsers = response.data.map(function(user) {
                    user._lowername = user.name.toLowerCase();
                    return user;
                });
                console.log(allUsers) //It prints the object array
                return allUsers;
            },
            function(error) {
                console.log(error);
                return error;
            });

    this.AllUsers = function() {
        return usersPromise;
    };
});

....

UserService.AllUsers().then(function(users) {
    self.AllUsers = users;
});

Answer 2

It is possible to return self-filling array from asynchronous function that will be filled with values later:

    ... 
    .service("UserService", function($http) {
    var allUsers = [];
    var usersPromise = $http.get("/users");
    usersPromise.then(
        function(response) {
            var result = response.data.map(function(user) {
                user._lowername = user.name.toLowerCase();
                return user;
            });
            angular.copy(allUsers, result);
        },
        function(error) {
            console.log(error);
            return error;
        });

    this.AllUsers = function() {
        return allUsers;
    }
})

angular.copy doesn't change the reference to the array when filling it, the returned empty array is updated automatically in view.

This trick is particularly used in ngResource $resource .

Answer 3

Partial solution (I believe there is a best solution).

.service("UserService", function($http) {
    this.AllUsers = function() {
        return $http.get("/users");
    }
})

And I created a function outside the controllers:

function mapUsers(userResponse){
  return userResponse.data.map(function(user) {
      user._lowername = user.name.toLowerCase();
      return user;
  });
}

And in both controllers I call this:

UserService.AllUsers().then(function(response) {
            self.AllUsers = mapUsers(response);
        });