How can I make first Ajax Get request be finish before I call next one?

Question

I have to methods, that return promises. And I want to make second method to be executed after first would get and manipulate data. This question has being asked several times, still cannot find a way to make it work. Here is my code:

self.getSpesialitet = function () {

            console.log("Starting Spesialitet");

            return $.get(options.getSpesialitetUrl, { 'recno': recno }, function (data) {
                
                ////Code

                console.log("Success Spesialitet");
            });
        };

self.getVedtak = function () {

            console.log("Starting Vedtak");

            return $.get(options.getVedtakUrl, { 'recno': recno }, function (data) {
                
                ////Code

                console.log("Success Vedtak");
            });
        };

$.when(self.getSpesialitet()).then(self.getVedtak()).then(console.log("Everything is done"));

And here is the result witch I get:

Starting Vedtak
Starting Spesialitet
Everything is done
Success Vedtak
Success Spesialitet

And the result I would like to get:

Starting Vedtak
Success Vedtak
Starting Spesialitet
Success Spesialitet
Everything is done

http://stackoverflow.com/questions/2502828/execute-function-after-all-ajax-load-requests-are-finished/35475460#35475460 — Zubair sadiq, May 02 '16 at 14:01
@lolka_bolka is it possible to avoid calling from the success state? Don't want to make one be depended on other. — Tonven, May 02 '16 at 14:11
then you can use `always` promise, so it should not be succed. Or set to asynch. — vaso123, May 02 '16 at 14:14
You can use something like this: `self.getVedtak().success(function(){ self.getSpesialitet().success(function(){ console.log('Everything is done'); }); })` — Hackerman, May 02 '16 at 14:17
@Hackerman thank you, it works! If you will submit comment as an answer, will accept it. — Tonven, May 02 '16 at 14:34
It is very simple. Call next ajax from the previous .complete. — Alex Kudryashev, May 02 '16 at 14:50

score 1 · Accepted Answer · answered May 02 '16 at 14:39

You can use success calls in order to chain your functions, like this:

self.getVedtak().success(function(){ 
  self.getSpesialitet().success(function(){ 
    console.log('Everything is done'); 
  }) 
})

Working fiddle: https://jsfiddle.net/robertrozas/sjg44pz2/1/

score 0 · Answer 2 · answered May 02 '16 at 14:33

Please understand that $.get, $.post and $.ajax calls are always asynchronous calls. It's like fire and forget. It doesn't wait until the execution is complete. To make your code work, you need to call your second method when the first method has returned.

How can I make first Ajax Get request be finish before I call next one?

2 Answers2

Working fiddle: https://jsfiddle.net/robertrozas/sjg44pz2/1/