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

Question

I am using VueJS/Nuxt and Vuex store, and I have the following method defined:

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

The problem is that I have not yet created the action 'updateMyData', so in my console I see the error '[vuex] unknown action type: updateMyData'

However, still the successMsg() is executed and I get the message 'Data updated successfully'.

My assumption was that if await... fails, it will go to the catch block.

Can you please help with what is wrong with my code and how I can correct it.

Answer 1

That error is not an actual promise error, it's a warning from Vuex, saying that the 'updateMyData' action hasn't been registered anywhere in your Vuex store. The message comes from a simple console.log(/error/warn) instead of a throw or reject() , which is why it doesn't fail in your function here.

Answer 2

In the case of an await expression not returning a Promise object, it turns what is passed in into a "resolved promise". This simply means your undefined function is returned immediately as if it Resolved. Hence, it doesn't reject and the await doesn't throw.

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

This comes from here: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/await#Description