javascript - 如何构造这些嵌套的异步请求以在继续之前完成批处理？

Question

我需要提交一个主要的 AJAX 表单。但是，我想在继续提交主要内容之前，中途执行一系列其他初步表单提交和 AJAX 请求。

下面是想法，但有很多伪代码。我想调用 ajaxFunction 如图所示，完成其所有任务，然后继续主表单提交:

$('#mainform').submit(function(e){
    e.preventDefault();
    var main = this;

    var data = $('#section :input', main).serialize();

    //preliminary nested ajax requests
    var mainresult = ajaxFunction('arg1', 'arg2');


    alert("All preliminary AJAX done, proceeding...");

    if(mainresult){     
        //final ajax
        $.post('mainurl', data, function(result){
            console.log(result);
        });
    }else{
        //do nothing
    }
});


function ajaxFunction(param1, param2){
    //ajax1
    ajaxFetchingFunction1('url1', function(){
        //ajax2
        ajaxFetchingFunction2('url2', function(){
            //submit handler
            $('#anotherform').submit(function(){
                if(someparam === 1){
                    return true;
                }else{
                    return false;
                }
            });
        });
    });

}

就现在而言，我知道由于所有异步嵌套 AJAX 调用，它不会按预期工作。我得到的是 alert("All初步 AJAX 已完成，正在进行..."); 甚至在 ajaxFunction 中的任何 AJAX 调用之前执行。

我相信这正是引入 Deferred/Promise 概念的场景(“回调 hell ”)，但我一直在努力解决这个问题。如何构造这些不同的 AJAX 请求，以便代码执行等待 ajaxFunction 完成并返回 mainresult 以供后续使用？

Answer 1

How can I structure these different AJAX requests, such that code execution would wait until ajaxFunction completes and returns mainresult for subsequent use?

你不能，你也不会。 JavaScript 不会“等待”异步操作完成。相反，您可以将想要在异步操作完成后运行的代码移至回调中，然后在异步操作完成时调用该回调。无论是使用普通的异步回调还是作为 promise 一部分的结构化回调，都是如此。

Javascript 中的异步编程需要重新思考和重构控制流，以便将异步操作完成后想要运行的内容放入回调函数中，而不是按顺序放在下一行代码中。异步操作通过一系列回调按顺序链接起来。 Promise 是一种简化这些回调管理的方法，特别是简化错误传播和/或多个异步操作同步的方法。

<小时/>

如果您坚持使用回调，那么您可以使用完成回调来传达 ajaxFunction() 的完成情况:

function ajaxFunction(param1, param2, doneCallback){
    //ajax1
    ajaxFetchingFunction1('url1', function(){
        //ajax2
        ajaxFetchingFunction2('url2', function(){
            doneCallback(someResult);
        });
    });
}

然后在这里使用它:

$('#mainform').submit(function(e){
    e.preventDefault();
    var main = this;

    var data = $('#section :input', main).serialize();

    //preliminary nested ajax requests
    ajaxFunction('arg1', 'arg2', function(result) {
        // process result here
        alert("All preliminary AJAX done, proceeding...");

        if(result){     
            //final ajax
            $.post('mainurl', data, function(result){
                console.log(result);
            });
        }else{
            //do nothing
        }
    });
});

注意:我从代码中删除了您的 $('#anotherform').submit() ，因为在将重复调用的函数中插入事件处理程序可能是错误的设计(因为它最终会创建多个相同的事件处理程序)。如果您确定这样做是正确的，则可以将其插回去，但在我看来这是错误的。

<小时/>

这通常是使用 Promise 的好地方，但是您的代码有点抽象，无法准确地向您展示如何使用 Promise。我们需要查看 ajaxFetchingFunction1() 和 ajaxFetchingFunction2() 的实际代码来说明如何使用 Promise 来实现此操作，因为这些异步函数需要创建并返回 Promise 。如果您在其中使用 jQuery ajax，那么这将很容易，因为 jQuery 已经为 ajax 调用创建了一个 promise 。

如果ajaxFetchingFunction1()和ajaxFetchingFunction2()都被修改为返回一个promise，那么你可以这样做:

function ajaxFunction(param1, param2){
    return ajaxFetchingFunction1('url1').then(function() {
        return ajaxFetchingFunction2('url2');
    });
}

然后在这里使用它:

$('#mainform').submit(function(e){
    e.preventDefault();
    var main = this;

    var data = $('#section :input', main).serialize();

    //preliminary nested ajax requests
    ajaxFunction('arg1', 'arg2').then(function(result) {
        // process result here
        alert("All preliminary AJAX done, proceeding...");

        if(result){     
            //final ajax
            $.post('mainurl', data, function(result){
                console.log(result);
            });
        }else{
            //do nothing
        }
    });
});