AngularJS：使用回調和承諾

Question

我無法圍繞異步請求的概念包裝我的大腦。

我有我的看法，這是從一個供應商創建一個對象實例的控制器：

va.controller('VaCtrl',function($scope,$shipment){ 
    $scope.shipment = $shipment.Shipment();  
}); 

提供者：

Shipment.provider('$shipment',function(){ 

    this.$get = function($http){ 

     function Shipment(){ 

     } 

     Shipment.prototype.fetchShipment = function(){ 
      var shipment = undefined; 
       $http.post('../sys/core/fetchShipment.php',{ 
         // some data to POST 
      }).then(function(promise){ 
        shipment = promise.data; 
       }); 

      return shipment; 
     }; 

     return { 
      Shipment: function(){ 
       return new Shipment(); 
      } 
     } 
    } 
}); 

我的目標是獲得對數據的訪問從我的控制器裏面的Shipment.prototype.fetchShipment()。我的方法：

$scope.fetchShipment = function(){ 
     var shipment = $scope.shipment.fetchShipment(); 
     console.log(shipment); // undefined 
}; 

但是，這將返回undefined。

我讀了關於$ q，並推遲，承諾和回調，現在我就像跆拳道;我想要做的就是將檢索到的數據推送到我的控制器，這樣做的最佳方式是什麼？

Answer 1

您應該修改您的代碼，如下所示，直接從fetchshipment返回承諾，然後在控制器中使用then（）。

Shipment.prototype.fetchShipment = function(){ 

    return $http.post('../sys/core/fetchShipment.php',{ 
     // some data to POST 
    }) 
}; 


$scope.fetchShipment = function(){ 
    var shipment = $scope.shipment.fetchShipment().then(function(data){; 
     console.log(data); 
    }); 
}; 

解讀代碼：

調用$ HTTP返回，當你從服務器獲取數據，其解決的承諾。在上面的代碼中，我已經從服務函數返回$ http.post返回一個承諾。因此，在控制器中，您正在等待承諾解決，並且在承諾解決後，結果將記錄到控制檯。

閱讀上的角度更承諾文檔：。

• http://docs.angularjs.org/api/ng $ Q
• http://docs.angularjs.org/api/ng $ HTTP

Answer 2

就在給你舉個例子，如何讓你的例子與自己的工作諾言。 它更簡單，如果你使用$ HTTP內置的承諾，所以它是一個$ Q-例如：

angular.module('myApp', []).controller("myAppCtrl", function ($scope, $shipment) { 
    $shipment.Shipment().fetchShipment().then(function (shipment) { 
     $scope.shipment = shipment 
    }); 
}).provider('$shipment', function() { 
    this.$get = function ($http, $q) { 

     function Shipment() { 

     } 

     Shipment.prototype.fetchShipment = function() { 
      var defered = $q.defer(); 
      demodata = {name: "jan", id:8282}; 
      $http.post('/echo/json/', 'json=' + encodeURIComponent(angular.toJson(demodata)), { 
       headers: { 
        'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8' 
       } 
      }).then(function (response) { 
       //resolve promise 
       defered.resolve(response.data); 
      }); 

      return defered.promise; 
     }; 

     return { 
      Shipment: function() { 
       return new Shipment(); 
      } 
     } 
    } 
}); 

<div ng-controller="myAppCtrl">{{shipment}}</div> 

的jsfiddle（使用的jsfiddle回波服務爲數據提供者）： http://jsfiddle.net/alfrescian/ayke2/

更多的承諾：

http://blog.parse.com/2013/01/29/whats-so-great-about-javascript-promises/ http://www.egghead.io/video/o84ryzNp36Q AngularJS : Where to use promises? stackoverflow.com/questions/15604196/... egghead.io/video/o84ryzNp36Q