Angularjs how to cancel resource promise when switching routes -

Angularjs how to cancel resource promise when switching routes -

i'm getting feet wet angularjs. have issue think has promises.

let's load route 'a' makes several ajax requests through it's controller:

allsites = allsites.query({ id:categoryid }); allsites.$promise.then(function(allsites){ //add stuff scope , other things //(including making ajax request) });

then have route 'b' makes it's own api request through it's controller:

$scope.categories = category.query();

here's mill service used route 'a':

.factory('allsites',function($resource){ homecoming $resource('api/categorysites/:id'); });

when first view route 'a' switch 'b' before 'a' finished loading, route 'b' sits , waits requested in 'a' finish (actually, query() request made, won't resolve until 1 'a' does, @ point, stuff within .then() continues happen, though don't need i'm on route.

as can see in devtools timeline, greenish line indicates when switched route 'b'. request route 'b' didn't resolve until 2 requests above did (a request fast). (at point i'm able utilize view user). then, after that, more promises resolve route 'a'.

i've searched everywhere reply , can find people want "defer" route loading until promises resolved. in case want opposite. want kill requests when switch.

here's else same, unanswered question: reject angularjs resource promises

any help appreciated.

first of all, decided needed utilize $http since couldn't find solution used $resource, nor work on own.

so here's mill turned into, based on @sid's reply here, using guide @ http://www.bennadel.com/blog/2616-aborting-ajax-requests-using-http-and-angularjs.htm

.factory('allsites',function($http,$q){ function getsites(categoryid) { // timeout property of http request takes deferred value // abort underying ajax request if / when deferred // value resolved. var deferredabort = $q.defer(); // initiate ajax request. var request = $http({ method: 'get', url: 'api/categorysites/'+categoryid, timeout: deferredabort.promise }); // rather returning http-promise object, want pipe // through promise can "unwrap" response // without letting http-transport mechansim leak out of // service layer. var promise = request.then( function( response ) { return( response.data ); }, function() { return( $q.reject( 'something went wrong' ) ); } ); // have promise we're going homecoming // calling context, let's augment abort method. since // $http service uses deferred value timeout, // have here resolve value , angularjs // abort underlying ajax request. promise.abort = function() { deferredabort.resolve(); }; // since we're creating functions , passing them out of scope, // we're creating object references may hard garbage // collect. such, can perform clean-up 1 time know // requests has finished. promise.finally( function() { promise.abort = angular.noop; deferredabort = request = promise = null; } ); return( promise ); } // homecoming public api. return({ getsites: getsites }); });

then, in controller (route 'a' problem):

var allsitespromise = allsites.getsites(categoryid); $scope.$on('$destroy',function(){ allsitespromise.abort(); }); allsitespromise.then(function(allsites){ // stuff here result }

i wish mill wasn't messy, i'll take can get. however, there's separate, related issue here where, though promise cancelled, next actions still delayed. if have reply that, can post there.

angularjs