AngularJS / Ionic承诺 - 有时页面加载永远

时间:2016-04-13 12:47:23

标签: angularjs asynchronous ionic-framework promise q

我在我的控制器中使用promises,并且大多数时候它运行良好。但有时它只是永远加载而WordPress.getAllCategories()函数甚至不会被调用。

这是我的控制器: var mod = angular.module(' app.controllers.home',[]);

mod.controller('HomeCtrl', function ($scope, $q, $sce, $ionicPlatform, WordPress, Loading) {
  console.log('HomeCtrl init');

  $scope.$on('$ionicView.enter', function () {
    Loading.show();

    WordPress.getAllCategories()
      .then(function (cats) {
        console.info(angular.toJson(cats));
        console.info('cats ^');
        $q.all(cats.data.map(function (cat) {
          var d = $q.defer();

          console.error(cat.name);

          WordPress.getLatestPostOfCategory(cat.id)
            .then(function (post) {

              console.debug(post.data.title.rendered);

              WordPress.getMediaById(post.data.featured_media)
                .then(function (media) {

                  console.log(media.data.source_url);

                  cat.firstPost = {};
                  cat.firstPost.id = post.data.id;
                  cat.firstPost.title = post.data.title.rendered;
                  cat.firstPost.content = post.data.content.rendered;

                  if (cat.firstPost.title.length > 50) {
                    cat.firstPost.title = cat.firstPost.title + '...';
                  }

                  if (cat.firstPost.content.length > 70) {
                    cat.firstPost.content = cat.firstPost.content.substr(0, 60) + '...';
                  }
                  cat.firstPost.thumbnail = media.data.source_url;
                  d.resolve(cat);
                }, function (err) {
                  console.error(angular.toJson(err));
                });
            });

          return d.promise;
        })).then(function (cats) {
          console.log('Loaded all articles and for main page.');
          $scope.homeCategories = cats;
          Loading.hide();
        });
      });
  });
});

我的控制器有什么问题吗? 附:我还调试了所有WordPress服务功能,它们工作正常,并提供所需的数据。

修改

有时当它永远加载时,我看到console.error(cat.name);调试消息只记录3条消息。但仍然继续下一个功能...

1 个答案:

答案 0 :(得分:0)

这是我通过Bergi的建议解决的问题。

求助来源:Promise anti pattern by Gorgi Kosev (bluebird)

   var categories = [];

    function sort() {
      return WordPress.getAllCategories()
        .then(function (cats) {
          console.log('thens');
          return $q.all(cats.data.map(function (cat) {
            console.info('cat: ' + cat.name);

            var category = {};
            category.name = cat.name;

            return WordPress.getLatestPostOfCategory(cat.id)
              .then(function (post) {

                var post = post.data;
                category.post = {};
                category.post.id = post.id;
                category.post.title = post.title.rendered;
                category.post.content = post.content.rendered;

                console.log('ID: ' + category.post.id + ', title: ' + category.post.title);

                return WordPress.getMediaById(post.featured_media);
              }).then(function (media) {
                category.post.thumbnail = media.data.source_url;

                categories.push(category);
                console.log('Pushed category "' + category.name + '"');
              });
          }));
        }, function (err) {
          console.error('ERR1');
          console.error(angular.toJson(err));
        });
    }

    sort()
      .then(function () {
        console.info('LOADED ALL CATEGORIES');
        $scope.categories = categories;
      }, function (err) {
        console.error('err:' + angular.toJson(err));
      });