如何确保 .then() 中的功能在继续之前完成？答案

【问题标题】：How to ensure functions in .then() complete before proceeding?如何确保 .then() 中的功能在继续之前完成？
【发布时间】：2021-04-24 12:00:34
【问题描述】：

下面是$.when().then()的用法。

    $.when(setLineDet(rptId, rptLn)).then(function(data) {
        console.log("done setting line details");
        setHeaderDet(rptId);
        }).then(function(data) {
            console.log("done setting header details");
            setOtherDet();
        }).then(function(data) {
            console.log("done setting other details");
        });

setLineDet() 的代码：

function setLineDet(id, ln) { //set line details
    funcSel = "get_ln_det";
    var passVar = funcSel+"~@"+id+"~@"+ln;
    
    var def = new $.Deferred();
    
    ajaxCall(passVar).done(function(data) {
        var lnData = data.trim().split("~@");
        
        $("#lnDesc").val(lnData[2]);
        $("#lnDesc2").val(lnData[3]);
        $("#lnDesc3").val(lnData[4]);
        $("#lnDesc4").val(lnData[5]);
        $("#lnDesc5").val(lnData[6]);
        $("#lnDesc6").val(lnData[7]);
        $("#lnDesc7").val(lnData[8]);
        $("#lnDesc8").val(lnData[9]);
        $("#lnDesc9").val(lnData[10]);
        $("#lnDesc10").val(lnData[11]);
        $("#lnDesc11").val(lnData[12]);
        
        $.when(setRptLnList(lnData[0])).done(function(data) {
            def.resolve("done");
        });
    });
    
    return def.promise();
}

setHeaderDet() 的代码：

function setHeaderDet(id) { //set header details
    console.log("header 1");
    
    funcSel = "get_hdr_det";
    var passVar = funcSel+"~@"+id;
    
    var def = new $.Deferred();
    
    ajaxCall(passVar).done(function(data) {
        console.log("header 2");
        var hdrData = data.trim().split("~@");
        
        $("#hdr").val(hdrData[2]);
        $("#hdr2").val(hdrData[3]);
        $("#hdr3").val(hdrData[4]);
        $("#hdr4").val(hdrData[5]);
        $("#hdr5").val(hdrData[6]);
        $("#hdr6").val(hdrData[7]);
        $("#hdr7").val(hdrData[8]);
        $("#hdr8").val(hdrData[9]);
        $("#hdr9").val(hdrData[10]);
        $("#hdr10").val(hdrData[11]);
        
        var hasValue = 0;
        var doneSetOpr = 0;
        
        for(var i=6; i<12; i++) {
            if(hdrData[i]!="") { hasValue++; }
        }
        
        if(hdrData[6]!=""){
            $.when(setDesc("desc1", hdrData[6])).done(function(data) {
                console.log("set desc1");
                doneSetOpr++;
            });
        }
        if(hdrData[7]!=""){
            $.when(setDesc("desc2", hdrData[7])).done(function(data) {
                console.log("set desc2");
                doneSetOpr++;
            });
        }
        if(hdrData[8]!=""){
            $.when(setDesc("desc3", hdrData[8])).done(function(data) {
                console.log("set desc3");
                doneSetOpr++;
            });
        }
        if(hdrData[9]!=""){
            $.when(setDesc("desc4", hdrData[9])).done(function(data) {
                console.log("set desc4");
                doneSetOpr++;
            });
        }
        if(hdrData[10]!=""){
            $.when(setDesc("desc5", hdrData[10])).done(function(data) {
                console.log("set desc5");
                doneSetOpr++;
            });
        }
        if(hdrData[11]!=""){
            $.when(setDesc("desc6", hdrData[11])).done(function(data) {
                console.log("set desc6");
                doneSetOpr++;
            });
        }
        
        console.log("header 3");
        console.log("hasValue: "+hasValue+", doneSetOpr: "+doneSetOpr);
        
        if(doneSetOpr==hasValue && hasValue>0) {
            console.log("doneSetOpr==hasValue");
            def.resolve("done");
        }
    });
    
    console.log("header 4");
    return def.promise();
}

