JavaScript：如何按特定顺序运行AJAX查询，在继续之前等待某些调用完成

下面是代码和我面临的问题。首先是我希望发生的事情：

这将是理想的结果

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) {
                                });
                            }
                        });
                    });

                });
            }
        });
    }
}

运行这个请求

/cc/AjaxController/justTheSplit/normal

此请求完成后，运行以下操作

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

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

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

在所有101都运行后，运行以下命令

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

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

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

在所有101都运行后，运行以下命令

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

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

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

在所有101都运行后，执行相同的操作，但针对异常，然后针对向导

一旦所有请求都运行了，然后运行最后一个Ajax请求

代码

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) {
                                });
                            }
                        });
                    });

                });
            }
        });
    }
}

函数processData（）{
常量类型={1:“正常”，2:“异常”，3:“向导”}；
for（让[key，ty]的Object.entries（type））{
风险值天数=101天；
var i；
var x=-1；
变量y=-1；
var z=-1；
$.get（'/cc/AjaxController/justTheSplit/'+ty，函数（数据，状态）{
对于（i=0；i您可以在
async
函数中使用此代码（或使用
then
链扩展
wait
s）

注意：每个步骤的所有303个请求都将并行运行，由浏览器安排并由服务器接受。但下一步仅在上一步完成时生成并启动。使用此方法可以轻松添加更多步骤。当然，您应该在代码周围添加
try catch

进度条在这里没有什么意义。无论如何，您可以将
done
处理程序附加到
build
函数中的每个请求，该函数通过计算已完成的请求来执行一些视觉反馈，这不会改变代码的其余部分。在等待每个步骤的同时，您还可以在步骤之间添加进度反馈