27

I'm trying to figure out how to use the timeout property of a $resource to dynamically cancel pending requests. Ideally, I'd like to just be able to cancel requests with certain attributes (based on the params sent), but it seems this may not be possible. In the meantime, I'm just trying to cancel all pending requests, and then resetting the timeout promise to allow new requests.

The issue seems to be that the $resource configuration only allows a single, static promise for the timeout value. It makes sense how I could do this if I was making individual $http calls, since I could just pass in new promises for the timeout, but how can this work for a $resource? I have set up an example plunker here: http://plnkr.co/edit/PP2tqDYXh1NAOU3yqCwP?p=preview

Here's my controller code:

app.controller('MainCtrl', function($scope, $timeout, $q, $resource) {
  $scope.canceller = $q.defer();
  $scope.pending = 0;
  $scope.actions = [];
  var API = $resource(
    'index.html', {}, {
      get: {
        method: 'GET',
        timeout: $scope.canceller.promise
      }
    }
  )

  $scope.fetchData = function() {
    if ($scope.pending) {
      $scope.abortPending();
    }
    $scope.pending = 1;
    $scope.actions.push('request');
    API.get({}, function() {
      $scope.actions.push('completed');
      $scope.pending = 0;
    }, function() {
      $scope.actions.push('aborted');
    });
  }

  $scope.abortPending = function() {
    $scope.canceller.resolve();
    $scope.canceller = $q.defer();
  }
});

Right now, the canceller works when there is a pending request, but I don't seem to be able to reset it - once one request is aborted, all future requests will be aborted as well.

