How to get $http readyState on AngularJS?

Question

How can I get $http readyState, use like this:

var request, interval;

request = $http
  .post('/user/info', {...})
  .success(...);

interval = setInterval(function(){
  if(request.readyState < 3)
    return;

  prepare(request.data, request.headers);
  clearInterval(interval)
}, 10);

function prepare(data, headers){
  ...
}

I have no idea how to do this without changing the angular.js file. Is it possible add some features to the service via $httpBackend or something other?

var request is a promise. It does not return value. after it is resolved you can use the value it returns. — DragonKnight
– DragonKnight, Commented Dec 9, 2017 at 8:26
@Vitalii actually, for many goals. For example, accurate download progress bar, comparing received content with "Content-length" header, processing of some unclosed connections, traffic optimization via search from received content, etc. — Turar Abu
– Turar Abu, Commented Dec 9, 2017 at 8:27
@DragonKnight that's why I ask: is there some way to solve this? — Turar Abu
– Turar Abu, Commented Dec 9, 2017 at 8:29
you have to write your code in success function. put log and inside and outside your success function. youll get your answer. — DragonKnight
– DragonKnight, Commented Dec 9, 2017 at 8:31

Community · Accepted Answer · 2020-06-20 09:12:55Z

With AngularJS 1.5.5, support was added for additional handling of XHR events:

$http Arguments - Config

Object describing the request to be made and how it should be processed. The object has following properties:

eventHandlers - {Object} - Event listeners to be bound to the XMLHttpRequest object. To bind events to the XMLHttpRequest upload object, use uploadEventHandlers. The handler will be called in the context of a $apply block.

uploadEventHandlers - {Object} - Event listeners to be bound to the XMLHttpRequest upload object. To bind events to the XMLHttpRequest object, use eventHandlers. The handler will be called in the context of a $apply block.

— AngularJS $http Service API Reference - Http Arguments

Use the eventHandlers property of the config object to add an event handller that gets the XHR readyState:

The DEMO

angular.module("app",[])
.run(function($rootScope, $http){
  var eventHandlers = {readystatechange: readyStateChangeHandler};
  var config = { eventHandlers: eventHandlers }; 
  $rootScope.messageList = [];
  
  function readyStateChangeHandler(ev) {
    var message = "readyState: "+ev.target.readyState;
    console.log(message);
    $rootScope.messageList.push(message);
  }
  
  $http.get("//httpbin.org/anything",config)
    .then(function(response){
      console.log("OK");
      //console.log(response);
  }).catch(function(response){
      console.log("ERROR");
      //console.log(response); 
  })
})

<script src="//unpkg.com/angular/angular.js"></script>
<body ng-app="app">
    <div ng-repeat="m in messageList">
      {{m}}  
    </div>
  </body>

Collectives™ on Stack Overflow

How to get $http readyState on AngularJS?

1 Answer 1

$http Arguments - Config

The DEMO

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

$http Arguments - Config

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related