尝试在 Vuejs 中使用 async / await 进行捕获

Question

我正在使用 VueJS/Nuxt 和 Vuex 存储，我定义了以下方法：

async UpdateData () {
  try {
    await this.$store.dispatch('updateMyData', this.data)
    successMsg({ message: 'Data updated successfully' })
  } catch (e) {
    errorMsg({ message: 'Some error' })
  }
}

问题是我还没有创建操作 'updateMyData'，所以在我的控制台中我看到错误 '[vuex] unknown action type: updateMyData'

然而，successMsg() 仍然被执行并且我收到消息 'Data updated successfully'。

我的假设是，如果 await... 失败，它将转到 catch 块。

你能帮我看看我的代码有什么问题吗？我该如何改正它。

Answer 1

该错误不是实际的承诺错误，它是来自 Vuex 的警告，表示 'updateMyData' 操作尚未在您的 Vuex 商店中的任何地方注册。该消息来自一个简单的 console.log(/error/warn) 而不是 throw 或 reject()，这就是为什么它不会在您的函数中失败。

Answer 2

在 await 表达式不返回 Promise 对象的情况下，它会将传入的内容转换为 "resolved promise"。这只是意味着您的未定义函数会立即返回，就像它已解决一样。因此，它不会拒绝并且 await 不会抛出。

If the value of the expression following the await operator is not a Promise, it's converted to a resolved Promise.

这来自这里：https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/await#Description

尝试在 Vuejs 中使用 async / await 进行捕获

Try catch with async / await in Vuejs

javascript

vue.js

vuejs2

nuxt.js