Question

我想做这样的事情：

$.ajax({
  url: SOMEWHERE,
  ...
  success: function(data){
    // do sth...
    var new_url = data.url;

    $.ajax({
      url: new_url,
      success: function(data){
        var another_url = data.url;

        // ajax call rely on the result of previous one
        $.ajax({
           // do sth
        })
      }
    })
  },
  fail: function(){
    // do sth...

    // ajax call too
    $.ajax({
      // config
    })
  }
})

代码看起来很糟糕。

我想知道如何让它看起来很漂亮。一些最佳实践？

Answer 1

我会考虑分手，也许就是这样。

function initialSuccessHandler(data) {
    $.ajax({url:data.url, success:secondarySuccessHandler});
}

function secondarySuccessHandler(data) {
    //do stuff
}

function initialFailHandler() {
    $.ajax({...});
}

$.ajax({url:"whatever.com", success:initialSuccessHandler, fail: initialFailHandler});

Answer 2

除了成功函数是相似的（例如，只需要不同的URL到新的AJAX调用）之外，你可以做很多事情，你可能能够定义一个递归调用的公共函数，如下所示：

function do_something(data) {
    // some logic
    $.ajax({
        url: data.url,
        success: do_something(data);
        fail: function (){
            // handle failure
        }
    });
}

Answer 3

使用$ .post代替$ .ajax，这样更轻松，更干净

$.post('yourAjaxUrl.com/index.html',(newVal:'val'), function(data) {
     $.post('yourSecondAjaxUrl.com/index.html',{newVal1:data}, function(data) {
              //do something 
     });
});

或者如果您想使用这样的GET请求。

$.get('yourAjaxUrl.com/index.html',(newVal:'val'), function(data) {
     $.get('yourSecondAjaxUrl.com/index.html',{newVal1:data}, function(data) {
              //do something 
     });
});

Answer 4

其他答案大多都很好，因为在很多情况下使用函数肯定会对你的代码有所帮助。你的功能问题在于它一次性做很多事情。降低函数的复杂性将有助于LOT（在不同函数中分离不同的动作）。

这里有一些很好的Bocoup培训视频可以帮助您降低功能复杂度：http://training.bocoup.com/screencasts/

虽然，回调地狱的基本答案是：
你可以使用jquery Deffered在某些情况下通过防止“厄运的缩进金字塔”做得很好。（但不会降低你的功能的复杂性）

$.ajax({
  url: SOMEWHERE
})
.pipe(function() {

  // First success callback
  return $.ajax({
    url: new_url
  });

}, function() {

  // First error callback
  $.ajax({
    // config
  });

  // we ain't returning anything so this end here.

})
.done(function( data ) {

  // Second success callback
  var another_url = data.url;

  // ajax call rely on the result of previous one
  $.ajax({
    // do sth
  })

});

延迟可以适应更多的上下文，了解它们非常有用。这只是他们背后的基本理念。

希望这有帮助！

ajax请求依赖于前一个

4 个答案: