操縱Promise中的數據並將其返回到服務函數 - AngularJS中

Question

我遇到了一個問題，我無法將服務返回值分配給變量。 我有兩個控制器（AddProject和EditProject），這兩個函數都在這兩個中，我想提供服務以避免重復代碼。

        ... 
        .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;
        }
    })

在我的控制器中我有一個變量:(假設所有需要的注射都已完成）

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

我試圖使用$ q，但它也未定義。

Answer 1

使用promises的主要原因是處理異步調用（比如你的$ http.get（）），但是你似乎試圖以同步的方式使用它。 您的服務應該只返回承諾，然后您的控制器應該調用它並在結算時執行它所需的操作：

.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

可以從異步函數返回自填充數組，稍后將填充值：

    ... 
    .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在填充數組時不會更改對數組的引用，返回的空數組會在視圖中自動更新。

這個技巧特別用於ngResource $resource 。

Answer 3

部分解決方案（我相信有一個最好的解決方案）。

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

我在控制器外創建了一個函數：

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

在兩個控制器中我稱之為：

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