角度中的承诺方法

Question

我试图为我的帖子创建一个延迟加载解决方案，见下文：

$scope.loadMore = function() {
  if(hasRunBefore===0){
      page+=1;
  }
  if($scope.postsCount > $scope.posts.length){
      $http.get('/api/posts', {params: { page: page, pageSize: 10 }})
      .then(function(res){
          var morePosts = res.data.posts;
          if(morePosts && morePosts.length > 0){
              loadData(morePosts);
              page+=1;
              hasRunBefore+=1;
          }
      });
      }
  };
};
  var loadData = function(posts){
      $scope.posts = $scope.posts.concat(posts);
  };

一些注意事项：

1. $scope.postsCount是通过在 Mongo 中获取整个表的长度来抓取的，在这种情况下，假设这是 50
2. 每当到达前端页面的末尾时，都会调用$scope.loadMore(infinite-scroll有人感兴趣(
3. $scope.loadMore可以多次调用，因为它是在到达页面末尾时触发
的

问题是 - loadData()是附加到$scope.posts的函数，所以if($scope.postsCount > $scope.posts.length)总是true

问题 - 我是 Angular 1.6.x 中的承诺方法的新手，即：.then。我需要如何重组它，以便等待loadData()完成执行，以便if($scope.postsCount > $scope.posts.length)准确？

Answer 1

创建加载属性并在请求期间将其设置为 true。 如果再次调用加载更多函数，请检查加载属性

$scope.loading = false
$scope.loadMore = function() {
  if($scope.loading) return  // if page still loading dont allow
  $scope.loading = true

  if(hasRunBefore===0){
      page+=1;
  }

  if($scope.postsCount > $scope.posts.length){
      $http.get('/api/posts', {params: { page: page, pageSize: 10 }})
      .then(function(res){
          $scope.loading = false; // set loading as false after finish request
      });
      }
  };
};