Asynchronous angularJS - how to wait each request callback?

Question

I'm building an angular application, there are many ajax calls. I need to wait for each call response to get data from it, that why I make the synchronous.

$.ajax({
    type: "POST",
    url: servicePath,
    cache: false,
    contentType: "application/json; charset=utf-8",
    dataType: "json",
    async: false,
    data: "{}",
    success: success,
    error: error
});

But this is a problem because if I call "showPleaseWait()"(this is a loading popup) it is not showing, because DOM is not updating unless ajax call is not complete. It's showing if I'll make my call async, but I can't get my data that time.

Please, can you help me to solve this problem?

Solve your problem by learning how to manage callbacks instead of using (deprecated) synchronous requests. — Quentin
– Quentin, Commented Jul 31, 2015 at 14:27
possible duplicate of angular -- accessing data of multiple http calls - how to resolve the promises — Vanojx1
– Vanojx1, Commented Jul 31, 2015 at 14:28
Call showPleaseWait() before $.ajax, and call hidePleaseWait() in the success or error callback. Async is the power of Ajax, why not? — Joy
– Joy, Commented Jul 31, 2015 at 14:59

biancamihai · Accepted Answer · 2015-07-31 15:29:50Z

0

If you build a angular app you should take a look at https://docs.angularjs.org/api/ng/service/$http or https://docs.angularjs.org/api/ngResource/service/$resource

If you need to make the ajax calls one after another you can take a look at chaining promises

var a = $http.get('/your-url');
var b = a.then(function(result) {
     // use the results here ...
     return $http.get('/your-other-url');
});
b.then(function(result) {
    // use the results here ...
})

answered Jul 31, 2015 at 15:29

biancamihai

9816 silver badges14 bronze badges

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

Comments

Shaunak · Accepted Answer · 2015-07-31 15:33:04Z

0

Its not uncommon for Angular beginners to be thoroughly confused, however you are going wrong in two places. I would recommend some studying. Without encouraging spoon-feeding, here are some good places two start.

You need to read about what's the right way to make ajax data calls in angular. Here's a good place to start :(https://github.com/johnpapa/angular-styleguide#data-services)
Use of JavaScript promises in Angular (https://github.com/johnpapa/angular-styleguide#return-a-promise-from-data-calls) .

All this because you did say you want to use angular.However, lookup how you can use promises with $ajax function in jQuery

answered Jul 31, 2015 at 15:33

Shaunak

18.2k5 gold badges59 silver badges86 bronze badges

Comments

Dorian M · Accepted Answer · 2015-07-31 14:45:18Z

-2

Maybe try to call your showPleaseWait() function, then the $scope.$apply() from angular right before to send the ajax request? It should force angular to refresh the display.

answered Jul 31, 2015 at 14:45

Dorian M

1961 gold badge1 silver badge8 bronze badges

Collectives™ on Stack Overflow

Asynchronous angularJS - how to wait each request callback?

3 Answers 3

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related