上一个ajax调用完成时进行多个ajax调用

Multiple ajax calls when previous one completes

本文关键字：ajax 调用 完成时 上一个      更新时间：2023-09-26

我有这些ajax调用，当上一个成功时需要调用，这意味着一旦第一个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。谢谢

创建一个递归函数，以便在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
}

尝试

$(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")
});

jsfiddlehttp://jsfiddle.net/guest271314/6knraLyn/

请参阅jQuery.queue（）、jQuery.dequeue（

使用Deferred方法怎么样。类似于：

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>

您可以使用异步库，它有一系列函数，如瀑布或系列，可以解决您的问题。

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

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

相关文章：