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?

Nicolas Janel · Accepted Answer · 2015-09-10 09:20:08Z

23

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

answered Sep 10, 2015 at 9:20

Nicolas Janel

3,0751 gold badge30 silver badges31 bronze badges

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

2 Comments

Raymond Liao Over a year ago

Hi man, I got the rejection.status == 0 when the request timed out, and the other network error status also 0

Rathma Over a year ago

using angular 1.5.11 I get status code -1, any Idea where can I find official documentation on this value?

Phuong Ha · Accepted Answer · 2014-12-03 14:35:10Z

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 3, 2014 at 14:35

Phuong Ha

312 bronze badges

4 Comments

Vamshi Suram Over a year ago

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.

user3285954 Over a year ago

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.

JoshuaDavid Over a year ago

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 Over a year ago

One flaw: this answer should have used $timeout instead of setTimeout

Prashobh · Accepted Answer · 2017-03-14 10:24:36Z

1

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

Comments

Community · Accepted Answer · 2017-05-23 12:02:41Z

-2

You just need to check the response status and that's it :

}).error(function(data, status, header, config) {
      if (status === 408) {
          console.log("Error - " + status + ", Response Timeout.");
      } 

});

For global HTTP timeout, take a look at this answer

edited May 23, 2017 at 12:02

CommunityBot

11 silver badge

answered Dec 4, 2014 at 7:02

Manish Kr. Shukla

4,4771 gold badge22 silver badges35 bronze badges

2 Comments

JoshuaDavid Over a year ago

This is not a good answer. Where are you getting the 408 from? You cannot assume the timeout will result in a status being delivered, i.e., status could be 0.

Lukkha Coder Over a year ago

This is an incorrect answer. The status code will NOT be equal to 408.

Collectives™ on Stack Overflow

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

4 Answers 4

2 Comments

4 Comments

Comments

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

2 Comments

4 Comments

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related