如何正确编排Promise执行顺序以实现指定异步流程并解决问题？

Promise链执行流程 #

基础代码（原始版本） #

const timeoutPromise = (interval, intervalName) => {
  return new Promise((resolve, reject) => {
    setTimeout(function(){
      console.log(`Executed ${intervalName} at: ${new Date().toString()} with interval of ${interval}`);
      resolve();
    }, interval);
  });
};
let main = () => {
  console.log('Starting at:', new Date().toString());

  console.log('Completed at:', new Date().toString());
};

需求说明 #

• 创建一个接收两个参数的函数：
  • 一个字母（如A、B、C、D）
  • 毫秒级时间（可自定义不同数值）
• 函数内部必须包含使用该时间的setTimeout
• main函数需按以下时序执行：
  • A与D同时启动
  • C仅在A和D都完成后启动
  • B在A完成后立即启动
• 执行要求：
  • 程序启动时打印时间和提示信息
  • 程序结束时打印时间和提示信息
  • 每次调用函数时打印时间和对应字母

问题描述 #

尝试多种方法后，要么A执行两次，要么B在程序执行结束后才被打印。

解决方案代码 #

// 符合要求的Promise任务封装函数
const taskPromise = (taskName, delay) => {
  return new Promise((resolve) => {
    setTimeout(() => {
      const now = new Date().toString();
      console.log(`Executed ${taskName} at: ${now} with delay of ${delay}ms`);
      resolve();
    }, delay);
  });
};

const main = async () => {
  const startTime = new Date().toString();
  console.log('Starting at:', startTime);

  // 同时启动A和D：直接声明Promise实例，两者会立即并行执行
  const taskA = taskPromise('A', 1000);
  const taskD = taskPromise('D', 2000);

  // A完成后立即启动B：通过then链式调用绑定依赖关系
  taskA.then(() => taskPromise('B', 500));

  // 等待A、D都完成后启动C：用Promise.all监听两个任务的完成状态
  await Promise.all([taskA, taskD]);
  await taskPromise('C', 800);

  const endTime = new Date().toString();
  console.log('Completed at:', endTime);
};

// 执行主函数
main();

代码说明 #

1. 并行启动A和D：仅创建一次taskA和taskD实例，Promise会在声明后立即触发内部的setTimeout，实现同时启动。
2. A完成后触发B：利用then方法绑定A的完成回调，确保B在A执行完毕后立刻启动，不会提前或滞后。
3. 等待A、D完成再启动C：Promise.all会等待传入的所有Promise都resolve后才继续执行，完美满足C的依赖条件。
4. 避免重复执行A：所有依赖A的操作复用同一个taskA实例，不会重复调用任务函数。
5. 正确输出结束时间：通过async/await让main函数等待所有任务执行完毕后，再打印结束时间，避免提前输出。

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