angularjs: async metter in Promise or http.get(...).then()

Question

I used $http.get to get about 2MB data set from my endpoint. Below is my example code:

$scope.getData = function (){
    return new Promise(function(resolve, reject) {
            $http({
                method: 'GET',
                url: apiUrlEndPointHost+'/rest/getAll',
            })
            .then(function(response) {
                if(response.data.code<0){
                    reject(response);
                }
                else{
                    resolve(response);
                }
            },function(err) {
                reject(err); 
            });
    });
}

$scope.getData().then(function(response){
   $scope.myData=response.data;
});

It needs to take about 10s to get the data, in this time, my website become so slow and I can't event click a button to execute an action.

Please help.

`my website become so slow` - it shouldn't do that, `I can't event click a button to execute an action` what sort of action? one that involves network access? — Jaromanda X, Nov 10 '17 at 10:37
Why are you nesting 2 promises ? Why not just `return $http({ ...` ? — anteAdamovic, Nov 10 '17 at 10:37
I'm not an Angular whiz, but I suspect the whizzes who can answer will need to know more about what you're doing. It won't be the ajax call that's locking up the page, it'll be what you're doing when you receive it (e.g., how all that data gets bound to the view). — T.J. Crowder, Nov 10 '17 at 10:37
Re @AnteJablanAdamović's comment, read: https://stackoverflow.com/questions/23803743/what-is-the-explicit-promise-construction-antipattern-and-how-do-i-avoid-it# — T.J. Crowder, Nov 10 '17 at 10:38
The promise is fine, hence the error is likely somewhere else. The only case where everything may slow down is if the promise response is so huge that your browser can't handle it, but it would start freezing **after** the callback, not while performing the call. Another possible scenario is that you have some sort of propagation and the request is being called endlessly. May you share more code please? — briosheje, Nov 10 '17 at 10:49
It doesn't matter if you use async-await or $http.get().then().. They do the same thing. Async-await is only orchestrating promises. — Mika Sundland, Nov 10 '17 at 10:50

score 0 · Answer 1 · answered Nov 10 '17 at 11:07

You dont need to return new promise. $http already return a promise. You can see in Docs. https://docs.angularjs.org/api/ng/service/$http

Just use this:

$scope.getData = function () {
  return $http({
    method: 'GET',
    url: apiUrlEndPointHost+'/rest/getAll',
  })
}

$scope.getData().then(function(response){
   $scope.myData=response.data;
});

But this is not Root Cause of issue. Issue in somewhere else. Maybe Request pending so much time and UI are being freeze.

You can track how much time was spent for request in "Network Devtools".

angularjs: async metter in Promise or http.get(...).then()

1 Answers1