I'm sure I'm missing something, since being able to cancel pending requests seems like a pretty crucial feature of most web applications (at least that I've built).

Thanks

1

6 Answers 6

10

Answer by Gecko IT works for me, but I had to make some modifications in order to:

  • Enable resource ajax call to be canceled multiple times without need to recreate resource
  • Make resource backward compatible - This means that there is no need to change any application (Controller) code except resource factory
  • Make code JSLint compliant

This is complete service factory implementation (you just need to put proper module name):

'use strict';

/**
 * ResourceFactory creates cancelable resources.
 * Work based on: https://stackoverflow.com/a/25448672/1677187
 * which is based on: https://developer.rackspace.com/blog/cancelling-ajax-requests-in-angularjs-applications/
 */
/* global array */
angular.module('module_name').factory('ResourceFactory', ['$q', '$resource',
    function($q, $resource) {

        function abortablePromiseWrap(promise, deferred, outstanding) {
            promise.then(function() {
                deferred.resolve.apply(deferred, arguments);
            });

            promise.catch(function() {
                deferred.reject.apply(deferred, arguments);
            });

            /**
             * Remove from the outstanding array
             * on abort when deferred is rejected
             * and/or promise is resolved/rejected.
             */
            deferred.promise.finally(function() {
                array.remove(outstanding, deferred);
            });
            outstanding.push(deferred);
        }

        function createResource(url, options, actions) {
            var resource;
            var outstanding = [];
            actions = actions || {};

            Object.keys(actions).forEach(function(action) {
                var canceller = $q.defer();
                actions[action].timeout = canceller.promise;
                actions[action].Canceller = canceller;
            });

            resource = $resource(url, options, actions);

            Object.keys(actions).forEach(function(action) {
                var method = resource[action];

                resource[action] = function() {
                    var deferred = $q.defer(),
                    promise = method.apply(null, arguments).$promise;

                    abortablePromiseWrap(promise, deferred, outstanding);

                    return {
                        $promise: deferred.promise,

                        abort: function() {
                            deferred.reject('Aborted');
                        },
                        cancel: function() {
                            actions[action].Canceller.resolve('Call cancelled');

                            // Recreate canceler so that request can be executed again
                            var canceller = $q.defer();
                            actions[action].timeout = canceller.promise;
                            actions[action].Canceller = canceller;
                        }
                    };
                };
            });

            /**
             * Abort all the outstanding requests on
             * this $resource. Calls promise.reject() on outstanding [].
             */
            resource.abortAll = function() {
                for (var i = 0; i < outstanding.length; i++) {
                    outstanding[i].reject('Aborted all');
                }
                outstanding = [];
            };

            return resource;
        }

        return {
            createResource: function (url, options, actions) {
                return createResource(url, options, actions);
            }
        };
    }
]);

Usage is the same as in Gecko IT example. Service factory:

'use strict';

angular.module('module_name').factory('YourResourceServiceName', ['ResourceFactory', function(ResourceFactory) {
    return ResourceFactory.createResource('some/api/path/:id', { id: '@id' }, {
        create: {
            method: 'POST'
        },
        update: {
            method: 'PUT'
        }
    });
}]);

Usage in controller (backward compatible):

var result = YourResourceServiceName.create(data);
result.$promise.then(function success(data, responseHeaders) {
    // Successfully obtained data
}, function error(httpResponse) {
    if (httpResponse.status === 0 && httpResponse.data === null) { 
        // Request has been canceled
    } else { 
        // Server error 
    }
});
result.cancel(); // Cancels XHR request

Alternative approach:

var result = YourResourceServiceName.create(data);
result.$promise.then(function success(data, responseHeaders) {       
    // Successfully obtained data
}).catch(function (httpResponse) {
    if (httpResponse.status === 0 && httpResponse.data === null) { 
        // Request has been canceled
    } else { 
        // Server error 
    }
});
result.cancel(); // Cancels XHR request

Further improvements:

  • I don't like checking if request has been canceled. Better approach would be to attach attribute httpResponse.isCanceled when request is canceled, and similar for aborting.
5
  • cancel()ing an action cancels all outstanding instances of that action, because all these used the same Canceller instance when initiated. (I didn't tested it, just reading the code - please correct me if I'm wrong)
    – robert4
    Commented Apr 20, 2015 at 13:49
  • Why is it better to have abort() and cancel() separately than having cancel() only? (Is there a better place to ask this question?)
    – robert4
    Commented Apr 20, 2015 at 17:35
  • First question: Seems you are right (I also haven't tried it). However it does not seem to be a problem because when you are working with multiple instances of resource, each instance has it's own Canceller. This might only be problem when you are .query()-ing more than once at the same time and then you cancel().
    – Nikola M.
    Commented Apr 21, 2015 at 10:50
  • Second question: You are right. You can totally live fine without abort(). It probably has some other purpose, but original creator of this code can answer this better :)
    – Nikola M.
    Commented Apr 21, 2015 at 11:02
  • 1
    Please note that cancel is currently broken due to a bug in ngResource. Also I do not see how the abort would ever work. See the angular code. Only on timeout promise resolved would the xhr be canceled.
    – jtheoof
    Commented Apr 28, 2015 at 18:06
2

(for Angular 1.2.28+)Hello All , I just wanted to make that easy to understand , how I handled that issue is as follows :

Here I declare timeout parameter

$scope.stopRequestGetAllQuestions=$q.defer();

then in I use it as follows

return $resource(urlToGet, {}, {get:{ timeout: stopRequestGetAllQuestions.promise }});

and if I want to stop previous $resource calls I just resolve this stopRequestGetAllQuestions object that is all.

stopRequestGetAllQuestions.resolve();

but if I want to stop previous ones and start a new one $resource call then I do this after stopRequestGetAllQuestions.resolve();:

stopRequestGetAllQuestions = $q.defer(); 
1

There are quite a lot of examples currently out there. The following two I've found quite informative:

THis one shows an example how to deal with both $resource and $http requests: https://developer.rackspace.com/blog/cancelling-ajax-requests-in-angularjs-applications/

and

This one is simpler and is only for $http: http://odetocode.com/blogs/scott/archive/2014/04/24/canceling-http-requests-in-angularjs.aspx

1

Hi I made a custom handler based on https://developer.rackspace.com/blog/...

.factory('ResourceFactory', ["$q", "$resource", function($q, $resource) {
    function createResource(url, options, actions) {
        var actions = actions || {},
        resource,
        outstanding = [];

        Object.keys(actions).forEach(function (action) {
            console.log(actions[action]);
            var canceller = $q.defer();
            actions[action].timeout = canceller.promise;
            actions[action].Canceller = canceller;
        });

        resource = $resource(url, options, actions);

        Object.keys(actions).forEach(function (action) {
            var method = resource[action];

            resource[action] = function () {
                var deferred = $q.defer(),
                promise = method.apply(null, arguments).$promise;

                abortablePromiseWrap(promise, deferred, outstanding);

                return {
                    promise: deferred.promise,

                    abort: function () {
                        deferred.reject('Aborted');
                    },
                    cancel: function () {
                        console.log(actions[action]);
                        actions[action].Canceller.resolve("Call cancelled");
                    }
                };
            };
        });

        /**
        * Abort all the outstanding requests on
        * this $resource. Calls promise.reject() on outstanding [].
        */
        resource.abortAll = function () {
            for (var i = 0; i < outstanding.length; i++) {
                outstanding[i].reject('Aborted all');
            }
            outstanding = [];
        };

        return resource;
    }

    return {
        createResource: function (url, options, actions) {
            return createResource(url, options, actions);
        }
    }
}])

function abortablePromiseWrap(promise, deferred, outstanding) {
    promise.then(function () {
        deferred.resolve.apply(deferred, arguments);
    });

    promise.catch(function () {
        deferred.reject.apply(deferred, arguments);
    });
    /**
    * Remove from the outstanding array
    * on abort when deferred is rejected
    * and/or promise is resolved/rejected.
    */
    deferred.promise.finally(function () {
        array.remove(outstanding, deferred);
    });
    outstanding.push(deferred);
}


//Usage SERVICE
factory("ServiceFactory", ["apiBasePath", "$resource", "ResourceFactory", function (apiBasePath, $resource, QiteResourceFactory) {
    return ResourceFactory.createResource(apiBasePath + "service/:id", { id: '@id' }, null);
}])

//Usage Controller
var result = ServiceFactory.get();
console.log(result);
result.promise.then(function (data) {       
    $scope.services = data;
}).catch(function (a) {
    console.log("catch", a);
})
//Actually cancels xhr request
result.cancel();
2
  • What is this array found in line array.remove(outstanding, deferred);? Where is it defined? JSLint throws error because of it.
    – Nikola M.
    Commented Sep 9, 2014 at 13:42
  • This can cancel 1 xhr request and then no more, because once the Canceller is resolve()d it's not recreated and cannot be resolved again.
    – robert4
    Commented Apr 20, 2015 at 13:35
0

One solution is to re-craete the resource every time you need it.

// for canceling an ajax request
$scope.canceler = $q.defer();

// create a resource
// (we have to re-craete it every time because this is the only
// way to renew the promise)
function getAPI(promise) {
    return $resource(
        'index.html', {}, {
            get: {
                method: 'GET',
                timeout: promise
            }
        }
    );
}

$scope.fetchData = function() {

    // abort previous requests if they are still running
    $scope.canceler.resolve();

    // create a new canceler
    $scope.canceler = $q.defer();

    // instead of using "API.get" we use "getAPI().get"
    getAPI( $scope.canceler.promise ).get({}, function() {
        $scope.actions.push('completed');
        $scope.pending = 0;
    }, function() {
        $scope.actions.push('aborted');
    });

}
0

In our attempt to solve this task we got to the following solution:

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8" />
  <title>Cancel resource</title>
  <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.9/angular.js"></script>
  <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.9/angular-resource.js"></script>
  <script>
angular.module("app", ["ngResource"]).
factory(
  "services",
  ["$resource", function($resource)
  {
    function resolveAction(resolve)
    {
      if (this.params)
      {
        this.timeout = this.params.timeout;
        this.params.timeout = null;
      }

      this.then = null;
      resolve(this);
    }

    return $resource(
      "http://md5.jsontest.com/",
      {},
      {
        MD5:
        {
          method: "GET",
          params: { text: null },
          then: resolveAction
        },
      });
  }]).
controller(
  "Test",
  ["services", "$q", "$timeout", function(services, $q, $timeout)
  {
    this.value = "Sample text";
    this.requestTimeout = 100;

    this.call = function()
    {
      var self = this;

      self.result = services.MD5(
      {
        text: self.value,
        timeout: $q(function(resolve)
        {
          $timeout(resolve, self.requestTimeout);
        })
      });
    }
  }]);
  </script>
</head>
<body ng-app="app" ng-controller="Test as test">
  <label>Text: <input type="text" ng-model="test.value" /></label><br/>
  <label>Timeout: <input type="text" ng-model="test.requestTimeout" /></label><br/>
  <input type="button" value="call" ng-click="test.call()"/>
  <div ng-bind="test.result.md5"></div>
</body>
</html>

How it works

  1. $resource merges action definition, request params and data to build a config parameter for an $http request.
  2. a config parameter passed into an $http request is treated as a promise like object, so it may contain then function to initialize config.
  3. action's then function may pass timeout promise from params into the config.

Please look at "Cancel Angularjs resource request" for details.

2
  • How would this translate to older versions of angular that still use the legacy promise extensions success() and error()?
    – g1de0n_ph
    Commented Jan 6, 2016 at 10:01
  • github.com/angular/angular.js shows that the approach works from v1.2.x and up. In earlier versions no action is merged into http config. Commented Jan 7, 2016 at 10:51

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.