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, Dec 09 '17 at 08: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, Dec 09 '17 at 08:27
@DragonKnight that's why I ask: is there some way to solve this? — Turar Abu, Dec 09 '17 at 08:29
you have to write your code in success function. put log and inside and outside your success function. youll get your answer. — DragonKnight, Dec 09 '17 at 08:31
@DragonKnight you didn't understand, I need to handle `$http` request BEFORE when `readyState` be = 4 — Turar Abu, Dec 09 '17 at 08:33
Check this one https://stackoverflow.com/questions/36622826/angular-1-5-4-http-progress-event — Drag13, Dec 09 '17 at 08:46
@Vitalii hmm, just looked at "uploadEventHandlers", is good, but not solve all problems, because there are many places where need watch to `$http readyState` and do something when readyState = N — Turar Abu, Dec 09 '17 at 08:59
You don't need to do this. If you need global watch - create an httpService that will always pass uploadEventHandlers and notify subscribers. If you need local watch - make this handler passable as a param to $httpService and thats all. — Drag13, Dec 09 '17 at 09:21
@Vitalii yeah, I understand, so there is my question: how to do that? — Turar Abu, Dec 09 '17 at 09:27
Use the `eventHandlers` property of the config object to add an event handler that gets the [XHR](https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest) readyState. — georgeawg, Dec 09 '17 at 22:23

score 1 · Accepted Answer · edited Jun 20 '20 at 09:12

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>

How to get $http readyState on AngularJS?

1 Answers1

$http Arguments - Config

The DEMO