如何将Promise链式调用代码改写为回调形式并输出正确结果4

你的代码存在3个核心问题，直接导致运行报错、结果不符合预期：

• 变量未定义：传给sum的回调没有设置形参接收求和结果，直接使用不存在的变量c调用multiply，后续d变量也没有定义，直接触发ReferenceError
• 时序不对齐：原Promise版本的sum函数有500ms的异步延迟，你改写的sum直接同步执行回调，和原逻辑执行顺序不一致
• 回调逻辑错误：divide函数里错误写为console.log(callback(d/2))，回调的作用是接收计算结果，不需要把计算过程套在回调参数里。

要对齐原Promise的执行逻辑和输出结果，需要统一所有异步函数的回调规则：每个异步操作在延迟结束后拿到计算结果，把结果作为入参传给回调函数；调用时逐层嵌套，上一步的回调里拿到结果再调用下一个异步函数，代码如下：

// 对齐原逻辑：求和操作延迟500ms执行
function sum(a, b, callback) {
  setTimeout(() => {
    const calculateResult = a + b;
    callback(calculateResult);
  }, 500)
}

// 乘法操作延迟600ms执行
function multiply(c, callback) {
  setTimeout(() => {
    const calculateResult = c * 2;
    callback(calculateResult);
  }, 600)
}

// 除法操作延迟700ms执行
function divide(d, callback) {
  setTimeout(() => {
    const calculateResult = d / 2;
    callback(calculateResult);
  }, 700)
}

// 嵌套调用形成典型的回调地狱结构
function run() {
  sum(2, 2, (sumResult) => {
    multiply(sumResult, (multiplyResult) => {
      divide(multiplyResult, (finalResult) => {
        console.log(finalResult);
      })
    })
  })
}

run(); // 延迟约500+600+700ms后输出4，和原Promise版本结果一致

你可以把这个回调版本和原Promise版本做对应，更易理解Promise的本质：

• Promise的then方法本质就是注册回调函数，等当前异步任务状态变更为完成后，把结果传进去触发回调
• 纯回调写法必须手动维护嵌套结构、手动传递上一步的计算结果，一旦业务逻辑变长，嵌套层级会快速加深，代码可读性、可维护性会急剧下降，这就是常说的回调地狱问题，也是Promise、async/await等异步方案要解决的核心痛点。

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