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

Posted 2023-03-07

【中文标题】如何确保 .then() 中的功能在继续之前完成？

【英文标题】：How to ensure functions in .then() complete before proceeding?

【发布时间】：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 的回复。我一定会看看延迟的反模式。

【参考方案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