使用Q,js进行ajax调用

时间:2014-03-08 21:34:57

标签: javascript jquery promise

我有一个可能需要一点时间才能完成的ajax调用。我不想使用async:false,因为我希望它保持非阻塞代码。所以我决定使用Q.问题是我不明白我如何提取从Q.when($ .ajax ...)回来的json。我是Q的新手。

在这个例子中,我希望变量能够保存从服务器返回的json:

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

return res;

2 个答案:

答案 0 :(得分:16)

使用异步调用,您不能只将结果分配给变量,因为该结果在将来的某个时间才会存在。 Q.when不返回结果,它返回一个最终将以结果解析的promise对象。

如果您只想对JSON做一件事,您可以内联.then来获取结果。

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

然而,承诺的真正力量来自于你可以传递它们并在以后使用它们。

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.
});

如果您没有其他原因可以使用它,则不需要使用Q,因为版本1.5 jQuery从AJAX调用返回deferred object。延期类似于承诺。 Q确实offer more power并且jQuery的promises / deferreds没有完全实现Promises/A标准,可能导致错误处理问题。对于像AJAX调用这样简单的东西,如果你已经在使用jQuery,那么jQuery的承诺通常就足够了。

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
});

答案 1 :(得分:1)

以下是有关使用jQuery ajax的q文档中的一些示例。

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

希望有所帮助。