JavaScript: как выполнять запросы AJAX в определенном порядке, ожидая завершения определенных вызовов, прежде чем продолжить

Question

Код ниже и проблемы, с которыми я сталкиваюсь. Во-первых, я бы хотел, чтобы это произошло:

ЭТО БЫЛО ИДЕАЛЬНЫМ РЕЗУЛЬТАТОМ

Запустите этот один запрос

/cc/AjaxController/justTheSplit/normal

Послеэтот один запрос завершен , выполните следующее

/cc/AjaxController/workCsv/0/normal
...
/cc/AjaxController/workCsv/100/normal

После того, как все 101 выполнили , выполните следующее

/cc/AjaxController/sortHours/0/normal
...
/cc/AjaxController/sortHours/100/normal

После всех101 выполнил , запустил следующее

/cc/AjaxController/workFilters/0/normal
...
/cc/AjaxController/workFilters/100/normal

После того, как все 101 выполнили , выполните то же самое, но для ненормального, а затем для мастера

После того как все запустят , затем выполните последний Ajax-запрос

CODE

function processData() {
    const types = {1:"normal", 2:"abnormal", 3:"wizard"};
    for (let [key, ty] of Object.entries(types)) {
        var days = 101;
        var i;
        var x = -1;
        var y = -1;
        var z = -1;

        $.get('/cc/AjaxController/justTheSplit/'+ty, function(data, status) {
            for (i=0;i<days;i++) {
                $('.days-progress-'+ty).show();
                $.get('/cc/AjaxController/workCsv/'+i+'/'+ty, function(data, status) {
                    $('.days-progress-'+ty).find('.progress-bar').css('width', i+'%');
                    x++;
                    $.get('/cc/AjaxController/sortHours/'+x+'/'+ty, function(data, status) {
                        y++;
                        $('.hours-progress-'+ty).find('.progress-bar').css('width', (y+1)+'%');
                        $.get('/cc/AjaxController/workFilters/'+y+'/'+ty, function(data, status) {
                            z++;
                            $('.filters-progress-'+ty).find('.progress-bar').css('width', (z+1)+'%');
                            if (z===100 && y===100 && z===100 && ty==='rocu') {
                                $.get('/cc/AjaxController/cleanData', function(data, status) {
                                });
                            }
                        });
                    });

                });
            }
        });
    }
}

У меня возникли следующие проблемы:

• Значения x, y и z никогда не сбрасываются, поэтому они достигают 303
• Похоже, что запросы Ajax не ожидают завершения предыдущих, прежде чем перейти к следующему пакету

Answer 1

Вы можете использовать этот код в функции async (или расширить await s цепочкой then)

const calls = ['normal', 'abnormal', 'wizard']
const range = Array.from({length:101},(v,k)=>k) // build number array

let build = (url) => calls.flatMap( x => range.map(y => $.get(url + y +'/' + x))) // generates the 303 ajax requests

let init = calls.map(x => $.get('/cc/AjaxController/justTheSplit/' + x)) // generate initial requests
await $.when(...init) // wait all to finish

let step1 = build('/cc/AjaxController/workCsv/')
await $.when(...step1)

let step2 = build('/cc/AjaxController/sortHours/')
await $.when(...step2)

let step3 = build('/cc/AjaxController/workFilters/')
await $.when(...step3)

Осторожно: все 303 запроса каждого шага будут выполняться параллельно,как запланировано браузером и принято сервером. Но следующий шаг строится и запускается только после завершения предыдущего. Дальнейшие шаги могут быть легко добавлены с использованием этого подхода. Конечно, вы должны добавить try-catch вокруг кода.

Прогресс-бар здесь не имеет большого смысла. В любом случае, вы можете прикрепить обработчик done к каждому отдельному запросу в функции build, которая выполняет некоторую визуальную обратную связь путем подсчета выполненных запросов, что не изменит остальной код. Поскольку каждый шаг ожидается, вы также можете добавить обратную связь между шагами.