javascript - 前一个完成时的多个 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
}