jQuery Promise then not working after AJAX

Question

I have my Promise defined as so:

myFunc = function() {
    $.getJSON(\"./rest/api/some/url\", function(json, textStatus) {
        console.log(\"AJAX call hit!\"         


        

Answer 1

I think this question needs a more complete explanation.

$.when() has no magical powers to know when some function you put inside its parens happens to be done. It only works with async operations when you pass $.when() one or more promises that are themselves resolved when the underlying async operation is done.

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() is returning nothing which means undefined, so you're in essence doing:

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

When you don't pass any promises to $.when(), it just resolves immediately (since it has nothing to wait for).

Instead, you need to make sure that myFunc() returns a promise that is resolved when the Ajax call is done. Since jQuery's $.getJSON() already returns such a promise, all you have to do is to return that promise like this:

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's only one promise to wait on, there is no reason to use $.when() at all as it is just extra code getting in the way. $.when() really only adds value when you have more than one promise you want to wait on. So, instead you can just 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!");
});