Question

我试着理解$ q，我编写代码来从wordpress api v2获取数据：用$ http服务！它工作正常，但我理解这个代码是错误的，因为我需要异步代码。所以请帮我改进我的代码

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)
}]);

结果（控制台）：

[ ]
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

我的结果很好！但我知道我的方式是错的因为我打电话给＆＃34; console.log（$ scope.myposts）＆＃34; ，还没有完成获取所有数据。

我从互联网搜索中了解到，我需要使用$ q服务。但我不知道它将如何在我的代码中。有人可以帮助我吗？！

Answer 1

您需要创建一个满足您需求的服务，控制器必须只包含视图所需的业务逻辑。

我嘲笑你的apis，这个例子需要一些时间来渲染......等等，它有效。

＆＃13;

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])

＆＃13;

<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>

＆＃13;

Angular使用$ q改进我的代码

1 个答案: