Question

链接jQuery ajax请求的清晰可读方式是什么？我想摆脱这个回调地狱。我已准备好很多帖子，但他们似乎没有更复杂的回答。

$.get('file1.php')
  .done(function(data) {
    $.get('file2.php')
      .done(function(data) {
        $.get('file3.php')
          .done(function(data) {

          })
          .fail(function() {
            showError();
          })
      })
      .fail(function() {
        showError();
      })
  })
  .fail(function() {
    showError();
  })

Answer 1

请注意，jQuery ajax请求返回的jqXHR对象可以与then链接：

$.get('file1.php').then(function () {
  return $.get('file2.php');
}, showError).then(function () {
  return $.get('file3.php');
}, showError).then(function ()
  ...
}, showError);

Answer 2

尝试jQuery $.deffered对象，您不仅可以有效地进行多个ajax调用，还可以使其可链接。你走了：

var deferred = $.Deferred();

function getData() {

    var ajaxCall1 = $.get("file1.php", {}, null, 'jsonp');
    var ajaxCall2 = $.get("file2.php", {}, null, 'jsonp');
    var ajaxCall3 = $.get("file3.php", {}, null, 'jsonp');

    $.when(ajaxCall1, ajaxCall2, ajaxCall3)
     .done(function (response1, response2, response3) {
        // Your logic come here
    });

    return deferred.promise();
}

getData()
.then(
    function () {
        alert('Success');
    }, 
    function (response1, response2, response3) {
        alert('Response1 :' + response1
                     + 'Response2 :' + response2
                     + 'Response3 :' + response3);
    }
);

干净地链接jQuery ajax请求

2 个答案: