Angularjs Implemet async task queue

Question

I have this fiddle example, in which I'm making three consecutive calls to a service function (emulating $http Request interceptor function) returning a promise, the code is below. I want the second and next calls to wait until the previous finishes, because the second and next ones depend on the previous response. currently Im getting

Message 1: The value returned is 6000,

Message 2: The value returned is 600

Message 3: The value returned is 30

but I want to get

Message 1: The value returned is 10

Message 2: The value returned is 200

Message 3: The value returned is 6000

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

myApp.factory('interceptor',['$q','$timeout',function($q,$timeout){
  var _fact ={};
  var asynTimeout;
  var _intvalue = 1;
  var _asyncTask = function(time, value){
     var deferred = $q.defer();

     asynTimeout = $timeout(function(){
          _intvalue = _intvalue*value
          deferred.resolve(_intvalue);},time)


    return deferred.promise;
};

  _fact.asyncTask = _asyncTask;
  return _fact;
}]);

myApp.controller('AppCtrl',['$scope', 'interceptor',function ($scope,interceptor) {

    interceptor.asyncTask(1500, 10).then(function(returnedval){
     $scope.message1  = "The value returned is " + returnedval;});   

    interceptor.asyncTask(1000, 20).then(function(returnedval){
     $scope.message2  = "The value returned is " + returnedval;});

    interceptor.asyncTask(800, 30).then(function(returnedval){
     $scope.message3  = "The value returned is " + returnedval;});

 }])

the template would be:

 <div ng-controller="AppCtrl">
   <div>Message 1: {{message1}}</div>
   <div>Message 2: {{message2}}</div>
   <div>Message 3: {{message3}}</div>
 </div>

Notice, the solution should be implemented in the factory function -nested calls at controller is not a solution for this scenario-, what I want is something as follow at interceptor side

myApp.factory('interceptor',['$q','$timeout',function($q,$timeout){
   ...

  var _asyncTask = function(time, value){
     var deferred = $q.defer();

   ***IF ITS RUNNING A PREVIOUS CALL WAIT FINISHES AND THEN(function(){***
       asynTimeout = $timeout(function(){
          _intvalue = _intvalue*value
          deferred.resolve(_intvalue);},time)
   ***}**
    return deferred.promise;
  };

  ...

  return _fact;
}]);

Anthony Chu · Accepted Answer · 2014-09-10 16:43:48Z

1

Give this a try. Stash away the promise from the previous $timeout and use it to wait for previous operations to complete. Also simplified it a bit, removing the deferred and using $timeout's promise instead...

myApp.factory('interceptor', ['$q', '$timeout', function ($q, $timeout) {
    var _fact = {};
    var _intvalue = 1;
    var waitPromise = $q.when(true);

    var _asyncTask = function (time, value) {
        waitPromise = waitPromise.then(function () {
            return $timeout(function () {
                _intvalue = _intvalue * value;
                return _intvalue;
            }, time);
        });
        return waitPromise;
    };

    _fact.asyncTask = _asyncTask;
    return _fact;
}]);

Fiddle

answered Sep 10, 2014 at 16:43

Anthony Chu

37.6k10 gold badges85 silver badges72 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

user3281440 Over a year ago

Perfect, just what i was looking for

marneborn · Accepted Answer · 2014-09-10 16:50:11Z

1

You can create a queue of promises in the factory. Something like this:

myApp.factory('interceptor',['$q','$timeout',function($q,$timeout){
    var _fact ={};
    var asynTimeout;
    var queue = $q.when();
    var _intvalue = 1;
    var _asyncTask = function(time, value){
        queue = queue.then(
            function () {
                var deferred = $q.defer();
                asynTimeout = $timeout(function(){
                   _intvalue = _intvalue*value
                   deferred.resolve(_intvalue);
                },time)
                return deferred.promise;
            }
        )
        return queue;
    };
    _fact.asyncTask = _asyncTask;
    return _fact;
}]);

answered Sep 10, 2014 at 16:50

marneborn

6993 silver badges9 bronze badges

Comments

ABOS · Accepted Answer · 2014-09-10 16:03:55Z

0

Does the order of showing message 1,2,3 matter? If not, you can nest asyncTask, see jsfiddle.net/1k6Lswab/8/

answered Sep 10, 2014 at 16:03

ABOS

3,8413 gold badges19 silver badges25 bronze badges

2 Comments

user3281440 Over a year ago

As I mentioned before, nested async task calls at controller side is not a solution for this scenario.

ABOS Over a year ago

ah, I missed the last part of your post:)

Collectives™ on Stack Overflow

Angularjs Implemet async task queue

3 Answers 3

1 Comment

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related