javascript - ajax 调用乱序运行的顺序延迟 promise

Question

如果你查看 showResults()，你会看到它首先创建一个 Promise，然后运行 ​​getSelectedIds() 返回一个 Promise，然后它使用这些选定的 id 进行 api 调用，这是一个 ajax 调用，然后控制台记录sr df3 已完成。我很难弄清楚的问题是我认为我在某个地方缺少一些返回语句，所以 promise 解决得太早了或者其他什么。

有人可以指出我在这里出错的地方，并告诉我 getApi ajax 调用或前一个或后一个事件需要什么，以便在 ajax 调用返回其值之前不会发生“sr df3 finish” promise 。

app.core.getSelectedIds = function(){

    var dfd = $.Deferred();

    //eliminates having to make an unnecessary ajax call if we already have them
    if( $.isEmptyObject(app.core.selectedIds) ){

        //gather up selected ids
        $('input[type=checkbox]').each(function (key, value) {

            //look for checked checkboxes only
            if ($(this).is(':checked') && $(this).hasClass('results')) {

                //get id from hidden input next to checkbox, set ids into an object for later use
                stdIds[key] = $(this).next().attr('value');
            }
        });

        app.core.selectedIds = stdIds;
    }

    dfd.resolve();
    return dfd.promise();
};

 app.test.getApi = function(newToken, nextPageNum){

    var df1,df2;

    if(nextPageNum){ app.test.nextPageNum = nextPageNum; }

    df1 = app.test.ajaxCall1();

    df2 = df1.then( function(){
            console.log('test df2 started');
            console.log(app.test.standardsObj); //the ajax calls results after being applied to the methods property
    });

    df2.done(function(){
            console.log('test df2 finished');
    });
};

app.ui.showResults = function(newToken){

    var df1,df2,df3;

    df1 = $.Deferred();

    df2 = df1.then(function(){
            console.log('sr df2 started');
            return app.core.getSelectedIds(); //is a promise
    });

    df2.done(function(){
            console.log(app.core.selectedIds);
            console.log('sr df2 finished');
    });

    df3 = df2.then(function(){
            console.log('sr df3 started');
            app.test.getApi(newToken);
    });

    df3.done(function(){
            console.log('sr df3 finished');
    });

    df1.resolve();
};

app.test.ajaxCall1 = function(){

    var idArr = [];

    //For now set up an array to cast those values to
    $.each(app.core.selectedIds, function( key, value ){

        idArr[key] = value;
    });

    return app.core.methodByRoute('ajax_call_1', {ids: idArr}, 'GET')
        .done(function(retrievedResults){

            app.test.standardsObj = retrievedResults;
        })
};

控制台日志输出为

sr df2 started
Object { 1="498", 2="501", 3="502", more...}
sr df2 finished 
sr df3 started 
sr df3 finished 
test df2 started 
["valid data"] 
test df2 finished

Answer 1

app.core.getSelectedIds = function(){
    var dfd = $.Deferred();
    …
    dfd.resolve();
    return dfd.promise();
}

如果这个函数不执行任何异步操作，那么它根本不需要返回 promise ，并且无论如何都会立即解决延迟问题？

i think i have some missing return statements somewhere

是的，完全正确。基本规则是:返回每个执行异步操作的函数的 promise 。在您的情况下，这包括 app.test.getApi 函数和调用它的 df2.then(function(){…}) 回调 - 如果回调不这样做不返回任何内容，df3 在 df2 之后立即解析，因为它不知道要等待什么。

顺便说一句，您不需要 df1 - 只需使用函数返回的第一个 Promise 来启动链即可。

app.core.getSelectedIds = function() {
    if ($.isEmptyObject(app.core.selectedIds)) {
        $('input[type=checkbox]').each(function (key, value) {
            if ($(this).is(':checked') && $(this).hasClass('results')) {
                stdIds[key] = $(this).next().attr('value');
            }
        });
        app.core.selectedIds = stdIds;
    }
    return $.when(app.core.selectedIds); // a promise. just to start the chain.
                                         // maybe this function needs to do
                                         // something async in the future
};

app.test.getApi = function(newToken, nextPageNum) {
    if (nextPageNum) {
        app.test.nextPageNum = nextPageNum;
    }
    var df1 = app.test.ajaxCall1();
    var df2 = df1.then( function(){
            console.log('test df2 started');
            console.log(app.test.standardsObj); //the ajax calls results after being applied to the methods property
    });
    df2.done(function(){
            console.log('test df2 finished');
    });
    return df2;
//  ^^^^^^^^^^^
};

app.ui.showResults = function(newToken) {
    var df1 =app.core.getSelectedIds(); // is a promise
    df1.done(function() {
        console.log(app.core.selectedIds);
        console.log('sr df2 finished');
    });
    var df2 = df1.then(function() {
        console.log('sr df2 started');
        return app.test.getApi(newToken);
//      ^^^^^^
    });
    df2.done(function(){
        console.log('sr df2 finished');
    });
    return df2;
//  ^^^^^^^^^^^ just for convenience, if we want to chain something
//              after a .showResults() call
};