AngularJS: timeout promise calls

Question

In my AjaxPromiseService.js factory, I have been trying to incorporate a timeout mechanism into promise calls (usually $http.get/post calls to remote services). The way I am currently doing is to create a race between a $timeout event and the actual promise calls. Example code as following (code from my AjaxPromiseService.js factory in AngularJS): also available in this plnkr

var timeoutObj = {"isTimeout": true};

function timeoutPromise(deferredObj) {
      $timeout(function() {
        console.log("promise timeout");
        deferredObj.resolve(timeoutObj);
        }, timeoutLimit); // timeoutLimit is in milisecond
    }

//promise calls (e.g. $http.get())
function getDummyData(milisec) {
      var data = {"data" : "dummy data from ajax!"};
      var deferred = $q.defer();

      timeoutPromise(deferred); //start the race to see who resolves first

      //use $timeout to mimick an AJAX call
      $timeout(function() {
        deferred.resolve(data);
        $timeout.cancel(timeoutPromise(deferred)); //not working, how to cancel the race here?
      }, milisec); //

      return deferred.promise;

    } //getDummyData

This seems working, if getDummyData() is not resolved within the specified duration, the timeoutPromise() will return the useful flag so I can let the AJAX calls fail gracefully. Both timeoutPromise() and getDummyData() will resolve eventually in a sequential order, however, I would like to cancel timeoutPromise() if getDummyData() is reslolved first. I was wondering how to do this?

New Dev · Accepted Answer · 2015-04-15 13:27:17Z

3

$http has a timeout parameter, which times out the request when a promise is resolved - so, you could give it a $timeout promise:

getData: function(input, timeout){
  var timeoutPromise = timeout ? $timeout(function(){}, timeout) : null;

  return $http({url: "/some/url",
                timeout: timeoutPromise,
                method: "GET"
               }).then(function(response){
                  var data = response.data;
                  // do something with data, if needed
                  return data;
               });
}

DEMO

edited Apr 15, 2015 at 13:27

answered Apr 15, 2015 at 13:20

New Dev

49.8k12 gold badges99 silver badges139 bronze badges

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

5 Comments

New Dev Over a year ago

return $http().then() returns a promise... I'm not sure what you're asking otherwise - a promise of what?

TonyW Over a year ago

so you don't need to wrap $q.defer() in $http() to return a promise?

New Dev Over a year ago

@TonyGW, one rarely does when the function itself returns a promise, like $http and $timeout do... in fact, it would be a deferred anti-pattern

TonyW Over a year ago

but in the timeoutPromise, if I want to return a promise object that has a flag {isTimeout: true}, do I need $q to create a promise for return?

New Dev Over a year ago

timeoutPromise in your question or in my answer? do you mean to return it to the user of getData? Where is it going to be used - in the promise handler or by the caller? In other words, I don't fully understand your new requirement. I suggest you either edit your question with clarification or create a new question

Michael Kang · Accepted Answer · 2015-04-15 13:45:40Z

1

If you're using $http, there is a much simpler option. Use timeout property of $http configuration object, and $timeout service:

var requestTimeout = $timeout(function() {}, 4000);
$http({ method:'GET', url:'...', timeout: requestTimeout});
requestTimeout.then(function() {
   console.log ('request aborted - timed out!');
});

The $timeout will automatically be aborted when the request succeeds within the timeout period.

edited Apr 15, 2015 at 13:45

answered Apr 15, 2015 at 13:22

Michael Kang

53k16 gold badges108 silver badges138 bronze badges

Comments

Michel · Accepted Answer · 2015-10-07 17:59:28Z

1

According to $http documentation, the timeout property of the $http configuration accepts either a promise, either a number in milliseconds:

timeout – {number|Promise} – timeout in milliseconds, or promise that should abort the request when resolved.

Therefore the solution is straightforward:

function getData () {
    return $http.get(someUrl, {timeout: 3000});  // adjust the value to what you need
}

answered Oct 7, 2015 at 17:59

Michel

28.6k6 gold badges67 silver badges72 bronze badges

Collectives™ on Stack Overflow

AngularJS: timeout promise calls

3 Answers 3

5 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

5 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related