AngularJS $http vs. $.ajax callback response time

Question

I am trying to understand why AngularJS $http service success callback give me a slower response time compare to the $.ajax success callback.

I trigger this code 5 times with differents json files :

if(isJquery){
  $.ajax({
    type : 'GET',
    url : url1,
    async : true,
    beforeSend: function(xhr){
         xhr.setRequestHeader('Content-Type',  'application/json;charset=UTF-8');
          xhr.setRequestHeader('Access-Token',  token);
     },
      success : function (returnData) {
            Chrono.getTime('ajax success')
     },
      error : function (xhr, textStatus, errorThrown) {
       },
      complete : function (){

        }
       });
   }else{
       var configuration = {
           method: 'GET',
           url: url1
        };

        var headers = {};
             headers['Content-Type'] = 'application/json;charset=UTF-8';
              headers['Access-Token'] = token;
              configuration.headers = headers;

        $http(configuration)
           .success(
            function (data, status, headers, config) {
                   Chrono.getTime('httpService success')
              })
            .error(function (data, status, headers, config) {
             });
}

With ajax I received this response time :

ajax success = 332

ajax success = 335

ajax success = 336

ajax success = 337

ajax success = 361

with $http :

httpService success = 325

httpService success = 357

httpService success = 380

httpService success = 430

httpService success = 538

I know Angulars is using promises to handle callbacks... could it explain why response time is increasing ? Maybe I didn't understand how to best use $http service.

I am open to suggestion and anaylsis.

Thanks for your time.

EDIT: I noticed that the response time increase even more when there is data or function to process in the success callback. It's like Angular is hanging before processing the other sucess callbacks...

jQuery is using promises to handle callbacks too using the jQuery Deferred object. Response time has nothing to do with promises here... — Benjamin Gruenbaum
– Benjamin Gruenbaum, Commented Apr 11, 2014 at 15:41

Chad Robinson · Accepted Answer · 2014-07-15 17:24:32Z

The $http service isn't a 1:1 replacement for $.ajax. It does a lot more and has some different characteristics, like interceptors, XSRF token handling, and custom caching concepts. It also queues requests, so if you do issue 5 requests instantly, in parallel, you'll definitely see different behavior from $.ajax.

In the guts of this, this is going to route down through a Promise, then through $browserDefer, aka browser#defer. When that's all done, it ends up in a routine called completeOutstandingRequest... and here's where the behavior that's negative to you starts getting triggered. This is executed in a "setTimeout" callback, which is a cooperative multi-tasking technique that lets the current thread return before the queued request starts processing. This technique is almost certainly the source of your delay... but there's also a big advantage to having good-citizen behavior here.

Adding more promises isn't really going to work around this. Other things to explore: Why is the back-end so slow? 400ms is an eternity in a land where we're used to 80ms turnarounds for most API calls. Also, why do you need to make 5 calls in parallel like this? That's obviously inefficient - even the $.ajax example isn't working all that great. Is there no way you can batch these into a single call? That would kill two birds with one stone.

Collectives™ on Stack Overflow

AngularJS $http vs. $.ajax callback response time

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related