AngularJS: Working with callbacks and promises

Question

I cannot wrap my brain around the concept of asynchronous requests.

I have a controller for my view that instantiates an object from the provider:

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

The supplier:

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

My goal is to access data from Shipment.prototype.fetchShipment() inside my controller. My approach:

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

However, this will return undefined.

I read about $ q and canceled promises and callbacks, and now I look like WTF; all i want to do is push the received data to my controller, what is the best way to do this?

Answer 1

You must modify your code as shown below to return the promise directly from fetchshipment, and then use then () inside your controller.

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

Explanation for the code:

The $ http call returns a promise that is resolved when receiving data from the server. In the above code, I returned $ http.post from a service function that returns a promise. Thus, in the controller, you expect the promise to be resolved, and when the promise is resolved, the result is logged to the console.

More on angular promise documentation:

• http://docs.angularjs.org/api/ng . $ q
• http://docs.angularjs.org/api/ng . $ http

Answer 2

Just give you an example of how to make your example work with your own promise. This is much simpler if you use $ http builtin prom, so this is an example of $ 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 (use the JSFiddle echo service as a data provider): http://jsfiddle.net/alfrescian/ayke2/

More about promises:

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