jQuery Deferred/Promises 动态数组未按正确顺序执行回调

Question

感谢您了解我在这里的误解。我的要求如下：

我有一个 URL 数组。我想同时为每个 URL 触发一个 AJAX 请求，一旦第一个请求完成，就调用第一个回调。然后，如果第二个请求完成，则调用该回调，依此类推。

选项 1：

for (var i = 0; i < myUrlArray.length; i++) {
    $.ajax({
        url: myUrlArray[i]
    }).done(function(response) {
        // Do something with response
    });
}

显然这不起作用，因为无法保证响应会以正确的顺序完成。

选项 2：

var promises = [];
for (var i = 0; i < myUrlArray.length; i++) {
    promises.push($.ajax({
        url: myUrlArray[i]
    }));
}
$.when.apply($, promises).then(function() {
    // Do something with each response
});

这应该可行，但缺点是它会等到 所有 AJAX 请求完成后，才会触发任何回调。

理想情况下，我应该能够在第一个回调完成后立即调用它，然后在收到响应时链接第二个回调以执行（或者如果它已经解决，则立即执行），然后是第三个，依此类推。

数组长度是完全可变的，并且可以在任何给定时间包含任意数量的请求，因此仅对回调链进行硬编码不是一种选择。

我的尝试：

var promises = [];
for (var i = 0; i < myUrlArray.length; i++) {
    promises.push($.ajax({
        url: myUrlArray[i] // Add each AJAX Deferred to the promises array
    }));
}
(function handleAJAX() {
    var promise;
    if (promises.length) {
        promise = promises.shift(); // Grab the first one in the stack
        promise.then(function(response) { // Set up 'done' callback
            // Do something with response

            if (promises.length) {
                handleAJAX(); // Move onto the next one
            }
        });
    }
}());

问题是回调以完全随机的顺序执行！例如，如果我将 'home.html'、'page2.html'、'page3.html' 添加到数组中，响应的顺序不一定是 'home.html'、'page2.html'、'page3 .html'。

我显然从根本上误解了 Promise 的工作方式。任何帮助都将不胜感激！

干杯

编辑

好吧，现在我更困惑了。我制作了this JSFiddle，其中一个数组使用Alnitak's answer，另一个使用JoeFletch's answer，但它们都没有像我预期的那样工作！谁能看到这里发生了什么？

编辑 2

搞定了！根据 JoeFletch 在下面的回答，我对解决方案进行了如下调整：

var i, responseArr = [];

for (i = 0; i < myUrlArray.length; i++) {
    responseArr.push('0'); // <-- Add 'unprocessed' flag for each pending request
    (function(ii) {
        $.ajax({
            url: myUrlArray[ii]
        }).done(function(response) {
            responseArr[ii] = response; // <-- Store response in array
        }).fail(function(xhr, status, error) {
            responseArr[ii] = 'ERROR';
        }).always(function(response) {
            for (var iii = 0; iii < responseArr.length; iii++) { // <-- Loop through entire response array from the beginning
                if (responseArr[iii] === '0') {
                    return; // As soon as we hit an 'unprocessed' request, exit loop
                }
                else if (responseArr[iii] !== 'done') {
                    $('#target').append(responseArr[iii]); // <-- Do actual callback DOM append stuff
                    responseArr[iii] = 'done'; // <-- Set 'complete' flag for this request
                }
            }
        });
    }(i)); // <-- pass current value of i into closure to encapsulate
}

TL;DR: 我不明白 jQuery 的承诺，没有它们就可以工作。 :)

Answer 1

异步请求不能保证按照它们发送的顺序完成。根据服务器负载和传输的数据量，有些可能比其他需要更长的时间。

唯一的选择是要么等到它们全部完成，一次只发送一个，要么只是处理它们可能被无序调用。

Answer 2

不要忘记您不需要立即注册回调。

我认为这会起作用，与您的代码的主要区别在于我使用了.done 而不是.then 并重构了几行。

var promises = myUrlArray.map(function(url) {
    return $.ajax({url: url});
});

(function serialize() {
    var def = promises.shift();
    if (def) {
        def.done(function() {
            callback.apply(null, arguments);
            serialize();
        });
    }
})();

Answer 3

这是我解决这个问题的尝试。我更新了我的答案，包括对失败的.ajax 调用的错误处理。我还将一些代码移到了.ajax 调用的complete 方法中。

var urlArr = ["url1", "url2"];
var responseArr = [];
for(var i = 0; i < length; i++) {
    responseArr.push("0");//0 meaning unprocessed to the DOM
}

$.each(urlArr, function(i, url){
    $.ajax({
        url: url,
        success: function(data){
            responseArr[i] = data;
        },
        error: function (xhr, status, error) {
            responseArr[i] = "Failed Response";//enter whatever you want to place here to notify the end user
        },
        complete: function() {
           $.each(responseArr, function(i, element){
                if (responseArr[i] == "0") {
                    return;
                }
                else if (responseArr[i] != "done")
                {
                    //do something with the response
                    responseArr[i] = "done";
                }
            });
        }
    });
})