正在筛选回调函数中的数据

Filtering data from callback function

本文关键字：数据 函数 回调 筛选      更新时间：2024-04-05

在使用AngularJS时，我一直遇到如何处理异步行为和回调函数的问题。在下面，我如何修改PostsService.getPostBySlug以返回所需的帖子？

张贴服务

Website.factory( 'PostsService', 
[ '$filter', '$http', function( filter, $http ) 
{
    // declare service
    var PostsService = {};

返回所有帖子（读取posts.json）

    PostsService.getPosts = function( callback )
    {
        $http
            .get( 'posts/posts.json' )
            .success( callback );
    }

返回一个基于其碎片的帖子

    PostsService.getPostBySlug = function( slug, callback )
    {
        // declare post
        var postForSlug = null;
        console.log( postForSlug ); // prints 'null'
        // get all posts from service
        var posts = PostsService.getPosts( function( data )
        {
            // all posts
            var posts = data;
            console.log( posts ); // prints array of objects
            // return all posts
            return posts;
        });
        // filter by slug
        postForSlug = filter( 'filter' )
        ( 
            posts,
            { 
                'slug': slug
            } 
        );  
        console.log( postForSlug ); // prints 'undefined'
        // return post for the given slug
        return postForSlug;
    }

退货服务

    // return service
    return PostsService;
}]);

输出为

null BlogController.js:26
undefined BlogController.js:51
[Object, Object] BlogController.js:33

这表明执行的顺序与我预期的不同。我知道这是关于异步行为和回调函数的，但我真的不知道如何解决它。我一直遇到这个问题，如果有人能告诉我如何处理这种情况，我将不胜感激。

同时，以下是我要做的。

WebSite.controller('BlogController',function(PostsService,$scope){
    PostService.getPosts()
        .then(function(posts){
            $scope.posts = posts;
        });
    PostService.getPostBySlug()
        .then(function(post){
            $scope.postBySlug = post;
        });
});

你的PostsService看起来是这样的：（一个被锁住的承诺！）

PostsService.getPosts = function()
{
    return $http.get('posts/posts.json').then(function(response){
        var data = response.data;
        //look it over, is it what you want?
        return data;
    },function(errResponse){
        //handle error.
    });
}

至于过滤器。它们是使用|操作符在视图中应用的，在视图中具有所需的参数，在模板之外它们根本没有用处。

所以你的getPostsBySlug应该是这样的：

PostsService.getPostBySlug = function( slug )
{     
    return this.getPosts().then(function(posts){
        var post = {};
        angular.forEach(posts,function(value,index){
            if(value.slug == slug){
                post = value;
            }             
        });
        return post;
    });
}

希望这能有所帮助！

我会使用promise和$q promise Api来实现这一点。

参见http://jsfiddle.net/6WuM3/

module.factory('PostsService', ['$filter', '$http', '$q', function (filter, $http, $q) {
    // declare service
    var PostsService = {};
    PostsService.getPosts = function () {
        var defered = $q.defer();
        $http.get('posts/posts.json').then(function(response){
          defered.resolve(response.data);
        });
        return defered.promise;
    }
    PostsService.getPostBySlug = function (slug) {
        var defered = $q.defer();
        PostsService.getPosts().then(function(posts){
            var filtered = filter('filter')(posts, {
                'slug': slug
            });
            defered.resolve(filtered);
        });
        return defered.promise;
    }
    return PostsService;
}])

关于：）

相关文章：