Unable to cancel request with $resource

Question

After trying some solutions like this: Aborting ngResource using a promise object I'm unable to cancel a request made with $resource. My last try was with this:

Controller:

angular.module('theApp')
  .controller('homeController', function ($q, foodTypeFactory) {
    var vm = this;

    vm.testButton = function () {
      vm.aborter = $q.defer();
      foodTypeFactory(vm.aborter).getTest({}, function (data) {
        console.log(data);
      });
    };
    vm.cancelButton = function () {
      vm.aborter.resolve();
    }
  });

foodTypeFactory:

angular.module('theApp')
  .factory('foodTypeFactory', function ($resource, BACKEND_API) {
    return function (aborter) {
      return $resource(BACKEND_API + '/api/foodtypes/:id', {id: '@id'}, {
        getTest: {
          timeout: aborter.promise
        }
      });
    }
  });

Once the request is made it completes even if I try to cancel it. I'm using Angular 1.6.2 with angular-resource 1.6.2.

What am I doing wrong?

score 0 · Answer 1 · answered Jul 26 '17 at 11:53

What i Can suggest to you is to use an http interceptor .. the you can stop a request... somthing like this:

1) create a file like (auth.interceptor.js:

"use strict";

angular
.module("demo")
.factory('authInterceptorService', ['$q', '$location', 'localStorageService',
function ($q, $location, localStorageService) {
    // Public Method
    return {
        request: function (config) {
            config.headers = config.headers || {};

           if(!MYCONDITION){ //<-- you can here your logic to test if conitnue request flow or not
            return; //<-- TERMINATE IT ..
           }else{
            return config; //<-- CONTINUE WITH NORMAL REQUEST
           }


        }
    };
}]);

2) in your app.config.js file:

 $httpProvider.interceptors.push("authInterceptorService");

Then in ALL your request (via $http or via $resource) this logic is apply ... here you can also put the injection of the Bearer Token if you need it

Hope it help you

I need to cancel the request once is done. With this approach I only can cancel the request before is done. — Roomm, Jul 26 '17 at 12:00
if you want you can intercept the response..always in the file i wrote.. and don't return it .. if you condition is not matched — federico scamuzzi, Jul 26 '17 at 12:04

score 0 · Accepted Answer · answered Jul 27 '17 at 09:33

Finally I found a solution! From angular 1.5 $resource can be cancelled with $cancelRequest(). In my case:

Controller:

angular.module('theApp')
  .controller('homeController', function (foodTypeFactory) {
    var vm = this;

    vm.testButton = function () {
      vm.onGoingRequest = foodTypeFactory.getTest({}, function (data) {
        console.log(data);
      });
    };
    vm.cancelButton = function () {
       vm.onGoingRequest.$cancelRequest();
    }
  });

foodTypeFactory:

angular.module('theApp')
  .factory('foodTypeFactory', function ($resource, BACKEND_API) {
      return $resource(BACKEND_API + '/api/foodtypes/:id', {id: '@id'}, {
        getTest: {
          cancellable: true
        }
      });
  });

Unable to cancel request with $resource

2 Answers2