How to handle long response times in AngularJS $http?

Question

I have a method that fetches some data from an API.

$http.get("https://httpstat.us/200?sleep=20000", header).then(
  function successCallback(response) {
    //logic
  },
  function errorCallback(response) {
    
  }
);

In certain test cases, the API takes forever to respond so I need a way to handle such cases. If the API is taking more than 10 seconds, I need to return some data. I tried adding a timeout to the request using the code below

$http.get("https://httpstat.us/200?sleep=20000", {timeout: 10000}).then(

But this just aborts the request and goes to the error callback. Is there another way to know if the request is taking forever to respond without actually timing out the request?

FitzChill · Accepted Answer · 2020-06-25 15:37:39Z

1

Short anwser no, there is no build in way to notify the http service listener that the request is long.

You could however build a deferred wrapper that encapsulate the http call in a defer so that you will be able to notify your listener if the service takes too long to respond but you will have to time it yourself.

take a look at this post where the author address a similar problem to yours

https://www.peterbe.com/plog/angularjs-$q-notify-resolve-local-get-proxy

answered Jun 25, 2020 at 15:37

FitzChill

8661 gold badge9 silver badges19 bronze badges

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

Comments

svarog · Accepted Answer · 2020-06-25 17:03:55Z

If you just need to run a function after some time have passed you can utilize $timeout. Pass the function you want to run to the $timeout with the time in milliseconds, it will return you a timer promise. If your $http calls resolves before the timeout just run $timeout.cancel(\[promise\]) and pass it your timer promise. This will cancel the inner timeout function call.

Example

var timer = $timeout(function() {
  console.log("this request is taking too long...")
  // tell the client it will take a while ...
}, 10 * 1000);

$http({method: $scope.method, url: $scope.url, cache: $templateCache}).
  then(function(response) {
    // handle successful response ...
    $timeout.cancel(timer); // about your timeout function call
  }, function(response) {
    // handle rejection ...
});

You can of course cancel your timeout in the finally clause. (Plunker)

If you don't feel like writing the same code for every function that wraps $http, consider using an interceptor.

Collectives™ on Stack Overflow

How to handle long response times in AngularJS $http?

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related