尝试在 Vuejs 中使用 async / await 捕获答案

【问题标题】：Try catch with async / await in Vuejs尝试在 Vuejs 中使用 async / await 捕获
【发布时间】：2018-03-10 04:23:38
【问题描述】：

我正在使用 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() 仍然执行，我收到消息“数据更新成功”。

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

请您帮忙解决我的代码有什么问题以及如何纠正它。

【问题讨论】：

你熟悉 Promise 吗？ await / async 基本上是一种使用 Promise 的新语法。如果此代码的 promise 版本没有失败，await 版本也不会失败。
我没怎么用过promise。但是看看上面的内容，你为什么认为它没有发现错误？
@acdcjunior - 你读过这个问题了吗？即代码块正下方的语句。
无害。都只是想帮忙。所以支持我的答案 - 因为它毕竟是最好的答案:-)

标签： javascript vue.js vuejs2 nuxt.js

【解决方案1】：

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

【讨论】：

那么，这意味着如果我创建动作并且如果该动作由于某种原因返回错误，那么错误将被捕获？
我相信是这样，因为 $dispatch() 函数正在返回操作返回的承诺

【解决方案2】：

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

如果 await 运算符后面的表达式的值不是 Promise，则将其转换为已解析的 Promise。

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

【讨论】：

正确 - 问号的原因。 kingdaro 的代码可能是正确的。我删除了，因为它与问题没有直接关系。
虽然dispatch 通常会返回Promise，但当操作不存在时，它会返回undefined（刚刚测试过）。你一针见血，+1！