How to display timeout error in angular js $http calls?

Question

I am making an ajax call using $http in angular js. I have implemented timeout in it. But I want to show the user an error message if the connection times out. The following is the code..

$http({
            method: 'POST',
            url: 'Link to be called',
            data: $.param({ 
                    key:Apikey,
                    id:cpnId
                }),
            timeout : 5000, 
            headers: {'Content-Type': 'application/x-www-form-urlencoded'}
            }).success(function(result){
               alert(result);
            }).error(function(data){
              alert(data);
            });

Is there any way so that I can display the user if the connection is timed out. Is there any way so that it can be configured at one place?

score 23 · Accepted Answer · answered Sep 10 '15 at 09:20

And if you want to do someting when connection timed out for every request, you can use interceptors (global timeout param doesn't work) :

// loading for each http request
app.config(function ($httpProvider) {
    $httpProvider.interceptors.push(function ($rootScope, $q) {
        return {
            request: function (config) {
                config.timeout = 1000;
                return config;
            },
            responseError: function (rejection) {
                switch (rejection.status){
                    case 408 :
                        console.log('connection timed out');
                        break;
                }
                return $q.reject(rejection);
            }
        }
    })
})

Hi man, I got the rejection.status == 0 when the request timed out, and the other network error status also 0 — Raymond Liao, May 09 '17 at 05:51
using angular 1.5.11 I get status code -1, any Idea where can I find official documentation on this value? — Rathma, May 10 '17 at 11:07

score 1 · Answer 2 · answered Dec 03 '14 at 14:35

1

Have a try on this blog page: http://www.jonhartmann.com/index.cfm/2014/7/23/jsFiddle-Example-Proper-Timeout-Handling-with-AngularJS It has a complete angular running example which resolve your question.

answered Dec 03 '14 at 14:35

Phuong Ha

31
2

5

Its better to give some explanation and provide link for more information. This way it will be helpful in case the link is not working. – Vamshi Suram Dec 03 '14 at 14:37
1

This isn't a good example because sets timedOut in caller code, still don't know how to detect when a real http time out occurred. – user3285954 May 27 '15 at 15:04
1

This is a good answer. The timeout angular is looking for is always referring to the caller code anyway, so I don't know what @user3285954 is talking about. This example demonstrates use of a promise as the timeout value, where you can insert extra data to track which timeout got tripped. Nice. – JoshuaDavid Mar 16 '16 at 18:10
1

One flaw: this answer should have used $timeout instead of setTimeout – JoshuaDavid Mar 16 '16 at 18:31

score 1 · Answer 3 · answered Mar 14 '17 at 10:24

You can use angular interceptor to achieve this.

$httpProvider.responseInterceptors
.push(['$q', '$injector','$rootScope', function ( $q, $injector,$rootScope) {
 return function (promise) {
    return promise.then(function (response) {
        return response;
    }, function (response) {
        console.log(response); // response status
        return $q.reject(response);
    });
  };
 }]);
}]);

How to display timeout error in angular js $http calls?

4 Answers4