如何将自定义callback回调函数转换为Promise？

你可以参考以下代码实现完全相同的弹窗效果：

<script>
const promiseMessage = () => {
  return new Promise((resolve, reject) => {
    // 执行第一个弹窗逻辑
    alert("Hello there customer!");
    // 第一个逻辑执行完成后调用resolve，触发后续.then绑定的回调
    resolve();
  })
}

// 通过.then挂载第二个弹窗逻辑
promiseMessage().then(() => {
  alert("You are about to enter Jims Gym supplies! Enjoy!");
})
</script>

逻辑说明 #

• 原callback版本的执行逻辑是：执行第一个alert → 调用传入的回调函数执行第二个alert。Promise版本的执行逻辑是：调用promiseMessage时同步执行Promise内部的第一个alert → 调用resolve将Promise状态置为已完成 → 自动触发.then中绑定的第二个alert逻辑，效果完全一致。
• 你初始代码中定义的callbackFn参数在Promise实现中不需要，Promise支持通过.then链式挂载后续逻辑，无需提前传入回调参数。
• 该实现同时兼容后续扩展异步场景，如果后续你需要把第一个alert替换为接口请求、定时器等异步操作，只需要在异步操作完成的位置调用resolve即可，后续逻辑的挂载方式无需改动。

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