ajax请求依赖于前一个

Question

I want to do something like this:

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

the code looks awful for me.

I wonder how to make it looks pretty. Some best practice?

Answer 1

I would consider breaking it up, maybe something like this.

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

There's not a whole lot you can probably do about it other than if the success function are similar (just need different URL's to new AJAX calls for example) you might be able to define a common function to call recursively, like this:

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

Answer 3

Use $.post instead of $.ajax that's lot easier and clean

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

Or if you want to use GET request use like this.

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

Answer 4

Other answers are mostly fine too as using functions in a lot of case will definitely help your code. The problem of your function is that it's doing to much things all in once. Decreasing the complexity of the function will help a LOT (separating different action in different functions).

There's some good training videos of Bocoup here which can help you decrease a function complexity: http://training.bocoup.com/screencasts/

Although, a basic answer to the callback inferno:
You could use jquery Deffered who do a good job in certain case by preventing the "indentation pyramid of doom". (But won't decrease the complexity of your function)

$.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 can fit in a whole lot more of context, and learning about them is really useful. That's only the basic idea behind them.

Hope this help!