Angular Get data from $http 请求给出未定义答案

【问题标题】：Angular Get data from $http request gives undefinedAngular Get data from $http 请求给出未定义
【发布时间】：2025-12-23 02:45:16
【问题描述】：

所以，我想从 API（由 Laravel 提供）获取数据。我在 Angular 中使用 $http 来获取这些数据，当我将它发送到我的视图时，它工作正常，但是当我想在控制器内使用数据时，它不会：

HTML：

<!doctype html>
<html ng-app="todoApp">
    <head>
        <script src="http://code.jquery.com/jquery-1.10.2.js"></script>
        <script src="http://code.jquery.com/ui/1.11.2/jquery-ui.js"></script>
        <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
        <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
        <script src="/js/MainController.js"></script>
    </head>
    <body ng-controller="MainController as myControl">
        <h1>Todo-list:</h1>
        <div>
            <table>
                <tr>
                    <th>Note:</th>
                    <th>Author:</th>
                    <th>Project:</th>
                    <th>Created:</th>
                    <th>Deadline:</th>
                </tr>
                <tr ng-repeat="todo in myControl.todos">
                    <td> {{ todo.content }} </td>
                    <td> {{ todo.user }} </td>
                    <td> {{ todo.project }} </td>
                    <td> {{ todo.created }} </td>
                    <td> {{ todo.deadline }} </td>
                    <td><button ng-click="myControl.showUpd(todo.id)">Update</button></td>
                </tr>
            </table>
        </div>
    </body>
</html>

角度控制器：

angular.module('todoApp', []).controller('MainController', function($scope, $http) {
    var thisApp = this;

    // Below works without any problems when accessing it from the html-view:

    $http({method : 'GET', url : 'http://localhost:8000/notes'})
        .then (function(response) {
            thisApp.todos = response.data;
        }, function() {
            alert("Error getting todo notes");
        });

    // But this function doen't work as intended

    thisApp.showUpd = function(noteID) {
        $http({method : 'GET', url : 'http://localhost:8000/notes/' + noteID})
            .then (function(response) {
                thisApp.getNote = response.data;
                console.log(thisApp.getNote); // MainController.js:20
                alert("Got data");
            }, function() {
                alert("Error getting todo note");
            });

        console.log(thisApp.getNote); // MainController.js:26
    }
});

控制台给了我以下信息：

MainController.js:26 undefined
MainController.js:20 Object {id: 1, content: "asdasd", completed: 0, deadline: "2016-01-14 10:29:38"}

我的问题是，当我在$http 内部访问thisApp.getNote 时，它工作正常，但是当我尝试在外部访问它时，我只会得到未定义。我尝试将 thisApp 更改为 $scopeandd 我还尝试在函数内声明另一个 var，但它们都没有任何区别。

谁能发现我的问题？

【问题讨论】：

$http 是异步的，这意味着您在第 17 行附近触发请求，然后执行第 26 行。由于请求尚未返回，thisApp.getNote 尚未设置，所以它未定义。它在 $http 的“外部”可用，但只有在它被设置之后才会发生，直到 $http 调用被解决后才会发生，这会在将来的某个时间发生（如果有的话）。
@sethflowers 我明白了，你有什么好的解决方案吗？喜欢把它放在另一个函数中吗？
没有问题。它正在做它应该做的事情。您触发一个 http 请求，当它返回时，您将数据设置在某些东西上。你已经在这样做了。在你设置它之前，它永远不会是 undefined 以外的任何东西。

标签： javascript angularjs controller get response

【解决方案1】：

第 26 行的 console.log 包含在您使用 $http 创建的承诺之外。这意味着它将在承诺解决之前运行，因此在设置属性之前运行，因此它将在那个时间点返回未定义。您需要等到解决了 promise 之后才能尝试使用该属性。

您应该在 .then 中为您的 $http 调用创建一个回调

thisApp.showUpd = function(noteID) {
    $http({method : 'GET', url : 'http://localhost:8000/notes/' + noteID})
        .then (function(response) {
            thisApp.getNote = response.data;
            console.log(thisApp.getNote); // MainController.js:20
            alert("Got data");
            thisApp.logMe(); // Call the callback here to run the code that depends on thisApp.getNote being defined.
        }, function() {
            alert("Error getting todo note");
        });
}

// Create a callback function that will be called when the $http promise has been resolved but not until then.
thisApp.logMe = function() { 
    console.log(thisApp.getNote); // MainController.js:26
}

【讨论】：