Check for browser timeout while waiting for REST service response in angularjs

Question

I am calling a PUT REST service and if there occurs a timeout of 60 seconds on the browser side and not on the server side, then I have to display a popover. How can I check for browser timeout in AngularJS? (REST service response is not an error, it is just timing out on the browser side.)

cancelData: function(cancelData2) { //code
    return $http({ method: 'PUT', 
            data: cancelData2,
            url: endpointURL,
            headers: {'Content-Type': 'something',
                      'Accept' : 'something'},
            timeout: 60000 });
}

When user confirms he wants to delete the record, a loading icon is displayed to user and below cancelData function is called which calls the REST PUT service, now when there occurs a network connectivity issues or timeout of 60 seconds, then I need to display the popup. — psand, Mar 17 '17 at 19:42
cancelData: function(cancelData2) { //code return $http({ method: 'PUT', data: cancelData2, url: endpointURL, headers: {'Content-Type': 'something','Accept' : 'something'}, timeout: 60000 }); } — psand, Mar 17 '17 at 19:47
Add a `.catch` method to the chain to *catch* the timeout. See [AngularJS $http Service API Reference - General Usage](https://docs.angularjs.org/api/ng/service/$http#general-usage) and [AngularJS $q Service API Reference - The Promise API](https://docs.angularjs.org/api/ng/service/$q#the-promise-api). — georgeawg, Mar 17 '17 at 23:40

Sachila Ranawaka · Answer 1 · 2017-03-17T18:18:30.373

1

in angular config can set response time out to $httpProvider according to the error code.

if you want a global workaround for all http call then use this

.config(['$httpProvider', function($httpProvider) {
    $httpProvider.defaults.timeout = 6000;
}]);

Note that when the timeout is over response will enter in the error section of the promise, so you need to add the pop up over there.

if you want to set it to individual http request then use this approach

 $http.get("/home", { 
   timeout: 6000 
 })
   .success(success)
   .error(error);

edited Mar 17 '17 at 18:18

answered Mar 17 '17 at 18:11

Sachila Ranawaka

39,756
7
56
80

Thanks. But, will there be an error code received if there were some network issues and timeout occurs because of that ? – psand Mar 17 '17 at 19:15
See [Why are angular $http success/error methods deprecated? Removed from v1.6?](http://stackoverflow.com/questions/35329384/why-are-angular-http-success-error-methods-deprecated-removed-from-v1-6/) – georgeawg Mar 17 '17 at 23:27

score 0 · Answer 2 · answered Mar 17 '17 at 18:09

For angular $http, when the API timeouts, you get status -1 in error handling function of $http. But if you want to handle all the network error from a single handle, you could use angular httpInterceptors. Sample httpInterceptors:

angular.module('myApp')
.config(['$httpProvider', function($httpProvider) {

    $httpProvider.interceptors.push('timeoutHttpIntercept');

    $httpProvider.interceptors.push(['$q', '$rootScope', '$location',
        function ($q, $rootScope, $location) {
       return {
           'request': function (config) {
                return config;
           },
           'response': function (config) {
                return config;
           },
           'responseError': function (response) {
                return $q.reject(response);
           }
       };
    }]);
}])

The responseError receives all the $http errors. You can even mention custom timeouts here. Just define the timeoutHttpIntercept as a factory like this:

.factory('timeoutHttpIntercept', ['CONSTANTS', 'EMAIL_SERVER_URL', function (CONSTANTS, EMAIL_SERVER_URL) {
    return {
        'request': function (config) {
            config.timeout = 20000;
            return config;
        }
    };
}]);

score 0 · Answer 3 · answered Mar 17 '17 at 20:23

can you try this?

function timedHttp(delay) {
    var isTimeout = {value: false};
    var promise = $http.get('someUri').then(function(data){
        if(!isTimeout.value) {
          timerId.cancel();
            $scope.yourDataModal = data;
        }
    });
    var timerId = $timeout(function(){
        isTimeout.value = true;
        showTimeoutPopup();
    }, delay);
}

Check for browser timeout while waiting for REST service response in angularjs

3 Answers3