JavaScript中如何实现符合依赖的复杂Promise链并修正执行时机？

需求流程 #

• 同时启动任务A、B、D
• 待A和B全部完成后启动任务C
• 待C和D全部完成后执行后续逻辑（对应代码中的pp2的then回调）

现有代码的问题 #

1. pp1的最后一个then未返回C的Promise：
   原代码中，pp1在执行完"p1-p2 done "的打印后，直接结束了Promise链，没有返回任务C的Promise，导致pp1在此时就变为resolved状态，不会等待C完成。
2. p3变量的作用域问题：
   p3是在pp1的then回调内部定义的，当外部执行Promise.all([pp1, p3, p4])时，p3还未被赋值（此时是undefined），Promise.all会将undefined视为已resolved的Promise，因此只要pp1和p4完成，pp2就会触发，完全忽略C的状态。

修正后的代码 #

function test_p(name, sec) {
    console.log(Date.now()-start,'Started ', name, " Sec: ", sec);
    return new Promise((resolve, reject) => {
        setTimeout(() => {
            console.log(Date.now()-start,'Resolved ', name, " Sec: ", sec);
            resolve(10);
        }, sec * 1000);
    });
}

const start = Date.now(); 

// 同时启动A、B、D
const p1 = test_p("A", 2)
    .then((result) => { console.log(Date.now()-start, result); return result });
const p2 = test_p("B", 5)
    .then((result) => { console.log(Date.now()-start,result); return result });
const p4 = test_p("D", 7)
    .then((result) => { console.log(Date.now()-start,result); return result });

// A+B完成后启动C，且让pp1关联C的Promise状态
const pp1 = Promise.all([p1, p2])
    .then((result) => { console.log(Date.now()-start,"p1-p2 startet"); return result })
    .then(() => { console.log(Date.now()-start,"p1-p2 done ") })
    .then(() => {
        // 返回C的Promise，让pp1等待C完成
        return test_p("C", 5)
            .then((result) => { console.log(Date.now() - start, result); return result });
    });    

// 等待pp1(A+B+C)和p4(D)都完成后触发
const pp2 = Promise.all([pp1, p4])
    .then((result) => { console.log(Date.now()-start,"pp1-p4 startet"); return result });

修正后控制台输出（预期） #

0 'Started ' 'A' ' Sec: ' 2
2 'Started ' 'B' ' Sec: ' 5
2 'Started ' 'D' ' Sec: ' 7
2001 'Resolved ' 'A' ' Sec: ' 2
2001 10
5003 'Resolved ' 'B' ' Sec: ' 5
5003 10
5003 'p1-p2 startet'
5003 'p1-p2 done '
5003 'Started ' 'C' ' Sec: ' 5
7002 'Resolved ' 'D' ' Sec: ' 7
7003 10
10004 'Resolved ' 'C' ' Sec: ' 5
10004 10
10004 'pp1-p4 startet'

关键修改点说明 #

• 让pp1的最后一个then返回任务C的Promise，这样pp1的resolved状态会等待C完成才触发。
• 移除了单独的p3变量，直接在then中返回C的Promise链，避免作用域导致的变量未定义问题。
• pp2只需要等待pp1和p4，因为pp1已经包含了A→B→C的完整依赖流程，无需额外传入C的Promise。

内容的提问来源于stack exchange，提问作者Michael Thum