模态框方法中如何将new Promise转换为Async/await写法

async/await是Promise的语法糖，不存在无法转换的场景，绝大多数转换失败都是踩了以下几个典型问题，对应调整即可：

• 不要错误删除Promise包装层
  很多人转换时误以为要把new Promise整个删掉，实际上模态框的确认、取消回调是事件驱动的异步逻辑，这层Promise是连接事件回调和await语法的必要桥接，不需要删除。async/await是用来替代调用时的then/catch链式写法，不是替代Promise构造器本身。
  原始可正常运行的Promise版本参考：

  // 模态框封装方法
  function openConfirmModal() {
    return new Promise((resolve, reject) => {
      // 初始化模态框实例
      const modalIns = new ConfirmModal({ title: '确认操作？' })
      // 绑定事件触发resolve/reject
      modalIns.onConfirm = (formData) => resolve(formData)
      modalIns.onCancel = () => reject(new Error('用户取消操作'))
      // 挂载渲染模态框
      modalIns.mount('#app')
    })
  }
  
  // 原始调用方式（then链）
  openConfirmModal()
    .then(res => console.log('提交数据', res))
    .catch(err => console.log('操作中断', err.message))
  

  错误转换示例（删掉Promise层导致逻辑失效）：

  // 错误写法：方法执行完直接返回undefined，await拿不到任何结果
  async function openConfirmModal() {
    const modalIns = new ConfirmModal({ title: '确认操作？' })
    modalIns.onConfirm = (formData) => formData
    modalIns.onCancel = () => { throw new Error('用户取消操作') }
    modalIns.mount('#app')
  }
  

  正确转换写法：封装层保留Promise包装，仅把调用端的then链替换为async/await即可：

  // 封装层不需要改动，调用端用async函数包裹，用try/catch捕获异常
  async function handleSubmit() {
    try {
      const formData = await openConfirmModal()
      console.log('提交数据', formData)
      // 后续拿formData执行接口请求等逻辑
    } catch (err) {
      console.log('操作中断', err.message)
      return
    }
  }
  

• 排查单例模态框的Promise状态覆盖问题
  如果你的模态框是全局单例实现，重复打开时上一次未完成的Promise的resolve/reject引用会被新的覆盖，会导致之前的await永远处于pending状态，看起来像是代码没生效。解决方法是每次打开模态框都生成新的Promise实例，关闭模态框后及时清空绑定的事件回调，不要复用旧实例的Promise。
• 排查事件绑定顺序问题
  不要给同步的模态框挂载逻辑加不必要的await，比如写成await modalIns.mount()，如果mount是同步渲染DOM的方法，加await会导致事件绑定在模态框渲染完成之后，用户快速点击按钮时会触发不到绑定的回调，要和原Promise写法保持一致：先绑定确认/取消事件，再执行挂载渲染。

注意：不要为了强行全量使用async语法给所有逻辑套async函数，事件驱动型的异步逻辑本身就需要一层Promise做适配，这层包装不存在冗余问题。

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