Angular用$ q改善我的代码

Question

i try to understand $q , i write code to get data from wordpress api v2: with $http service! it work fine but i understand this code wrong because i need asynchronous code. so please help me to improve my code

myApp.controller('mainCtrl',['$scope','$http',function($scope,$http){
    $scope.myposts = [];


 function sort (){
     $http.get('http://www.ipets.co.il/jobs/wp-json/wp/v2/posts').success(function(posts){
                 angular.forEach(posts , function(post,key){
                     $http.get('http://www.ipets.co.il/jobs/wp-json/wp/v2/media/'+post.featured_media
).success(function(media){

                    var postObj = {}
                        postObj.id = post.id
                        postObj.title = post.title.rendered
                        postObj.image = media.source_url
                        $scope.myposts.push(postObj)

                    // console.log($scope.myposts)

            })

                })


        })  
} 
sort();
console.log($scope.myposts)
}]);

Results (console):

[ ]
0: Object:
  id:19
  image:"http://ipets.co.il/jobs/wp-content/uploads/2016/07/588.jpg"
  title:"דרוש מלצר/ית לאולם ארועים ״נסיה״"
1: Object:
  id:14
  image:url
  title:title

my result it fine! but i know my way is wrong because when i call "console.log($scope.myposts)" , is not finish to get all data.

i understand from internet search , i need to use $q service. but i dont know how it will be in my code. some one can help me?!

Answer 1

You need to create a Service that does what you need, controllers must be include only the Business Logic that is required by the view.

I mocked your apis, this example requires a bit of time to be rendered... wait, it works.

 function PostsServiceFactory($http, $q) { //const POSTS_API = 'http://www.ipets.co.il/jobs/wp-json/wp/v2/posts'; //const MEDIA_API = 'http://www.ipets.co.il/jobs/wp-json/wp/v2/media/'; // MOCK YOUR API WITH JSON FAKE const FAKE = "https://jsonplaceholder.typicode.com" const POSTS_API = `${FAKE}/posts`; const MEDIA_API = `${FAKE}/photos`; this.getPosts = function() { return $http .get(POSTS_API) .then(result => result.data) .then(posts => $q.all(posts.map(post => { let media = post.featured_media || ""; return $http .get(`${MEDIA_API}${media}`) .then(result => result.data) .then(media => { return { "id": post.id, "title": post.title, "image": media.url }; }) ; }))) ; } } function TestCtrl($scope, PostsService) { $scope.posts = "LOADING..."; PostsService .getPosts() .then((posts) => { $scope.posts = posts; }) ; } angular .module('test', []) .service("PostsService", ["$http", "$q", PostsServiceFactory]) .controller("TestCtrl", ["$scope", "PostsServiceFactory", TestCtrl]) 

 <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> <section ng-app="test"> <article ng-controller="TestCtrl"> <div ng-bind="posts | json"></div> </article> </section>