ajaxCall() 的代码：

function ajaxCall(passValues) {
    return $.ajax({
        type: "POST",
        url: "processes.jsp",
        data: {passValues: passValues}
    });
}

控制台输出：

line 1
line 4
line 2
line 3
done setting line details
header 1
header 4
done setting header details
done setting other details
header 2
header 3
hasValue: 3, doneSetOpr: 0
set desc1
set desc2
set desc3

如您所见，setLineDet 函数已完成，然后才移动到 setHeaderDet。但是，它没有完成 setHeaderDet 功能，并立即移至 setOtherDet。我真的不知道为什么，因为我对所有函数都使用相同的方法（创建 $.Deferred、.resolve()、.promise()）。
另外，我不知道为什么 doneSetOpr 值没有增加。由于该值不等于 hasValue，因此未执行 .resolve()。所以我尝试删除 if 语句并只放置 .resolve()。它仍然产生相同的输出。

p.s 我的程序运行良好。这意味着没有错误，最终所有值都被准确设置并且不会造成致命问题。我真的很想了解使用 promises 和 deferred 的正确方法，因为我可能用错了，因为后续的 .then() 在继续下一个之前没有完成函数。谢谢。

【问题讨论】：

您需要阅读并了解承诺链。 .then() 处理程序内的异步操作需要自己返回一个承诺，然后您在 .then() 处理程序内返回该承诺。这将导致 Promise 链在前进到链中的下一个 .then() 之前等待该 Promise。
避免deferred antipattern！
感谢 jfriend00 和 Bergi 的回复。我一定会看看延迟的反模式。

标签： jquery ajax promise jquery-deferred

【解决方案1】：

关键点：

您只需返回开始时已经创建的承诺，然后在 .then() 中返回承诺。而不是创建延迟对象，这最终会导致延迟反模式。
阅读并查看@Bergi 链接中的延迟反模式示例。

$.when(setLineDet(rptId, rptLn)).then(function(data) {
    console.log("done setting line details");
    return setHeaderDet(rptId);
    }).then(function(data) {
        console.log("done setting header details");
        return setOtherDet();
        }).then(function(data) {
            console.log("done setting other details");
        });

setLineDet() 的代码：

function setLineDet(id, ln) {
    console.log("line 1");

    funcSel = "get_ln_det";
    var passVar = funcSel+"~@"+id+"~@"+ln;
    
    return ajaxCall(passVar).done(function(data) {
        console.log("line 2");
        var lnData = data.trim().split("~@");
        
        // set line values
        
        return lnData[0];
    }).then(function(data) {
        console.log("line 3");
        return setRptLnList(data);
    });
}

setHeaderDet() 的代码：

function setHeaderDet(id) {
    console.log("header 1");
    
    funcSel = "get_hdr_det";
    var passVar = funcSel+"~@"+id;
    
    var hdrDataCpy = ""
    
    return ajaxCall(passVar).then(function(data) {
        console.log("header 2");
        var hdrData = data.trim().split("~@");
        hdrDataCpy = hdrData;
        
        //set header values
        
        return hdrData;
    }).then(function(data) {
        console.log("header 3");
        return $.when(setDesc("desc1", hdrDataCpy[6])).then(function(data) {
            return setDesc("desc2", hdrDataCpy[7]);
        }).then(function(data) {
            return setDesc("desc3", hdrDataCpy[8]);
        }).then(function(data) {
            return setDesc("desc4", hdrDataCpy[9]);
        }).then(function(data) {
            return setDesc("desc5", hdrDataCpy[10]);
        }).then(function(data) {
            return setDesc("desc6", hdrDataCpy[11]);
        });
    });
}

控制台输出：

line 1
line 2
line 3
done setting line details
header 1
header 2
header 3
set desc1
set desc2
set desc3
done setting header details
done setting other details

//the "set desc1/2/3" is displayed from the setDesc() function

【讨论】：