将then函数中的值赋给变量promise

时间:2015-10-03 15:07:22

标签: angularjs deferred

我正在努力接受承诺。所以我写了一个示例代码,如下所示

<!doctype html>
<html  ng-app="myApp">
  <head>
    <meta charset="UTF-8"> 
    <script src="../angularjs.js"></script>
  </head>
  <body>
    <div ng-controller="CartController">
    </div>

  <script>
    var app = angular.module('myApp', []);

    app.controller('CartController',  function($scope, $q,$http){   

    $scope.newFun = function()
    {
      var defered = $q.defer();
      $http.get('data.json').success(function(data) {
        console.log(data);
        defered.resolve(data);
      })
      .error(function(data, status) {
        console.error('Repos error', status, data);
      });
      return defered.promise;
     }

     var newdata = $scope.newFun().then(
      function(data1) 
      {
        //console.log(data1);
        return data1;
      });

      console.log(newdata);
    });
  </script>
  </body>
</html>

这里我试图返回从then函数获得的数据并将其分配给变量。但我得到一个$$状态对象,它有一个保存数据的值键。直接分配值是可能的还是在then函数里面我需要使用scope对象然后访问数据?

1 个答案:

答案 0 :(得分:4)

您的代码存在许多问题。首先:您can't return from asynchronous operations,您需要使用回调。在你的情况下,因为你正在使用promises使用它的then API。在其回调中,您可以将数据分配给变量。 Angular将执行其余的同步范围绑定(通过运行新的摘要)。

下一个问题:请勿使用$q.defer(),您根本不需要它。这是最受欢迎的anti-pattern

还有一件事:不要在控制器中发出任何http请求,这不适合它。而是将此逻辑移至可重用服务。

所有这些看起来都像这样:

var app = angular.module('myApp', []);

app.controller('CartController', function ($scope, data) {
    data.get().then(function (data) {
        var newdata = data;
    });
});

app.factory('data', function($http) {
    return {
        get: function() {
            return $http.get('data.json').then(function (response) {
                return response.data;
            }, function (err) {
                throw {
                    message: 'Repos error',
                    status: err.status, 
                    data: err.data
                };
            });
        }
    };
});