AngularJS $http ajax request is not asynchronous and causes page to hang

Question

I have a service where I am pulling data from server. When I click the button to send out the request to server through this service, the window freezes until I receive a response from server. Is there anything I can do to make this request asynchronous ?

Here is my service.

app.factory('service', function($http) {
  return {
    getLogData : function(startTime,endTime){
      return $http({
        url:     baseURL + 'getLogData',
        method:  'GET',
        async:   true,
        cache:   false,
        headers: {'Accept': 'application/json', 'Pragma': 'no-cache'},
        params:  {'startTime': startTime , 'endTime': endTime}
      });
    }
  };
)};

HTML.

<button ng-click="getData()">Refresh</button>
<img src="pending.gif" ng-show="dataPending" />

Code

$scope.getData = function(){
  service.getLogData().success(function(data){
    //process data
  }).error(function(e){
    //show error message
  });
}

Ajax calls shouldn't be synchronous. In face you don't even need async: true option. Can you explain more about how your window freeze? Like everything is not clickable, not responding? — Daiwei
– Daiwei, Commented Sep 27, 2013 at 16:41
Do you have a lot of data being returned? The call shouldn't block during the ajax call, but I imagine it could block if it returns a lot of data and the "process data" code is perhaps slow. — Mike Pugh
– Mike Pugh, Commented Sep 27, 2013 at 16:44
Everything is not clickable. I don't have much data but it takes long time to get. Also I am using ng-grid to present it. — lostpacket
– lostpacket, Commented Sep 27, 2013 at 17:09

Community · Accepted Answer · 2017-05-23 11:54:26Z

13

While there is some argument about the pros and cons of your approach, I am thinking that the problem is answered here: AJAX call freezes browser for a bit while it gets response and executes success

To test if this in fact part of the problem, dummy up a response and serve it statically. I use Fiddler or WireShark to get the response and then save to a file like testService.json. XHR and all of it's various derivatives like $HTTP $.ajax see it as a service though the headers might be slightly different.

edited May 23, 2017 at 11:54

CommunityBot

11 silver badge

answered Sep 27, 2013 at 17:21

Nathaniel Johnson

4,8471 gold badge45 silver badges71 bronze badges

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

1 Comment

lostpacket Over a year ago

Thanks. This was indeed the solution. Nothing wrong with Angular. I used the self executing function.

Doug T. · Accepted Answer · 2013-09-27 17:31:36Z

3

Use the success promise, and wrap up the log data in a set of objects that you can attach to a $scope.

So instead of having your service have a blocking method, have it maintain a list of "LogEntries".

   // constructor function
   var LogEntry = function() {
      /*...*/
   }

   var logEntries = [];

   // Non-blocking fetch log data
   var getLogData = function() {
        return $http({
            url : baseURL + 'getLogData',
            method : 'GET',
            async : true,
            cache : false,
            headers : { 'Accept' : 'application/json' , 'Pragma':'no-cache'},
            params : {'startTime' : startTime , 'endTime' : endTime}
        }).success(function(data) {;
           // for each log entry in data, populate logEntries
           // push(new LogEntry( stuff from data ))...
        };
   }

Then in your controller, inject your service and reference this service's log data array so Angular will watch it and change the view correctly

   $scope.logEntries = mySvc.logEntries;

Then in the HTML, simply do something over logEntries:

  <p ng-repeat="logEntry in logEntries">
    {{logEntry}}
  </p>

edited Sep 27, 2013 at 17:31

answered Sep 27, 2013 at 16:39

Doug T.

65.9k28 gold badges142 silver badges206 bronze badges

9 Comments

Mike Pugh Over a year ago

$http returns a promise, so while I agree that the service should encapsulate the response into some sort of object, I don't believe his method should be blocking. I'm wondering if instead the issue is the ajax call is returning a huge amount of data and the processing code is freezing everything up.

Daiwei Over a year ago

Assign $http promise to view is not a good idea, see here github.com/angular/angular.js/issues/3196

Mike Pugh Over a year ago

@Daiwei - but he's not assigning the promise to the view. The returned promise is being resolved in the controller and the data processed there. It isn't being assigned.

lostpacket Over a year ago

The data isn't huge. Only 30 rows and 6 columns. I thought its the ng-grid but as soon as it received data, it parsed immediately.

lostpacket Over a year ago

$scope.logEntries = mySvc.logEntries; Isn't that a one time call. I need to get log based on different start and end times.

|

Behnam · Accepted Answer · 2016-08-03 12:43:04Z

2

use this code to config

$httpProvider.useApplyAsync(true);

answered Aug 3, 2016 at 12:43

Behnam

6,5191 gold badge44 silver badges37 bronze badges

Comments

Sanjeev Rao · Accepted Answer · 2016-07-26 05:02:31Z

0

var url = //Your URL;

  var config = {
    async:true
  };

  var promise= $http.get(url, config);
     promise.then(
     function (result) 
     {
       return result.data;
     },
     function (error) 
     {
       return error;
     }
    );

edited Jul 26, 2016 at 5:02

answered Jul 25, 2016 at 6:01

Sanjeev Rao

2,3571 gold badge20 silver badges19 bronze badges

2 Comments

AncientSwordRage Over a year ago

Please edit to explain how this helps to answer the user's question.

Sanjeev Rao Over a year ago

All are the above shown angular syntax were old/wrong, so my intesion was to update them. Above code is to make async service call, however if data is huge, you can not do much at client side only.

Collectives™ on Stack Overflow

AngularJS $http ajax request is not asynchronous and causes page to hang

4 Answers 4

1 Comment

9 Comments

Comments

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

9 Comments

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related