Question

我有以下代码，在第一次查询后，响应数据未定义？有谁知道这背后的原因？

--- json数据---

{
"weddings": [ 
    {
        "id": "1",
        "name": "D",
        "currency": [
            {"USD": "10"},
            {"KHR": "20000"}
        ],
        "date": "12/12/2012",
        "place": "Bopha Tep",
        "paid": false
    },
    {
        "id": 2,
        "name": "C",
        "currency": [
            {"USD": "10"},
            {"THB": "200"}
        ],
        "date": "13/12/2012",
        "place": "Bopha Charkasamrong",
        "paid": false
    },
    {
        "id": 3,
        "name": "A",
        "currency": [
            {"KHR": "10000"},
            {"THB": "200"}
        ],
        "date": "14/12/2012",
        "place": "Bopha Charkasamrong",
        "paid": false
    },
    {
        "id": 4,
        "name": "B",
        "currency": [
            {"KHR": "20000"},
            {"THB": "100"},
            {"USD": "20"}
        ],
        "date": "15/12/2012",
        "place": "Bopha Charkasamrong",
        "paid": false
    }
]

}

---工厂---

.factory('WeddingService',['$resource',function($resource){
    var path = 'app/scripts/factories/data/weddings.json';

    var data;
    var resource = $resource(path,{},{
         query: { method: "GET", isArray: false }
    });

    var weddings = function(){
        resource.query().$promise.then(function(response){
            data = response.weddings;
        });
        return data;
    }

    return {
        list: function(){
            if(data){
                console.log("returning cached data");
                return data;
            }else{
                console.log("getting countries from server");
                return weddings();
            }
        },
        get: function(find_id){
            return _.findWhere(this.list(),{id:find_id});
        },
    }
}])

---控制器---

$scope.weddings = wedding.list();
console.log($scope.weddings);

--- ---登录

从服务器获取国家

未定义

Answer 1

从服务器获取数据是异步的，因此您需要使用资源中的promise来了解数据何时已解析并获取数据。请参阅https://docs.angularjs.org/api/ngResource/service/$resource专门搜索$ promise，另见其他SO帖子：

AngularJS resource promise

忘了这篇文章，但

.factory('WeddingService',['$resource',function($resource){
    var path = 'app/scripts/factories/data/weddings.json';

    var data;
    var resource = $resource(path,{},{
         query: { method: "GET", isArray: false }
    });

    var weddings = function(){
        //this will return the promise from the call to .then
        return resource.query().$promise.then(function(response){
            data = response.weddings;
        });
    }

    return {
        list: function(){
            if(data){
                console.log("returning cached data");
                return $q.when(data); // return a promise to keep it consistent
            }else{
                console.log("getting countries from server");
                return weddings();
            }
        },
        get: function(find_id){
            return _.findWhere(this.list(),{id:find_id});
        },
    }
}])

控制器

wedding.list().then(function(data){
  $scope.weddings = data;
  console.log(data);
});

实际上，我通常只是从作用域或控制器定义引用WeddingService，并在大多数情况下通过工厂访问数据，但是让设置返回数据的承诺可以很好地暴露异步性质请求。

Answer 2

似乎您在设置之前使用数据

var weddings = function(){
    resource.query().$promise.then(function(response){
        data = response.weddings;
    });
    // data is not set until the query above is completed
    return data;
}

您需要返回承诺并在使用代码时等待，或者在完全下载数据时使用$broadcast('event');和$on('event', function() { })事件系统触发其他代码。

您可以使用第一个选项，如下所示：

var weddings = function(){
    data = resource.query(function(result) {
      console.log('wedding is set to ', result);
    },
    function(error) {
      console.error('something went wrong ', error);
    });
    return data;
}

现在，在使用weddings()的代码中，您可以使用$promise等待数据，如果查询完成，您可以像平常一样使用数据。

使用angular html中的绑定时，您也可以直接使用数据，因为在下载数据时视图会更新。

第一次调用时，角度资源返回未定义

2 个答案: