AngularJS cancel all pending $http requests on route change

[mr.miq...@gmail.com]

Hi All,

Please go through the code first

app.js

var app = angular.module('Nimbus', ['ngRoute']);

route.js

app.config(function($routeProvider) {
    $routeProvider
    .when('/login', {
        controller: 'LoginController',
        templateUrl: 'templates/pages/login.html',
        title: 'Login'
    })
    .when('/home', {
        controller: 'HomeController',
        templateUrl: 'templates/pages/home.html',
        title: 'Dashboard'
    })
    .when('/stats', {
        controller: 'StatsController',
        templateUrl: 'templates/pages/stats.html',
        title: 'Stats'
    })
}).run( function($q, $rootScope, $location, $route, Auth) {
    $rootScope.$on( "$routeChangeStart", function(event, next, current) {
        console.log("Started");


        /* this line not working */
        var canceler = $q.defer();
        canceler.resolve();

    });

    $rootScope.$on("$routeChangeSuccess", function(currentRoute, previousRoute){
        $rootScope.title = ($route.current.title) ? $route.current.title : 'Welcome';
    });
 })

home-controller.js

app.controller('HomeController',
    function HomeController($scope, API) {
        API.all(function(response){
            console.log(response);
        })
    }
)

stats-controller.js

app.controller('StatsController',
    function StatsController($scope, API) {
        API.all(function(response){
            console.log(response);
        })
    }
)

api.js

app.factory('API', ['$q','$http', function($q, $http) {    
    return {
        all: function(callback) {
            var canceler = $q.defer();
            var apiurl = 'some_url'
            $http.get(apiurl,{timeout: canceler.promise}).success(callback);
        }
    }
}]);

When I move from home to stats , again API will send http request, I have many http calls like this, I pasted only few lines of code.

What I need is I need to cancel all pending http requests on routechangestart or success

Or any other way to implement the same ?

Thanks in advance

[Gabriel Aszalos]

Implement caching - save the server response to a variable (or use $cacheFactory) and return the resolved promise using the cache if it is available. In this case the request is only made when the data is not already there.

[Jonathan Matthew Beck]

 might find this article helpful:

http://www.bennadel.com/blog/2616-aborting-ajax-requests-using-http-and-angularjs.htm

[Miqdad Ali]

I got a great answer from stackoverflow

Posting here for reference

http://stackoverflow.com/questions/23244389/angularjs-abort-all-pending-http-requests-on-route-change

Thank You

Miqdad Ali K

--
You received this message because you are subscribed to a topic in the Google Groups "AngularJS" group.
To unsubscribe from this topic, visit https://groups.google.com/d/topic/angular/scLGm5ntG5g/unsubscribe.
To unsubscribe from this group and all its topics, send an email to angular+u...@googlegroups.com.
To post to this group, send email to ang...@googlegroups.com.
Visit this group at http://groups.google.com/group/angular.
For more options, visit https://groups.google.com/d/optout.

[Jonathan Matthew Beck]

That is some of my favorite type of code right there.  An elegant little wrapper that goes around another library to give me control over what I need. 

I may take that and create a project on GitHub.  It's something we can use for in-code profiling applications that make heavy use of $http.

 

http://stackoverflow.com/questions/23244389/angularjs-abort-all-pending-http-requests-on-route-change