Angular 中 AJAX 的延迟承诺

Question

我正在尝试通过对 API 的 AJAX 调用将数据发送到我的视图。我能够成功点击我的 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 有我的数据，但当我调用该函数时，它从未 returned。我是 angular 的新手，所以我将不胜感激任何帮助或见解。

Answer 1

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

$resolved: true after first server interaction is completed (either with success or rejection), false before that.

所以在控制器中：

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

并且在视图中：

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

Answer 2

您应该将工厂定义为

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

正在使用 ngResource or from factory promise callback are viable options, but there's one more way nobody mentioned yet: resolve data to controller via 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();
      }
    }
  })
})

resolve上的tweets属性会将加载的数据作为tweets注入控制器，你所要做的只是分配接收到的数据：

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

此外，Tweets 服务可能如下所示：

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

基本上，它公开了 return 承诺的方法，returning 一些数据（$timeout return 也承诺，所以我用它代替 $http 用于示例目的）。

Full example on JS Bin.

Angular 中 AJAX 的延迟承诺

Deferred Promises with AJAX in Angular

ajax

angularjs

angular-promise