Javascript AngularJS$q承诺不会按预期工作_Javascript_Angularjs_Promise_Q

Javascript AngularJS$q承诺不会按预期工作

javascript angularjs

Javascript AngularJS$q承诺不会按预期工作,javascript,angularjs,promise,q,Javascript,Angularjs,Promise,Q,看来我还是不太理解承诺。下面是一个控制器，它通过一个资源获取一系列帖子。它应该首先获取数组，然后将数组作为一个单独的函数加载到作用域中。这不起作用，因为promise中的所有函数似乎仍然被同步调用。例如，名为getPosts（）的函数需要一秒钟的时间，因为我在服务器上插入了一个延迟来模拟延迟。但是，尽管占用了一秒钟，承诺中的所有其他函数都是同步调用的。任何线索都很好 var postController = myapp.controller('postController', function

看来我还是不太理解承诺。下面是一个控制器，它通过一个资源获取一系列帖子。它应该首先获取数组，然后将数组作为一个单独的函数加载到作用域中。这不起作用，因为promise中的所有函数似乎仍然被同步调用。例如，名为

getPosts（）

的函数需要一秒钟的时间，因为我在服务器上插入了一个延迟来模拟延迟。但是，尽管占用了一秒钟，承诺中的所有其他函数都是同步调用的。任何线索都很好

var postController = myapp.controller('postController', function ($q, $rootScope, $scope, Post, $routeParams) {

    var new_posts = []

    $scope.new_post_count = 0

    var getPosts = function () {
        $scope.refreshing = true
        var params = $routeParams
        Post.query(params).
            $promise.then(
            function (response) {
                $scope.refreshing = false;
                new_posts = response
                $scope.new_post_count = new_posts.length - $scope.posts.length
            },
            function (response) {
                alert('Snap! ' + response.status)
            }
        )
    }

    $scope.refreshPosts = function () {
        $scope.posts = new_posts
        $scope.new_post_count = 0
    }

    /* all the functions below (marked 1, 2, 3) within the promise still called synchronously.
    I thought they would wait until the previous function has finished? */
    var defer = $q.defer()
    defer.promise
        .then(function () {
            // 1
            console.log('calling getposts')
            getPosts()
        })
        .then(function () {
            // 2
            console.log('calling refresh posts')
            $scope.refreshPosts()
        })
        .then(function () {
            // 3
            console.log('calling interval')
            $interval(function () {
                    getPosts()
                }, 7000, 0
            )
        })
    defer.resolve()

为什么不在

getPosts

的回调中调用您的

refreshPosts

。像这样：

var getPosts = function () {
        $scope.refreshing = true
        var params = $routeParams
        Post.query(params).
            $promise.then(
            function (response) {
                $scope.refreshing = false;
                new_posts = response
                $scope.new_post_count = new_posts.length - $scope.posts.length;
                $scope.refreshPosts();
            },
            function (response) {
                alert('Snap! ' + response.status)
            }
        )
    }

如果您确实需要使用

调用它，那么

就像在您的代码中一样。您需要在函数中返回一个承诺

var getPosts = function () {
        var deferred = $q.defer();
        $scope.refreshing = true;
        var params = $routeParams
        Post.query(params).
            $promise.then(
            function (response) {
                $scope.refreshing = false;
                new_posts = response
                $scope.new_post_count = new_posts.length - $scope.posts.length;

                deferred.resolve(response); //resolve deferred object 
            },
            function (response) {
                alert('Snap! ' + response.status);
                deferred.reject(response); //reject deferred object 
            }
        );
        return deferred.promise; //return a promise.
}

然后修改承诺链接，如下所示：

function Refresh(){
    var defer = $q.defer()
    defer.promise
        .then(getPosts) //modify it here
        .then(function () {
            // 2
            console.log('calling refresh posts')
            $scope.refreshPosts();
        })
        .then(function () {
            // 3
            console.log('calling interval')
            $interval(function () {
                    Refresh()
                }, 7000, 0
            )
        })
    defer.resolve();
};

为什么不在

getPosts

的回调中调用您的

refreshPosts

。像这样：

var getPosts = function () {
        $scope.refreshing = true
        var params = $routeParams
        Post.query(params).
            $promise.then(
            function (response) {
                $scope.refreshing = false;
                new_posts = response
                $scope.new_post_count = new_posts.length - $scope.posts.length;
                $scope.refreshPosts();
            },
            function (response) {
                alert('Snap! ' + response.status)
            }
        )
    }

如果您确实需要使用

调用它，那么

就像在您的代码中一样。您需要在函数中返回一个承诺

var getPosts = function () {
        var deferred = $q.defer();
        $scope.refreshing = true;
        var params = $routeParams
        Post.query(params).
            $promise.then(
            function (response) {
                $scope.refreshing = false;
                new_posts = response
                $scope.new_post_count = new_posts.length - $scope.posts.length;

                deferred.resolve(response); //resolve deferred object 
            },
            function (response) {
                alert('Snap! ' + response.status);
                deferred.reject(response); //reject deferred object 
            }
        );
        return deferred.promise; //return a promise.
}

然后修改承诺链接，如下所示：

function Refresh(){
    var defer = $q.defer()
    defer.promise
        .then(getPosts) //modify it here
        .then(function () {
            // 2
            console.log('calling refresh posts')
            $scope.refreshPosts();
        })
        .then(function () {
            // 3
            console.log('calling interval')
            $interval(function () {
                    Refresh()
                }, 7000, 0
            )
        })
    defer.resolve();
};

由于

$timeout

也返回promise，因此我们可以模拟流程。此外，在承诺链中，我们返回下一个

的承诺，然后（/*..*/）

：

请参见和控制台中的完整演示

希望能有所帮助

参考资料：承诺

承诺代表未来的价值，通常是未来的结果异步操作，并允许我们定义一旦此值可用，或发生错误

承诺链：

由于

$timeout