Ajax调用for循环，直到所有操作完成（错误或成功）

Question

我正在for循环中进行AJAX调用，我想等到所有这些操作完成后再进行操作。

我正在尝试使用Promise，但是由于它不起作用，我缺少了一些东西。 如果触发了错误，则立即触发我的when呼叫，而我不想这样做。 我想等到所有呼叫完成，无论是成功还是错误。

完成所有调用后，我需要成功的条目数和错误数组。

这是我的代码：

for (var i = 0; i < resp.propertiesList.length; i++) {
    var documentToSend = { 
        indexName: indexName, 
        type: type, 
        jsonContent: blabla 
    };

    var promise = _TOOLS.Ajax({
        type: 'POST',
        url: urlTest,
        data: documentToSend,
        contentType: 'application/x-www-form-urlencoded',
        dataType: 'json',
        success: function (dataResponse) {
            numberOfEntriesSuccess++;
        },
        error: function (xhr, ajaxOptions, errorThrown) {
            var errorResponse = JSON.parse(xhr.responseText);
            errorsList.push(errorResponse.ExceptionMessage + ". Skipping line.");
        }
    });

    promises.push(promise);
}

//When all ajax calls are finished, load report page and display informations
$.when.apply($, promises).done(function() { 
    console.log("DONE " + promises.length); 
    console.log(errorsList); 
})

我试着用.done ， .then ， .always ，但没有人的时候我想火。 我在互联网上读了很多关于诺言的书，但是我肯定错过了一些东西，这使我发疯。

谢谢你的帮助 ！

Answer 1

Q.allSettled可以帮助你这一点，你会发现这里的故宫包- https://www.npmjs.com/package/q 。

Answer 2

我发现最容易处理这些问题的方式是跟踪对象或数组中每个Async调用的状态。 每次呼叫完成时，将其标记为已完成，然后检查是否还有其他运行。 你甚至可以只添加一个布尔值，你的对象，以检查是否asyncIsBusy ，或为财产ajaxStatus 。

我在这里假设indexName和type来自resp.propertiesList （您似乎没有在任何地方使用i ，所以我想您是偶然删除了它）。

for (var i = 0; i < resp.propertiesList.length; i++) {
    var documentToSend = { 
        indexName: indexName, 
        type: type, 
        jsonContent: blabla 
    };

    sendDocumentAjax(resp.propertiesList[i], documentToSend)
}

function sendDocumentAjax(listObj, documentData){
    listObj.ajaxStatus = 'pending';
    _TOOLS.Ajax({
        type: 'POST',
        url: urlTest,
        data: documentData,
        contentType: 'application/x-www-form-urlencoded',
        dataType: 'json',
        success: function (dataResponse) {
            listObj.ajaxStatus = 'success';
        },
        error: function (xhr, ajaxOptions, errorThrown) {
            var errorResponse = JSON.parse(xhr.responseText);
            listObj.ajaxStatus = 'error: '+ errorResponse;
        }
        always: checkAjaxStatuses;
    });
}

function checkAjaxStatuses(){
    var pending = [];
    var successes = [];
    var errors = [];
    for (var i = 0; i < resp.propertiesList.length; i++) {
        if(resp.propertiesList[i].ajaxStatus === 'pending'){
            pending.push(resp.propertiesList[i]);
        }
        if(resp.propertiesList[i].ajaxStatus === 'success'){
            successes.push(resp.propertiesList[i]);
        }
        if(resp.propertiesList[i].ajaxStatus.indexOf('error') !== -1){
            errors.push(resp.propertiesList[i]);
        }
    }

    console.log('ajax completed.');
    console.log(pending.length + ' pending.');
    console.log(successes.length + ' succeeded.');
    console.log(errors.length + ' failed.');
}

请注意，我是如何使用单独的函数发送ajax的，因此将为您发送ajax调用的每个对象创建一个新的闭包。 您无法通过匿名函数来完成所有这些操作，因为i将始终是回调中的最大值（因为循环在完成任何ajax调用之前便已完成），从而使您无法引用为之发送Ajax的原始对象。 使用单独的功能可以避免此问题。

Answer 3

尝试设置async：在ajax调用中为false

var promise = _TOOLS.Ajax({
                    type: 'POST',
                    url: urlTest,
                    data: documentToSend,
                    async: false,
                    contentType: 'application/x-www-form-urlencoded',
                    dataType: 'json',
                    success: function (dataResponse) {
                              numberOfEntriesSuccess++;
                    },
                    error: function (xhr, ajaxOptions, errorThrown) {
                               var errorResponse = JSON.parse(xhr.responseText);
                                errorsList.push(errorResponse.ExceptionMessage + ". Skipping line.");
                    }
                });

Answer 4

采取递归方法：

ajaxLoopArray(myArray, function(){ /* do something when finish */ });

function ajaxLoopArray(someArray, callbackFunction){
    if(someArray.length>0){ //condition to break the loop
        data = someArrapy.pop(); // pop removes the last element from an array and returns that element.
        $.ajax({
            data
        }).done(function(x){
            //success
        })
        .fail(function(){
            //catch the error here
        })
        .always(function(){
            ajaxLoopArray(someArray, callbackFunction); //recursive call: keep on looping independently of success or error
        });
    }else{
        callbackFunction(); //when everything was done
    }
}