Question

Async/Await 行为不符合预期

2019-05-02

226

javascript vue.js

我正在学习如何使用 Async/Await，据我所知，它应该等到 Await 执行完毕后再继续执行代码。

但是，我的代码在 Await 之后完全停止执行，这是我的方法（我使用的是 Vue）：

async register () {
  await this.form.validateFields((err, values) => {
    if (err) {
      return
    }
   alert('this gets executed if err is empty')
  })
  alert('this never gets get executed, why?') 
}

validateFields() 是 Vue 版本的 Ant Design 的一个函数，用于验证我的表单输入。有关它的更多信息这里，也许它会帮助通知你们任何人。

那么我到底做错了什么？

Answer 1

Async await 的存在是为了简化使用承诺的语法。如果您不使用承诺，那么 async/await 对您没有任何帮助。

看起来validateFields 使用的是回调而不是承诺，因此您需要围绕它创建自己的承诺。例如：

async register () {
  try {
    const values = await new Promise((resolve, reject) => {
      this.form.validateFields((err, values) => {
        if (err) {
          reject (err);
        } else {
          resolve(values);
        }
      })
    })
    console.log('got values', values);
  } catch (error) {
    console.log('caught an error', error);
  }
}