循环链式异步 ajax 调用 promise 并在函数之间返回

Question

我正在分批加载结果并寻找一种解决方案，以防止屏幕冻结，直到我的所有 ajax 调用都返回。 有人建议使用异步承诺（这是正确的解决方案吗？），但我不明白在链接调用之间传递参数的语法是如何工作的。

它相当于许多 ajax 调用的循环链，除了我需要所有调用都依赖于上一个调用的结果（在这个例子中，url1 的循环都同时触发，这不是我想要的）。 当返回的 boolean“继续”（来自任何 ajax 调用）为假时，运行应该结束，而不是在最后一个循环和 url 到达时结束。

for (let i = 0; i < numLoops; i++) {
$.ajax({ 
          url: url1,
          type: "POST",
          data : jQuery.param({loop: i}),
          success: function(response) {
          var result = JSON.parse(response);

          if(result['proceed']){
                $.ajax({ 
                  url: url2,
                  success: function(response) {
                  var result = JSON.parse(response);
                  $( "#load" ).html(result['results']);
                  if(result['proceed']){ ... and so on

我正在尝试使用 jquery.when.then 承诺这些功能：

function First(loop, proceed, updated){
if(proceed)
    {
    $.ajax({
                  url: url1,
                  type: "POST",
                  data : jQuery.param({loop: loop}),
                  success: function(response) {
                  var result = JSON.parse(response);
                  $( "#load" ).html(result['results']);
                  updated(result['proceed']);
                }
            });
    }
}
function Second(proceed, updated){
if(proceed)
    {
    $.ajax({
                  url: url2,
                  success: function(response) {
                  var result = JSON.parse(response);
                  $( "#load" ).html(result['results']);
                  updated(result['proceed']);
                }
            });
    }
} 
function Third(proceed, updated){
if(proceed)
    {
    $.ajax({
                  url: url3,
                  success: function(response) {
                  var result = JSON.parse(response);
                  $( "#load" ).html(result['results']);
                  updated(result['proceed']);
                }
            });
    }
} 

我很难弄清楚如何链接它们，以便将先前 function 的返回传递给下一个 function。

这个不正确的语法描述了我正在尝试做的事情：

var proceed=true;
for (let i = 0; i < numLoops; i++) {
 $.when(First(i, proceed, updated); function updated(content) {var proceed=contents;} )
 .then(Second(proceed, updated); function updated(content) {var proceed=contents;})
 .then(Third(proceed, updated); function updated(content) {var proceed=contents;})
 }

如何将更新的进程从第一传递到第二？ 如何在每个循环结束时将更新的进程从第三次传递到第一次？ 我对 javacript 不是超级精通，非常感谢您的指点。 谢谢！

Answer 1

首先，将$.ajax调用转换为真正的Promise对象，如该线程中所述：

function asyncAjax(options){
    return new Promise(function(resolve, reject) {
        options.success = resolve;
        options.error = reject;
        $.ajax(options);
    });
}

或者，使用Fetch API ，它默认支持承诺。

然后使用async function发出请求：

for (let i = 0; i < numLoops; i++) {
    let response = await asyncAjax({ 
        url: url1, 
        type: "POST", 
        data: jQuery.param({loop: i}) 
    });
    
    let result = JSON.parse(response);
    if (result['proceed']) {
        response = await asyncAjax({ url: url2 });
        result = JSON.parse(response);
        ...
    }
}