當前一個完成時多個ajax調用

Question

我有這些ajax調用，當前一個成功時需要調用，這意味着一旦第一個ajax正常，調用第二個ajax，一旦第二個ajax正常調用第三個等等。我從一些ajax調用開始，所以可以像下面這樣將它們鏈接起來，但現在我有大約20個調用它們，將它們鏈接起來會是一團糟。

$.ajax({ 
    url: 'urlThatWorks1', 
    success: function (data) { 

     //call someMethod1 with data; 

     $.ajax({ 
     url: 'urlThatWorks2', 
     success: function (data) { 

      //call method2 with data; 
      //another ajax call ... so on 
     } 
}.... 19 level deep 

所以我需要使它有點易於閱讀和維護，所以我想這樣

var ajaxArray = []; 

var function1 = $.ajax('urlThatWorks1', data I get back from the 'urlThatWorks1' call); 

myArray.push(function1); 

var function2 = $.ajax('urlThatWorks2', data I get back from the 'urlThatWorks2' call); 
myArray.push(function2); 
//etc 19 others 

myArray.each(index, func){ 
    //Something like $.when(myArray[index].call()).done(... now what? 
} 

希望這是有道理的，我在尋找Ajax調用數組從方式我可以調用一個ajax調用，我稱之爲數組中的下一個ajax。謝謝。

Answer 1

創建一個遞歸函數來在序列作爲Ajax請求返回的數據被調用。

var urls = [ "url.1", "url.2", ... ]; 
var funcs = []; 

function BeginAjaxCalls() 
{ 
    RecursiveAjaxCall(0, {}); 
} 

function RecursiveAjaxCall(url_index) 
{ 
    if (url_index >= urls.length) 
     return; 
    $.ajax(
    { 
     url: urls[url_index], 
     success: function(data) 
     { 
      funcs[url_index](data); 
      // or funcs[urls[url_index]](data); 

      RecursiveAjaxCall(url_index + 1); 
     } 
    }); 
} 

funcs[0] = function(data) 
// or funcs["url.1"] = function(data) 
{ 
    // Do something with data 
} 

funcs[1] = function(data) 
// or funcs["url.2"] = function(data) 
{ 
    // Do something else with data 
} 

Answer 2

你可以使用異步庫，它有一堆功能，如瀑布或系列可以解決您的問題。

https://github.com/caolan/async#series

https://github.com/caolan/async#waterfall

Answer 3

如何使用遞延方式。喜歡的東西：

var arrayOfAjaxCalls = [ { url: 'https://api.github.com/', success: function() { $("#results").append("<p>1 done</p>"); } }, 
 
         { url: 'https://api.github.com/', success: function() { $("#results").append("<p>2 done</p>"); } }, 
 
         { url: 'https://api.github.com/', success: function() { $("#results").append("<p>3 done</p>"); } }, 
 
         { url: 'https://api.github.com/', success: function() { $("#results").append("<p>4 done</p>"); } }, 
 
         { url: 'https://api.github.com/', success: function() { $("#results").append("<p>5 done</p>"); } }, 
 
         { url: 'https://api.github.com/', success: function() { $("#results").append("<p>6 done</p>"); } }, 
 
         { url: 'https://api.github.com/', success: function() { $("#results").append("<p>7 done</p>"); } }, 
 
         { url: 'https://api.github.com/', success: function() { $("#results").append("<p>8 done</p>"); } }, 
 
         { url: 'https://api.github.com/', success: function() { $("#results").append("<p>9 done</p>"); } } 
 
         ]; 
 

 

 
loopThrough = $.Deferred().resolve(); 
 

 
$.each(arrayOfAjaxCalls, function(i, ajaxParameters) { 
 
    loopThrough = loopThrough.then(function() { 
 
    return $.ajax(ajaxParameters); 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script> 
 
<div id="results"></div>

Answer 4

嘗試

$(function() { 
    // requests settings , `url` , `data` (if any) 
    var _requests = [{ 
     "url": "/echo/json/", 
     "data": JSON.stringify([1]) 
    }, { 
     "url": "/echo/json/", 
     "data": JSON.stringify([2]) 
    }, { 
     "url": "/echo/json/", 
     "data": JSON.stringify([3]) 
    }]; 

    // collect responses 
    var responses = []; 

    // requests object , 
    // `deferred` object , `queue` object 
    var requests = new $.Deferred() || $(requests); 

    // do stuff when all requests "done" , completed 
    requests.done(function (data) { 
     console.log(data); 
     alert(data.length + " requests completed"); 
     $.each(data, function (k, v) { 
      $("#results").append(v + "\n") 
     }) 
    }); 

    // make request 
    var request = function (url, data) { 
     return $.post(url, { 
      json: data 
     }, "json") 
    }; 

    // handle responses 
    var response = function (data, textStatus, jqxhr) { 
     // if request `textStatus` === `success` , 
     // do stuff 
     if (textStatus === "success") { 
      // do stuff 
      // at each completed request , response 
      console.log(data, textStatus); 
      responses.push([textStatus, data, $.now()]); 
      // if more requests in queue , dequeue requests 
      if ($.queue(requests, "ajax").length) { 
       $.dequeue(requests, "ajax") 
      } else { 
       // if no requests in queue , resolve responses array 
       requests.resolve(responses) 
      } 
     }; 
    }; 

    // create queue of request functions 
    $.each(_requests, function (k, v) { 
     $.queue(requests, "ajax", function() { 
      return request(v.url, v.data) 
      .then(response /* , error */) 
     }) 
    }) 

     $.dequeue(requests, "ajax") 

}); 

的jsfiddle http://jsfiddle.net/guest271314/6knraLyn/

見jQuery.queue()，jQuery.dequeue()