无法访问 Angular Promise 的属性答案

【问题标题】：Can't access attribute of Angular Promise无法访问 Angular Promise 的属性
【发布时间】：2014-08-21 04:04:45
【问题描述】：

我正在尝试使用 Angular 编写一个 JS 函数，以便我可以让它返回一个值，然后在范围上设置一个等于该值的变量。我返回一个 promise 对象，根据 chrome 控制台，它有一个包含我的数据的属性，但是当我尝试访问它时，它说它是未定义的。

代码：

   function getData($scope, $http) { //line 71
    output = $http.get('/static/json/tickets').
        success(function(data, status) {
            output.data = data;
            console.log(output.data); //Within the proper scope; displays the data array
            output.status = status;
        }).
        error(function (data, status){
            output.data = data || "Error";
            output.status = status;
        });
        console.log(output); //displays the promise object, with attribute data
        console.log(output.data); // displays 'undefined' (out of scope?)
        return output


    out = getData($scope, $http);
    console.log(out); // Displays the promise object, with attribute data
    console.log(out.data); // displays 'undefined'
    $scope.data = out.data;

Chrome 控制台：

有什么方法可以在 .success(data, status) 函数中放置一个 return 语句，使父函数 (getData) 返回该值？我对 JS 相当陌生，虽然我知道可以从嵌套函数返回，但 .success 是 $http.get 返回的 promise 的方法，并且试图返回 output.data 会给出一个未定义的对象。这段代码：

function getData($scope, $http) {
dataout = {};
output = $http.get('/static/json/tickets').
    success(function(data, status) {
        dataout = data;
        console.log(output.data); //Within the proper scope; displays the data array
        output.status = status;
    }).
    error(function (data, status){
        output.data = data || "Error";
        output.status = status;
    });
    console.log(output); //displays the promise object, with attribute data
    console.log(output.data); // displays 'undefined' (out of scope?)
    return dataout

还返回一个未定义的对象，这让我觉得 Angular 正在做一些我没有正确处理的异步操作。

【问题讨论】：

标签： javascript angularjs rest scope angularjs-scope

【解决方案1】：

这不是你使用 Promise 的方式。 output 变量在数据存在之前被实际记录。但是 chrome 控制台会以当前数据状态显示对象。

尝试记录 out.data.toString() 它将记录“未定义”。

试试这个：

function getData($http) {
 return $http.get('/static/json/tickets').
    success(function(data, status) {
        console.log(data); //Within the proper scope; displays the data array
        return data;
    }).
    error(function (data, status){
        return status;
    });
}

$http 将返回一个承诺，您在其中附加 success 和 error 回调，并通过在这些回调中返回一个值，Angular 将包装一个承诺并返回它。

然后这样称呼它：

getData($http).then(function(data){
  console.log(data);
});

也许将方法移动到服务中，不要将$http 作为参数传递。

【讨论】：

这行得通，谢谢。给我带来麻烦的是回调。

【解决方案2】：

您需要先让 Promise 解决，然后才能获取数据。这是一个使用工厂和控制器的示例：

app.factory('Tickets',function($http,$q) {
    var dataout = $q.defer();

    $http.get('/static/json/tickets/').success(function(data,status) {
            dataout.resolve(data);
    });

    return {
        getData: function() {
            return dataout.promise;
        }
    }
});

app.controller('GetData',function($scope,Tickets) {
    Tickets.getData().then(function(data) {
        $scope.out = data;
    });
});

【讨论】：