如何使用Promise实现顺序输出1、2、3、done及代码错误排查

问题原因 #

• setTimeout 属于JavaScript异步宏任务，注册后会先放入事件队列，等待当前所有同步代码执行完毕才会触发回调，你代码中同步执行的console.log("done")会优先于所有setTimeout回调执行，所以最先输出done。
• 循环中三个setTimeout是几乎同时注册的，延时都为1000ms，所以会在1秒后同时输出1、2、3，不会按顺序触发。
• Promise的resolve被提前触发，没有和计数的异步操作做关联，整个Promise的状态变更和计数流程完全独立，达不到你要的异步流程控制效果。

正确实现代码 #

以下实现可以做到每隔1秒依次输出1、2、3，最后输出done：

const state = true;

// 封装延时打印的Promise工具函数
function delayPrint(num, delay) {
  return new Promise((resolve) => {
    setTimeout(() => {
      console.log(num);
      resolve();
    }, delay);
  })
}

const count = new Promise(async (resolve, reject) => {
  if (state) {
    // 等待所有计数依次执行完成
    for (let i = 1; i <= 3; i++) {
      await delayPrint(i, 1000);
    }
    console.log("done");
    resolve("counter work");
  } else {
    reject("counter not work");
  }
})

count
  .then((response) => console.log("success", response))
  .catch((response) => console.log("failed", response));

内容的提问来源于stack exchange，提问作者lian abdiansyah tanjung