Vuex action не кидает на топор ios try / catch

Question

Я использую Vue и Vuex и хотел бы иметь возможность показывать ошибки API внутри моего компонента, когда они возникают в моем действии. Я использую топор ios для этого примера.

Это действие, которое должно просто выполнить запрос get и выдать ошибку при сбое

export default {
  async search({ commit }, params) {
    const result = await axios.get(`http://localhost:3000/search`, params)
    commit('SET_RESULTS', result.data)
  }
}

Это мой поиск . vue компонент, который я хочу иметь возможность регистрировать 'Caught Error', когда внутри моего действия возникает ошибка API

methods: {
    onSubmit() {
      try {
        this.$store.dispatch('search', this.value)
      } catch (e) {
        console.log('Caught Error')
      }
    }
  }

Я получаю красные ошибки консоли, но не ту, которую я определяя в моем поиске. vue. Так что по какой-то причине мои действия не выполняются или мой поиск. vue не срабатывает.

Answer 1

dispatch возвращает обещание, оно не выдаст ошибку.

Таким образом, вы использовали бы catch обратный вызов:

this.$store.dispatch('search', this.value).catch(err => {
  console.log('Caught Error')
}).

Если вы хотите try / catch вместо этого вам нужно будет использовать async / await для этого обещания:

async onSubmit() {
  try {
    await this.$store.dispatch('search', this.value)
  } catch (e) {
    console.log('Caught Error')
  }
}