Question

我试图设置一个简单的控制器，使用服务进行异步http调用。我为我写的另一个控制器设置了非常相似的东西，但由于某种原因，这个控制器没有运行。 then（）块中的 console.log（$ scope.art）; 行输出正确的数据，但是一旦它出了then（）块，$ scope.art就是未定义。为什么会这样？我很困惑！

app.controller('FeedbackController', ['$scope','getArt', function($scope, getArt) {
        var art = getArt();
        art.then(function(result) {
            $scope.art = result;
            console.log($scope.art);
        }, function(reason) {
            $scope.error = reason;
        });
        console.log($scope.art);
}])
.factory('getArt', ['$http', '$q', function($http, $q) {
   return function() {

        var deferred = $q.defer();
        $http.post("/php/getArt.php")
            .success(function (response) {
                if (response == "nope") {
                    deferred.reject("Whoopsie! Something seems to have gone wrong.");
                } else {
                    deferred.resolve(response);
                }
            })
            .error(function () {
                deferred.reject("There seems to be an issue with your connection.");
             });
        return deferred.promise;
   };
 }]);

非常感谢!!

Answer 1

http调用是异步的，因此您在 http调用完成之前console.log($scope.art);执行。您可以在then回调中进行任何后期处理。

或者，如果您只需要为用户显示art对象，它将在服务器返回dat后立即显示。也许你可以添加这样的东西来表明数据正在从服务器加载：

＆＃13;
＆＃13;
<div ng-if="!art">loading...</div> <div ng-if="art">... display it for the user ...</div>
＆＃13;
＆＃13;
＆＃13;

Answer 2

在以下代码中

app.controller('FeedbackController', ['$scope','getArt', function($scope, getArt) {
    var art = getArt();
    art.then(function(result) { 
        $scope.art = result; //line 4, executed some time in the future 
        console.log($scope.art); //line 5
    }, function(reason) {
        $scope.error = reason;
    });
    console.log($scope.art); //line 9, synchronously, executed right away
}])

第9行立即在服务器调用被触发后立即执行，这是在第4行和第5行之前（履行承诺时），所以当发生这种情况时，$ scope.art仍然是未定义（或者仍有一些旧值）

供参考，这是一篇很好地解释JavaScript异步的文章http://tutorials.pluralsight.com/front-end-javascript/introduction-to-asynchronous-javascript

使用promises的$ scope问题

2 个答案: