JQuery Promise not working after AJAX

Question

I have my promise, defined as follows:

myFunc = function() { $.getJSON("./rest/api/some/url", function(json, textStatus) { console.log("AJAX call hit!"); }); }; $.when(myFunc()).then(function() { console.log("Then block hit!"); }); 

and in the console it is displayed as:

 Then block hit! AJAX call hit! 

I need an AJAX call hit! then Then block hit! .

Any idea why this is happening? I even tried implementing a custom callback function (the standard example I found in Stackoverflow) and it still doesn't work.

Answer 1

I think this question needs a more complete explanation.

$.when() does not have magical powers to know when some function that you put inside your partners needs to be performed. It only works with asynchronous operations when you pass $.when() one or more promises, which themselves are solved when the basic async operation is performed.

So in your code:

 myFunc = function() { $.getJSON("./rest/api/some/url", function(json, textStatus) { console.log("AJAX call hit!"); }); }; $.when(myFunc()).then(function() { console.log("Then block hit!"); }); 

myFunc() returns nothing, which means undefined , so you essentially do:

 myFunc(); $.when(undefined).then(function() { console.log("Then block hit!"); }); 

If you don't go through any promises before $.when() , it will be fixed right away (since it has nothing to wait for).

Instead, you need to make sure myFunc() returns the promise that is allowed when making an Ajax call. Since jQuery $.getJSON() already returns such a promise, all you have to do is return this promise as follows:

 var myFunc = function() { return $.getJSON("./rest/api/some/url", function(json, textStatus) { console.log("AJAX call hit!"); }); }; $.when(myFunc()).then(function() { console.log("Then block hit!"); }); 

---

Of course, when there is only one promise to wait, there is no reason to use $.when() at all, since this is just additional code that interferes. $.when() really only adds value when you have a few promises that you want to wait. So, instead, you can simply do this:

 var myFunc = function() { return $.getJSON("./rest/api/some/url", function(json, textStatus) { console.log("AJAX call hit!"); }); }; myFunc().then(function() { console.log("Then block hit!"); }); 

Answer 2

You need a promise-compatible myFunc() object myFunc() returns null

 $.when(null).then(function() { console.log("Then block hit!"); }); 

output: Then delete the block!

Try

 return $.getJSON("...