AngularJS $q example

by Mike Jacobson

HTML

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0-rc.2/angular.js"></script>
<div ng-app>
  <h2>$q test</h2>
  <div ng-controller="TodoCtrl">
      <div ng-bind="'Promise1: ' + Promise1"></div>
      <div ng-bind="'Promise2: ' + Promise2"></div>
      <div ng-bind="'Promise3: ' + Promise3"></div>
      <div ng-bind="'Promise4: ' + Promise4"></div>
      <div ng-bind="'Promise5: ' + Promise5"></div><br />
      <div ng-bind="'Status1: ' + Status1"></div>
      <div ng-bind="'Status2: ' + Status2"></div>
  </div>
</div>

JavaScript

function TodoCtrl($scope, $q, $timeout) {
	function getBadData() {
  	const deferred = $q.defer()
    setTimeout(() => {
    	deferred.reject(6667)
    }, 500)
    
    return deferred.promise;
  }
  
  function getBundle() {
  	return getBadData().then(data => {
      console.log(">> good data: ", data)
    })
    .catch(err => {
      console.log(">>> DOH! err: ", err)
      return $q.reject(err)
    })
  }
  
	function getGoodData() {
  	const deferred = $q.defer();
    setTimeout(() => {
    	deferred.resolve(111)
    }, 500)
    return deferred.promise
  }
  
  function getWithFinally() {
    return getGoodData().then(res => {
    	console.log(">> then res: ", res)
      return res
    }).finally(fin => {
    	console.log(">> fin: ", fin)
      return 99
    })
  }
  
  getWithFinally().then(res => {
  	console.log(">> final ans: ", res)
  })
  
/*   getBundle().then(bd => {
    console.log(">> BUNDLE Data: ", bd)
  })
  .catch(err => {
    console.log(">>> DOH! BUNDLE err: ", err)
  })
   */
   
   /*     function createPromise(name, timeout, willSucceed) {
        $scope[name] = 'Running';
        var deferred = $q.defer();
        $timeout(function() {
            if (willSucceed) {
                $scope[name] = 'Completed';
                deferred.resolve(name);
            } else {
                $scope[name] = 'Failed';
                deferred.reject(name);
            }
        }, timeout * 1000);
        return deferred.promise;
    }
    
    // Create 5 promises
    var promises = [];
    var names = [];
    for (var i = 1; i <= 5; i++) {
        var willSucceed = true;
        if (i == 2) willSucceed = false;
        promises.push(createPromise('Promise' + i, i, willSucceed));
    }
    
    // Wait for all promises    
    $scope.Status1 = 'Waiting';
    $scope.Status2 = 'Waiting';
    $q.all(promises).then(
        function() { 
            $scope.Status1 = 'Done'; 
        }, 
        function() { 
            $scope.Status1 = 'Failed'; 
  ...