AJAX错误ERR_INSUFFICIENT_RESOURCES，如何避免

Question

我尝试研究此问题，并且我知道此错误是由于太多的ajax调用而发生的，这就是浏览器无法处理它的原因。 但是，我认为解决方案视情况而定。 让我试着解释一下这段代码是如何工作的

首先，我选择一个csv文件（8000行），然后将其上传到数据库，调用函数的工作方式如下。

$(document).on("click", "#btn-group-agent-upload", function () {

    var reader = new FileReader();
    updateUploadPercentage(0);

    var file = $("#group-agent-file").prop("files")[0];

    reader.readAsText(file, 'UTF-8');

    reader.onload = Insert_Bulk_Agent;

});

然后执行其中的功能Insert_Bulk_Agent

function Insert_Bulk_Agent(event) {

var result = event.target.result;
var data = $.csv.toObjects(result);
var length = data.length;
var count = 0;
var arrayCollection = [];
var tbody = $("#error-list").find("tbody");
if (length > 0) {

    $.each(data, function (key, val) {

        if(val.AgentStatus == "" || val.BirthDate == "" || val.CSP == "" || val.Classification == "" || val.ContactNumber == "" ||
            val.EmailAddress == "" || val.FirstName == "" || val.LastName == "" || val.MiddleName == "" || val.LiveDate == "" || val.Program == "") {
            $.ajax({
                success: function () {
                    //console.log('ok');

                    $(tbody).append("<tr><td>" + val.FirstName + ' ' + val.MiddleName + ' ' + val.LastName + "</td>" +
                                        "<td>" + val.Tool + "</td></tr>");
                    arrayCollection.push(val);
                    count = count + 1;
                    var percentageCompleted = count / length * 100;
                    updateUploadPercentage(parseInt(percentageCompleted));

                }
            });
        } else {

            $.ajax({
                xhr: function () {
                    var xhr = $.ajaxSettings.xhr();
                    xhr.upload.onprogress = function (evt) {
                        count = count + 1;
                        var percentageCompleted = count / length * 100;
                        updateUploadPercentage(parseInt(percentageCompleted));

                    };
                    return xhr;
                },
                type: "POST",
                url: "IROA_StoredProcedures.asmx/Insert_Bulk_Agent",
                data: JSON.stringify(val),
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                success: function () {


                },
                error: function (XMLHttpRequest) {

                    count = count + 1;
                    var percentageCompleted = count / length * 100;
                    updateUploadPercentage(parseInt(percentageCompleted));
                    console.log(XMLHttpRequest);
                    console.log(JSON.stringify(val));
                }

            });

        }    
    });

}
else {

    alert("The selected file is empty");

}
 Update_uam();
}

First该函数遍历每一行，并评估所需字段是否为null或""值。 如果是该函数，则在html表中添加一行。 如果它具有值，它将调用一个ajax，它将把这些值插入数据库。 现在的问题是由于多个AJAX调用而出现问题。 如何处理此错误？

其次还有一个函数可以在这里调用update_uam ，确定该函数将在所有Insert_Bulk_Agent过程之后执行吗？

Answer 1

首先，这是我编写的“多个”队列（但从未在生产中进行测试，因此感谢您成为豚鼠：p）

这使您可以使用一个“队列”来添加Promises，它们最终将出现在max并行队列中-非常适合限制并发ajax请求的数量。 顺便说一下$.ajax ，返回一个Promise

现在，这是原始的，因为其中一个队列中的任何错误都会使该队列停止，因此可能需要更多操作才能正确使用

const multiQueue = max => {
    max = (isNaN(max) || max < 1) ? 1 : max;
    const q = new Array(max).fill(0).map(() => Promise.resolve());
    let index = 0;
    const add = (cb, ...args) => {
        index = (index + 1) % max;
        return (q[index] = q[index].then(() => cb(...args)));
    };
    return add;
};

我只是想了一下，可能

return (q[index] = q[index].then(() => cb(...args)
    .then(data => ({data}))
    .catch(error => ({error}))
);

可能会使队列变得不那么脆弱，请注意，所有的承诺都将随后解析为{data: whatever the resolved result was}或{error: whatever the rejection reason was}

对代码的更改很小

Promise.all(data.map((val, key) => {
    // inside the map function
})).then(Update_uam);

这将等到所有Promises（ajax）完成后，再调用Update_uam

在两种情况下的map函数中

return queue(() => $.ajax({
    // ajax request
}));

返回已添加到队列中的$.ajax返回的承诺

因此，整个代码是：

var queue = multiQueue(6); // most browsers I think limit to 6 simultaneous AJAX anyway

function Insert_Bulk_Agent(event) {

    var result = event.target.result;
    var data = $.csv.toObjects(result);
    var length = data.length;
    var count = 0;
    var arrayCollection = [];
    var tbody = $("#error-list").find("tbody");
    if (length > 0) {
        Promise.all(data.map((val, key) => {
            if (val.AgentStatus == "" || val.BirthDate == "" || val.CSP == "" || val.Classification == "" || val.ContactNumber == "" ||
                val.EmailAddress == "" || val.FirstName == "" || val.LastName == "" || val.MiddleName == "" || val.LiveDate == "" || val.Program == "") {
                return queue(() => $.ajax({
                    success: function() {
                        //console.log('ok');

                        $(tbody).append("<tr><td>" + val.FirstName + ' ' + val.MiddleName + ' ' + val.LastName + "</td>" +
                            "<td>" + val.Tool + "</td></tr>");
                        arrayCollection.push(val);
                        count = count + 1;
                        var percentageCompleted = count / length * 100;
                        updateUploadPercentage(parseInt(percentageCompleted));

                    }
                }));
            } else {
                return queue(() => $.ajax({
                    xhr: function() {
                        var xhr = $.ajaxSettings.xhr();
                        xhr.upload.onprogress = function(evt) {
                            count = count + 1;
                            var percentageCompleted = count / length * 100;
                            updateUploadPercentage(parseInt(percentageCompleted));

                        };
                        return xhr;
                    },
                    type: "POST",
                    url: "IROA_StoredProcedures.asmx/Insert_Bulk_Agent",
                    data: JSON.stringify(val),
                    contentType: "application/json; charset=utf-8",
                    dataType: "json",
                    success: function() {


                    },
                    error: function(XMLHttpRequest) {

                        count = count + 1;
                        var percentageCompleted = count / length * 100;
                        updateUploadPercentage(parseInt(percentageCompleted));
                        console.log(XMLHttpRequest);
                        console.log(JSON.stringify(val));
                    }

                }));
            }
        })).then(Update_uam);

    } else {
        alert("The selected file is empty");
        Update_uam();
    }
}