Using Q,js for ajax calls

Question

I have an ajax call that might take a bit to complete. I don't want to use async:false because I want it to stay non blocking code. So I decided to use Q. The problem is I don't understand how ca I extract the json that came back from Q.when($.ajax...). I'm new to Q.

In this example I would like the variable to hold the json that came back from the server:

    var res = Q.when($.ajax({
    type: "POST",
    url: "GetData.asmx/GetMembersList",
    contentType: "application/json; charset=utf-8",
    dataType: "json"
    }));

return res;

Answer 1

With asynchronous calls you can't just assign the result to a variable, because that result won't exist until sometime in the future. Q.when does not return the result, it returns a promise object that will eventually resolve with a result.

If there is only ever one thing you want to do with the JSON you could just inline a .then call to get the result.

Q($.ajax({
  type: "POST",
  url: "GetData.asmx/GetMembersList",
  contentType: "application/json; charset=utf-8",
  dataType: "json"
})).then(function (res) {
  // res now contains the JSON
});

However the real power of promises comes with the fact that you can pass them around and use them later.

function getMembersList() {
  return Q($.ajax({
    type: "POST",
    url: "GetData.asmx/GetMembersList",
    contentType: "application/json; charset=utf-8",
    dataType: "json"
  }));
}

var membersList = getMembersList();

membersList.then(function (res) {
  // once the AJAX call completes this will
  // run. Inside this function res contains the JSON
  return res; // pass res to the next chained .then()
}).then(function (res) {
  // you could chain another then handler here
});

// do some other stuff

membersList.then(function (res) {
  // you could also add another then handler later too
  // even long after the AJAX request resolved and this
  // will be called immediately since the promise has already
  // resolved and receive the JSON just like the other
  // then handlers.
});

You don't need to use Q if you don't have other reasons for using it, since version 1.5 jQuery returns a deferred object from AJAX calls. A Deferred is similar to a promise. Q does offer more power and jQuery's promises/deferreds don't exactly implement the Promises/A standard, potentially causing problems with error handling. For something simple like an AJAX call jQuery promises are usually good enough if you are already using jQuery anyway.

var membersList = $.ajax({
  type: "POST",
  url: "GetData.asmx/GetMembersList",
  contentType: "application/json; charset=utf-8",
  dataType: "json"
});

membersList.then(function (res) {
  // res now contains the JSON
});

Answer 2

Here are some examples from the q documentation about using with jQuery ajax.

return Q(jQuery.ajax({
    url: "foobar.html", 
    type: "GET"
})).then(function (data) {
    // on success
}, function (xhr) {
    // on failure
});

// Similar to jQuery's "complete" callback: return "xhr" regardless of success or failure
return Q.promise(function (resolve) {
    jQuery.ajax({
        url: "foobar.html",
        type: "GET"
    }).then(function (data, textStatus, jqXHR) {
        delete jqXHR.then; // treat xhr as a non-promise
        resolve(jqXHR);
    }, function (jqXHR, textStatus, errorThrown) {
        delete jqXHR.then; // treat xhr as a non-promise
        resolve(jqXHR);
    });
});

https://github.com/kriskowal/q/wiki/Coming-from-jQuery

Hope that helps.