角度承诺和$ http

Question

ng.module('app')
    .service('CardService', ['$http', CardService])

function CardService($http) {
    this.$http = $http;
    var self = this;

  $http.get('http://localhost:3000/db').success(function(data) {
      self.items = data;
      console.log(self.items);
  });
  console.log(self.items);
}

CardService.prototype.list = function() {
        console.log(self.items);
        return this.items;
};

和结果

service.js：14未定义

service.js：18未定义

service.js：18未定义

service.js：12 [Object，Object，Object]

我该如何解决这个问题？

Answer 1

Ajax调用是异步的。 等待.get响应时，它将允许线程继续运行。

您正在执行的console.logs将按此顺序调用。

1. 在ajax调用下方的console.log
2. 列表原型内的console.log

（在ajax成功内）

3. 列表原型内的console.log
4. console.log下面self.items = data

不是成角度的方式，而是...仅当在ajax调用中初始化列表时，才应使用原型。

Answer 2

根据最佳实践，您应该执行所有与http请求相关的工作，以使用工厂或服务获取数据。 由于它是异步流，因此应使用$ q来处理它。 因此，您的功能将按照以下说明进行。 如果我误解了你的问题，请纠正我。

app.factory('CardService',function($http,$q) {
var obj = {};

    obj.getCardServiceData = function(){
        var defer = $q.defer();
        $http.get('http://localhost:3000/db').then(function(response) {
         defer.resolve(response.data);
       },function(error){
          defer.reject(error);
       });
       return defer.promise;
    }

    return obj;

});

app.controller('YOUR CONTROLLER',function($scope,CardService){
      CardService.getCardServiceData().then(function(response){
           $scope.self = response.data;
           console.log($scope.self);
       },function(error){
           alert("There seems to be some error!");
           console.error(error);

       });
});