callback hell转Promise实现失败，请求技术问题排查及指导

嘿，我来帮你捋清楚这个Promise转换的问题～你写的step1()其实是正确的Promise封装，大概率是后续的调用环节出了问题，导致没法按顺序执行。

先给你一个完整的正确实现，对比一下你可能踩的坑：

第一步：把所有步骤都封装成返回Promise的函数 #

首先得确保step2()和step3()也像step1()一样，返回一个Promise对象，这样才能用Promise的链式调用控制顺序：

function step1() {
  return new Promise(function (resolve, reject) {
    setTimeout(function () {
      console.log("Step 1 done After 3 seconds");
      resolve();
    }, 3000);
  });
}

function step2() {
  return new Promise(function (resolve, reject) {
    setTimeout(function () {
      console.log("Step 2 done After 2 seconds");
      resolve();
    }, 2000);
  });
}

function step3() {
  return new Promise(function (resolve, reject) {
    setTimeout(function () {
      console.log("Step 3 done After 1 second");
      resolve();
    }, 1000);
  });
}

第二步：正确调用Promise链式 #

你可能踩的最常见的坑有两个：

错误示例1：直接顺序调用，不等待 #

如果直接这么写，三个步骤会同时启动，不会按顺序执行：

// 错误！三个setTimeout会同时触发
step1();
step2();
step3();

错误示例2：then里没有返回Promise #

如果在.then()里调用step2()但不返回它的Promise，后续的.then()会立刻执行，不会等待step2完成：

// 错误！step3会在step1完成后立刻执行，不等step2
step1()
  .then(function() {
    step2(); // 这里没return step2的Promise，链式断裂
  })
  .then(function() {
    step3();
  });

正确的链式调用写法 #

必须在每个.then()里返回下一个步骤的Promise，这样链式才会等待前一个步骤完成：

step1()
  .then(function() {
    return step2(); // 返回step2的Promise，让后续then等待它
  })
  .then(function() {
    return step3();
  })
  .catch(function(error) {
    // 统一处理所有步骤可能出现的错误
    console.error("出错了:", error);
  });

更简洁的写法：async/await #

如果你的环境支持ES6+，用async/await会更直观，代码看起来像同步逻辑，但本质还是Promise：

async function runAllSteps() {
  try {
    await step1(); // 等待step1完成
    await step2(); // 等待step2完成
    await step3(); // 等待step3完成
  } catch (error) {
    console.error("执行出错:", error);
  }
}

runAllSteps();

总结你可能的问题 #

1. step2()或step3()没有返回Promise，导致没法被链式等待；
2. 调用时没有用.then()链式，或者在.then()里没有返回下一个步骤的Promise，导致链式断裂；
3. 没有处理错误（虽然你的示例没报错，但最好加上.catch()或try/catch，避免隐藏问题）。

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