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
– psand, Commented Mar 17, 2017 at 19:42
cancelData: function(cancelData2) { //code return $http({ method: 'PUT', data: cancelData2, url: endpointURL, headers: {'Content-Type': 'something','Accept' : 'something'}, timeout: 60000 }); } — psand
– psand, Commented Mar 17, 2017 at 19:47
Add a .catch method to the chain to catch the timeout. See AngularJS $http Service API Reference - General Usage and AngularJS $q Service API Reference - The Promise API. — georgeawg
– georgeawg, Commented Mar 17, 2017 at 23:40

Sachila Ranawaka · Accepted Answer · 2017-03-17 18:18:30Z

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, 2017 at 18:18

answered Mar 17, 2017 at 18:11

Sachila Ranawaka

41.6k8 gold badges62 silver badges87 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

psand Over a year ago

Thanks. But, will there be an error code received if there were some network issues and timeout occurs because of that ?

georgeawg Over a year ago

See Why are angular $http success/error methods deprecated? Removed from v1.6?

Muhammed Neswine · Accepted Answer · 2017-03-17 18:09:18Z

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;
        }
    };
}]);

ABOS · Accepted Answer · 2017-03-17 20:23:49Z

0

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);
}

answered Mar 17, 2017 at 20:23

ABOS

3,8413 gold badges19 silver badges25 bronze badges

Collectives™ on Stack Overflow

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

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related