Question

我正在尝试将数据从AJAX调用发送到我的API。我能够成功点击我的API并获取数据，但是在AJAX调用回来之前我遇到了视图渲染问题。

我正在尝试将我的AJAX调用包装在Promise中，但它无效。这是我的布局

控制器

.controller('DashCtrl', function($scope, Tweets) {
  $scope.tweets = Tweets.all()
})

工厂正在进行ajax调用

.factory('Tweets', function($http) {
  $http.get('http://localhost:3000/tweets')
    .success(function(data) {
      var tweets = data
      debugger
  })

  return {
    all: function() {
      //should return the results of the AJAX call when it's complete
    }
  }
});

我已经尝试将ajax调用包装到一个函数中并使用.then（function（payload）{return payload.data}） - Payload.data有我的数据，但是当我调用该函数时它永远不会返回。我是棱角分明的新人，所以我很感激任何帮助或见解。

Answer 1

您应该将工厂定义为

.factory('Tweets', function($http) {
  return {
    all: function() {
      return $http.get('http://localhost:3000/tweets')
        .then(function(response) {
          return reponse.data;
      })
    }
  }
});

然后将控制器更改为

.controller('DashCtrl', function($scope, Tweets) {
  Tweets.all().then(function(data) {
    $scope.tweets = data;
  });
})

Answer 2

使用$resource服务。文档没有提到它，但源代码中的评论确实如此。

完成第一次服务器交互（成功或拒绝）后{p> $resolved：true，false之前。{/ p>

所以在控制器中：

$scope.tweets = $resource('/tweets').query()

在视图中：

<div ng-if="tweets.$resolved">

Answer 3

使用ngResource或工厂承诺回调加载数据是可行的选择，但还有一种方法没人提到：通过route definition将数据解析到控制器。这种方法允许编写简单的控制器，根本不知道如何加载数据。在大多数情况下，如果您不需要动态加载数据（例如分页或无限滚动），这将是绰绰有余的。

您需要定义路线和解决功能：

angular
.module('app', ['ngRoute'])
.config(function ($routeProvider) {
  $routeProvider
  .when('/', {
    controller: 'ctrl',
    controllerAs: 'view',
    templateUrl: 'view.html',
    resolve: {
      tweets: function (Tweets) {
        return Tweets.all();
      }
    }
  })
})

tweets上的resolve属性会将加载的数据作为tweets注入控制器，您只需分配接收的数据：

.controller('ctrl', function (tweets) {
  this.tweets = tweets;
});

此外，这里有Tweets服务的样子：

.factory('Tweets', function ($timeout) {
  function all () {
    return $timeout(function () {
      return ["hey", "there"];
    });
  }
  return {
    all: all
  };
})

基本上，它暴露了返回promise的方法，返回了一些数据（$timeout也返回了promise，所以我已经使用它而不是$http作为目的）。

Full example on JS Bin

Angular中使用AJAX延迟的Promise

3 个答案: