0

我想做这样的事情：

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

代码对我来说看起来很糟糕。

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

4

4 回答 4

0

我会考虑分解它，也许是这样的。

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});
于 2012-11-29T04:59:09.067 回答
0

除了成功函数相似（例如，只需要与新的 AJAX 调用不同的 URL）之外，您可能无法做很多事情，您也许可以定义一个通用函数来递归调用，如下所示：

function do_something(data) {
    // some logic
    $.ajax({
        url: data.url,
        success: do_something(data);
        fail: function (){
            // handle failure
        }
    });
}
于 2012-11-29T05:01:08.260 回答
0

使用 $.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 
     });
});
于 2012-11-29T05:05:00.497 回答
0

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

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

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

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

});

Deferred 可以适应更多的上下文，了解它们真的很有用。这只是他们背后的基本思想。

希望这有帮助！

于 2012-11-29T05:07:22.937 回答