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 请求

法典

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函数中使用此代码(或使用then链扩展await(

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函数中的每个单独请求，该函数通过计算已完成的请求来执行一些视觉反馈 - 这不会更改代码的其余部分。等待每个步骤时，您还可以在步骤之间添加进度反馈。