Canceling HTTP request and resolving error function in angular

Question

Hi I want to cancel my http request after 2s. If no data was received it should resolve into the error function and return an empty object.

I know I somehow have to use the timeout property. Where do I use the $timeout exactly? I am not so sure if I understood it correctly.

app
  .service('testService',['$http','$q','$timeout',
    function($http,$q,$timeout){

      var canceler=$q.defer();

      this.options = function (long,lat) {


        return $http({
          method: 'POST',
          url: '/coordinates',
          headers: {
            'Content-Type' : 'application/json; charset=utf-8',
            'Data-Type': 'json'
          },
          data: {
            "long":long,
            "lat": lat
          },
          timeout:canceler.promise

        }).then(function (response) {
          return response.data;
        },function(error){
          return {};
        });
      };
    }]);

gaurav bhavsar · Accepted Answer · 2015-08-27 07:35:25Z

1

Use reject in your $timeout as

$timeout(function(){
    return canceler.reject(reason);
},2000);

So, you $http request look like :

var timeoutCase = function(){
    $timeout(function(){
        return canceler.reject(reason);
    },2000);
}

var apiCall = function(){

   // call timeout function
   timeoutCase();

   // http call
   return $http({
      method: 'POST',
      url: '/coordinates',
      headers: {
        'Content-Type' : 'application/json; charset=utf-8',
        'Data-Type': 'json'
      },
      data: {
        "long":long,
        "lat": lat
      },
      timeout:canceler.promise

    }).then(function (response) {
$timeout.cancel(timeoutCase);
      return response.data;
    },function(error){
      return {};
    });
}

// call Http function.
api().then(function(response){
    console.log(response);
})

edited Aug 27, 2015 at 7:35

answered Aug 27, 2015 at 7:16

gaurav bhavsar

2,0512 gold badges26 silver badges36 bronze badges

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

1 Comment

Dribel Over a year ago

great...works fine. Dunno why I couldn't figure that our myself...great help

Andrés Soto · Accepted Answer · 2015-08-27 07:33:17Z

You can pass a configuration object to the method that your are using (In your scenario POST):

post(url, data, [config]);

In the config object you can specify a timeout property:

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

So an example for your POST method invocation will be:

$http.post('www.host.com/api/resource', {payload}, {timeout:2000})
          .then(function(){ //success });
          .catch(function(){ return {};});

return {}; Is just to simulate the empty object that you mention.

On the angular documentation site there are some good examples of using the $http service

On the other hand, the $timeout is an Angular's wrapper for window.setTimeout here is the link for the documentation.

So you could use the $timeout to trigger resolve your canceler promise, or just let the timeout property do it's job while doing the request. That would depend on your requirement. But my recommendation is to use the timeout property for the request that your are doing. There is no need to cancel the request by an external timer.

cubbuk · Accepted Answer · 2015-08-27 07:26:09Z

You can use $timeout to achieve this. You cancel the http request or the timeout promise according to which one ends first. If timeout occurs first you cancel http request, if http promise resolves before timeout you cancel timeout. Here is an example:

var httpPromise = $http({
          method: 'POST',
          url: '/coordinates',
          headers: {
            'Content-Type' : 'application/json; charset=utf-8',
            'Data-Type': 'json'
          },
          data: {
            "long":long,
            "lat": lat
          }
        });

var timeoutPromise = $timeout(function () {
      httpPromise.reject("Timeout occurred"); // timeout occurred first, reject httpPromise.
}, 2000);

return httpPromise.then(function(data){
   $timeout.cancel(timeoutPromise); //http request resolved before timeout occurred, cancel the timeout.
   return data;
});

Collectives™ on Stack Overflow

Canceling HTTP request and resolving error function in angular

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related