第一次调用角度资源返回未定义答案

【问题标题】：Angular resource return undefined for the first time calling第一次调用角度资源返回未定义
【发布时间】：2014-08-27 13:44:12
【问题描述】：

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

--- 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);

---日志---

从服务器获取国家

未定义

【问题讨论】：

你从你的服务器得到一个有效的响应吗？如果您从浏览器中检查响应数据，它会是什么样子？
是的，我做到了，它只是一个 json 数据。再一次，我第一次打电话时遇到了问题。感谢您抽出时间检查我的问题。

标签： angularjs

【解决方案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，并通过工厂访问数据，但设置为返回数据承诺可以很好地暴露异步性质的请求。

【讨论】：

问题只是第一次调用服务，我试过你的方法，还是一样的问题。
显示您更新的代码，我可以进一步查看

【解决方案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 的绑定时，您也可以直接使用数据，因为下载数据时会更新视图。

【讨论】：