Abort service calls, while switching routes in angularjs

Question

Problem Statement: i am using 3 tabs. tab-a , tab-b and tab-c. each tab will have 5-6 service calls to web api on document load. my problem is, when i click on tab-a..calls from tab-a starts quickly on change of route. but if i click on tab-b sametime, my previous calls will be in process and new more 6 calls will be added from tab-b. i want to abort previous calls from tab-a on switching route. becuase it effects the perofrmance of my Angular SPA.

I am using angular js routing.

app.config(function ($routeProvider) {
$routeProvider
.when('/daily',
{
    title: 'Daily - Stats',
    templateUrl: '/SPA/Daily.html'
})
.when('/weekly',
{
    title: 'Weekly - Stats',
    templateUrl: '/SPA/Weekly.html'
})

i have one service to get and post data from web apis.

maybe can help you. http://stackoverflow.com/questions/13928057/how-to-cancel-an-http-request-in-angularjs — LorenzoBerti, Dec 12 '16 at 16:05
It is fine, but not working in my scenario. kindly suggest me some piece of code, according to above flow. thanks for your kind response. — Faseeh Haris, Dec 12 '16 at 16:19

score 0 · Accepted Answer · edited May 23 '17 at 12:24

0

You could use Resolve in $routeprovider ( I haven't tested code) Like:

.when('/daily',
{
title: 'Daily - Stats',
templateUrl: '/SPA/Daily.html',
resolve: {
   foo: function($http){
      $http.pendingRequests.forEach(function (pendingReq) {
      //here cancel pendingReq like pendingReq.resolve()
   }
}

or You can use RoutechangeStart.

You can find more also in this post: AngularJS abort all pending $http requests on route change

edited May 23 '17 at 12:24

Community

1
1

answered Dec 12 '16 at 16:33

LorenzoBerti

6,704
8
47
89

you welcome, remember to accept answer, for other people that have same problem – LorenzoBerti Dec 13 '16 at 08:21

Abort service calls, while switching routes in angularjs

1 Answers1