How to use YAHOO.util.Connect.asyncRequest and return results?

Question

I'm using YAHOO.util.Connect.asyncRequest to get data from database, here is the code :

function getCountArticle(contentCurValue) {

  var handleSuccess = function (res) {
      var countPubmed = YAHOO.lang.JSON.parse(res.responseText);
      var contentCountPubmed = countPubmed.totalArticleRecords;
      alert(contentCountPubmed); //return 15 for example
  };

  var handleFailure = function () {
      alert("Error connecting data : Bad pubmed query");
  };

  var callback =
  {
    success:handleSuccess,
    failure:handleFailure,
    timeout: 5000
  };

  var sURL = 'qct-list-article.html?term=' + contentCurValue + '&retstart=0' + '&retmax=1';

  var request = YAHOO.util.Connect.asyncRequest('GET',sURL,callback);

}

I would like this function return : "contentCurValue" (eg:15), but when I try to use this code I get "undefined" :

var test = getCountArticle();
alert(test); // return undefined, should return 15

My error is probably due to asynchronous query, but how can I force "var test = getCountArticle();" to wait for results ?

Answer 1

Since the call is by nature asynchronous, rather than try to wait for the response, you would be better off specifying a callback function to execute with the data. You could modify your method like this:

 function getCountArticle(contentCurValue, callback) {
  var handleSuccess = function (res) {
      var countPubmed = YAHOO.lang.JSON.parse(res.responseText);
      var contentCountPubmed = countPubmed.totalArticleRecords;
      callback(contentCountPubmed); //return 15 for example
  };
  // ...
} 

then your calling code would be:

 getCountArticle("contentCurValue", function(test) {
    alert(test);
}); 

Any further execution using the value returned from your AJAX query would proceed inside of your callback method.

This SO post is essentially the same problem, but not YUI specific: Getting undefined in javascript when calling ajax