javascript - 当多个异步调用完成时，AJAX 启动最终的异步调用

Question

我正在考虑如何更好地管理运行多个异步调用的顺序以实现最佳周转时间。基本上流程是这样的:当网页开始加载时，它会显示页面并启动多个 AJAX 调用 a()、b() 和 c()。这三个都完成后，运行async call d()。我检查了几个线程，例如 jquery execute function when two conditions are met但这并不完全相同。

我尝试使用多个标志来显示异步调用是否完成，并使用一个 block 函数来阻止进程，直到可以发出最后一个调用为止。

var aFinished=false;
function a() {
      var jsonData = $.ajax({
        url: "${createLink(controller:'environment', action:'a')}",
        dataType: "json",
        async: true
      }).done(function(jsonData) {
          //do something
          aFinished=true;
    });
}
//same flag+function for b() and c()
function d(){
    blockTillAllDone();
    var jsonData=$.ajax(...).done(...);
}
function blockTillAllDone(){
    if(aFinished&&bFinished&&cFinished){
        console.log("Ok to continue");
        return;
    }
    else{
        console.log("Have to wait");
        setTimeout(blockTillAllDone(),2000);
    }
}
a();b();c();d();

性能不是很好，因为递归 block 函数导致堆栈不断增长。有没有人有更好的想法如何以更多的 AJAX 方式而不是粗暴的 block 功能来实现？提前致谢!

Answer 1

您正在寻找promises .

This article很好地解释了基础知识。虽然许多浏览器现在都原生支持它们(IE 除外)，但您仍然希望包含像 es-6 promise 这样的 polyfill。 .一旦开始使用 promises，您就可以通过以下方式解决问题:

var a = new Promise(function(resolve,reject){
    $.ajax({
        type: 'GET',
        dataType: 'json',
        url: 'example.com/test/1',
        success: function(response){resolve(response);},
        error: function(response){reject(response);}
    });
});

var b = new Promise(function(resolve,reject){
    $.ajax({
        type: 'GET',
        dataType: 'json',
        url: 'example.com/test/1',
        success: function(response){resolve(response);},
        error: function(response){reject(response);}
    });
});

var c = new Promise(function(resolve,reject){
    $.ajax({
        type: 'GET',
        dataType: 'json',
        url: 'example.com/test/1',
        success: function(response){resolve(response);},
        error: function(response){reject(response);}
    });
});

//This will run once all async operations have successfully finished
Promise.all([a,b,c]).then(
    function(data){
        //everything successful, handle data here
        displayData(data);
    },
    function(data){
        //something failed, handle error here
        logoutError(data);
    }
);