Javascript 如何在Angular中设置对异步HTTP服务的回调，以便在控制器中填充数组而不必定义它？

如何在Angular中设置对异步HTTP服务的回调，以便在控制器中填充数组而不必定义它？

我的代码：

app.js

'use strict';

    var app = angular.module('app', ['ngRoute']); //create module

    app.factory("Rest", ['$http', function($http){ //create service factory
        var allUsers = []; //initialize empty allUsersArray
        return{
            getUsers: function(doneCallback){ //getUsers function with a callback parameter
                var getHttp = $http({ //GET request from my test.json
                    method: 'GET',
                    url: 'test.json'
                });
                getHttp.then(function successCallback(response) {
                    var users = response.data;
                    for(var i = 0; i < users.people.length; i++){
                        allUsers.push(users.people[i]); //add the objects to the allUsers array at the top
                    }
                    console.log("This is from within the SERVICE: " + allUsers[1].first); //showing that I can access the allUsers array within the service.

                    doneCallback(response.data.people); //my sad attempt to call this in the controller and still ended up being undefined.

                }, function errorCallback(response) {
                    console.log("Error!");
                });
            }
        }

    }]);

    app.controller('mainCtrl', ['$scope', 'Rest', function($scope, Rest){
        $scope.usersArray = [];
        //when the get request is completed fill in the $scope.usersArray
        $scope.addUsers = function(users){
            for(var i = 0; i < users.length; i++){
                $scope.usersArray.push(users); //trying to add the users from the SERVICE to the CONTROLLER $scope.usersArray[]
            }
            console.log("This is from within the CONTROLLER: " + $scope.usersArray[1].first); //showing up as undefined :(
        }
        Rest.getUsers($scope.addUsers);
        //$scope.getUsers = Rest.getUsers;
    }]);

因此，为了测试的目的和这个问题，我试着让我的代码尽可能简单

我遇到的问题是，为了使用Angular的$http service GET方法处理拉入的JSON数据，我首先需要在控制器中访问它，这样我就可以更新它，并在控制器中执行我想执行的任何操作。但现在的问题是，$http调用是异步的，在需要在控制器中填充$scope.usersArray之前，它不会获取JSON，因此使其未定义

---

因此，我尝试创建一个名为doneCallback的回调函数，该函数在$http内激发。然后，该方法被假定为在激发回调函数之前完成。由于某些原因，它不是，并且我尝试填充的控制器中的数组仍然是未定义的。

您只需从您的

Rest

服务返回一个承诺，例如

app.factory("Rest", ['$http', function($http) {
    return {
        getUsers: function() {
            return $http.get('test.json').then(function(response) {
                // the return value of this promise chain...
                return response.data.people || [];
            });
        }
    };
}])

在你的控制器里

$scope.usersArray = [];
Rest.getUsers().then(function(people) {
    console.log(people);

    // to push all the new "people" into the array...
    Array.prototype.push.apply($scope.usersArray, people);
});

---

请参见

您可以使用AngularJS的$q服务您的主要问题是

$scope.usersArray.push（users）

。这可能是

$scope.usersArray.push（users[i]）

，但请参见下面我的答案，以获得更优雅的解决方案。哇，好吧，所以我尝试了你的方法和我的方法，但我缺少了[i]，它们都能工作。因此，我尝试的回调毕竟是有效的，但如果我没有弄错的话，你的方式似乎是最好的方式。我不理解控制器中的部分，它说的是

。然后（函数（人）{}

then promise如何知道people参数来自我在服务中返回的数据？从

Rest.getUsers

返回的promise通过

response.data.people

解析。

then（）

在您的控制器中，当承诺解决时，会传递该值。我看到ok谢谢您的回答。非常感谢您的帮助。

{
    "people": [
        {"first": "Edward", "last": "Smith", "age": 18, "position": "Accountant"},
        {"first": "Lucas", "last": "Santos", "age": 23, "position": "Programmer"},
        {"first": "Jeremy", "last": "Grey", "age": 27, "position": "Fire Fighter"}
    ]
}

app.factory("Rest", ['$http', function($http) {
    return {
        getUsers: function() {
            return $http.get('test.json').then(function(response) {
                // the return value of this promise chain...
                return response.data.people || [];
            });
        }
    };
}])

$scope.usersArray = [];
Rest.getUsers().then(function(people) {
    console.log(people);

    // to push all the new "people" into the array...
    Array.prototype.push.apply($scope.usersArray, people);
});