Return the response from a jquery asynchronous call

[LearningLifeTime]

Project is using jQuery 1.11.2

I have a function which is making a POST request and then needs to return true/false. Other functions will be using this main function so they need to wait for the ajax call to finish.

1. Which one of the functions should i use from below two?
2. How to call the checkExcludedList from inside other functions and wait for the response and then handle conditional content?

//#1
var checkExcludedList = function () {
    $.ajax({
        type: "POST",
        url: "/api/ajax/CheckExcludedList",
        dataType: "text",
        success: function (data) {
            return true;
        },
        error: function (response) {
            return false;
        }
    });
};

//#2
//returns promise, any functions calling this should handle success & error
var checkExcludedList = function () {
    return $.ajax({
            type: "POST",
            url: "/api/ajax/CheckExcludedList",
            dataType: "text",
        });
};

[m3g4p0p]

Hi @LearningLifeTime, returning from an asynchronous callback doesn’t have any effect; if you want to access the data elsewhere, you can call .done() / .fail() on the deferred object that $.ajax() returns:

var checkExcludedList = $.ajax({ /* ... */ })

checkExcludedList.done(function (data) {
  // Do something with the data
})

checkExcludedList.done(function (data) {
  // Do something else with the same data
})

If you wrap the ajax call in a function, you can send a new request when required (and get “fresh” data rather than reusing the same):

var checkExcludedList = function () {
  return $.ajax({ /* ... */ })
}

checkExcludedList().done(function (data) {
  // Send a request and do something with the data
})

checkExcludedList().done(function (data) {
  // Send another request and do something with the new data
})

[m_hutley]

@LearningLifeTime

so they need to wait for the ajax call to finish.

Then what you need is not an ajax call, technically.

That said, what the asynchronous workaround is to divide your other function(s) into split parts - the part before the ajax call, and the part after it. The part before the ajax call does its bit, then invokes the request. The request will call success or error, depending on the result, and then inside that, call the second half of your function. You can get fancy and call callbacks in this manner.

var checkExcludedList = function (callback) {
    $.ajax({
        type: "POST",
        url: "/api/ajax/CheckExcludedList",
        dataType: "text",
        success: function (data) {
            callback(true);
        },
        error: function (response) {
            callback(false);
        }
    });
};
 
function firstHalf() {
  //Do Stuff
 checkExcludedList(secondHalf);
}

function secondHalf(result) {
  if(result) {
   //...
  } else {
  //...
  }
}

Note that this principle is the same with the Promise/return style as outlined above - since you have to wait regardless, and split your code into the before and after segments.

[LearningLifeTime]

Thanks, totally forgot about the call backs. I find callback a much cleaner solution in my case then returning a promise and then do fail, done and always. I am back to jQuery after almost 4 years and totally rusty now.