Abort/cancel/abandon a http request in angular js and retry it again

Question

I am working on an application in which i have to stop listening to a request if certain time is passed like if there is no response from a request in 60 secs then i have to abort that request and also there are multiple requests are going at a time. I don't know know how to keep track of each request with abort time(60 secs). I mean how would i know which request is to abort.

I want to implement this functionality in my AngularJS interceptor. I have tried many blogs and post that claims to achieve this functionality but nothing helps me

here is my interceptor code

    $httpProvider.interceptors.push(['$cookies', '$rootScope', '$q', '$localStorage', '$sessionStorage','$timeout', function ($cookies, $rootScope, $q, $localStorage, $sessionStorage, $timeout) {
        return {
            'request': function (config) {
                config.headers = config.headers || {};
                if (typeof config.data !== 'object') {
                    config.headers['Content-Type'] = 'application/x-www-form-urlencoded';
                }
                config.headers.Accept = 'application/json;odata=verbose';
                config.headers['X-Requested-With'] = 'XMLHttpRequest';
                var token = $localStorage.authToken || $sessionStorage.authToken;                    
                if (token) {
                    config.headers.Authorization = 'Bearer ' + token;
                }

                return config;
            },
            'responseError': function (response) {
                var status = response.status;
                var error = '';
                if(response.data.error) {
                    error = response.data.error;
                }
                if(status === 401) {
                    $rootScope.unauthorizedLogout();
                } else if(status === 400 && (error === 'token_invalid' || error === 'token_not_provided')) {
                    $rootScope.unauthorizedLogout();
                } 
                return $q.reject(response);
            }
        };
    }]);

I do tried the $q.defer and it's resolve method to cancel request but it's not helping me to achieve the functionality i want in application.

Peace out V

Does this answer help you? https://stackoverflow.com/a/17328336/3337164 — Bharat, May 24 '17 at 13:03

score 0 · Answer 1 · answered May 24 '17 at 13:15

0

You can try setting global timeout to all request using $httpProvider.defaults.timeout ;

angular.module('test', [])
  .config(['$httpProvider', function($httpProvider) {
    $httpProvider.defaults.timeout = 60000;
}]);

answered May 24 '17 at 13:15

NKDev

456
3
8
23

thanks but how i would resend that request again and also it's not working. Although i did tried to set `config.timeout = 1000` and it worked. seems like angular is ignoring default timeout – Redhya May 24 '17 at 13:28
You can resend the timed-out request in the 'responseError' function of your interceptors. $timeout(function() { /*resend your request*/}, 1000); – NKDev May 24 '17 at 13:43
Okay but how will know which request is to send again because there are multiple requests are happening at a given time. – Redhya May 24 '17 at 13:47
Well i think i have to try this... Hope it works for me – Redhya May 24 '17 at 15:34

score 0 · Accepted Answer · answered May 25 '17 at 06:57

This answer helped me a lot

set incremented timeout value to request

    config.timeout = incrementalTimeout;

Your interceptor for handling response error should look like this

   'responseError': function (response) {
    var status = response.status;
    var error = '';
    //functionality to for request aborting and resending
    if (status === -1 || status >= 500) {
        if (attempts <= 3) {
            attempts += 1;
            return retryRequest(response.config);
        }
    } else {
        // set incrementalTiemout and attempts to default value   
        incrementalTimeout = 4000;
        attempts = 1;
    }
    if(response.data.error) {
        error = response.data.error;
    }
    if(status === 401) {
        $rootScope.unauthorizedLogout();
    } else if(status === 400 && (error === 'token_invalid' || error === 'token_not_provided')) {
        $rootScope.unauthorizedLogout();
    }
    return $q.reject(response);
}

code to resend request in your interceptor

        // default request timeout is of 4 seconds and attempt is 1
        var incrementalTimeout = 4000;
        var attempts = 1;
        function retryRequest (httpConfig) {
            var thisTimeout = incrementalTimeout;
            incrementalTimeout += 1000;
            return $timeout(function() {
                var $http = $injector.get('$http');
                return $http(httpConfig);
            }, thisTimeout);
        }

Abort/cancel/abandon a http request in angular js and retry it again

2 Answers2

Linked