then () в обещании всегда выполняется, который находится в компоненте Vue, даже если я получаю ошибку от catch (), который находится в действии Vuex - PullRequest
Новая
       7

then () в обещании всегда выполняется, который находится в компоненте Vue, даже если я получаю ошибку от catch (), который находится в действии Vuex

0 голосов
/ 25 марта 2019

Я настраиваю аутентификацию, используя apollo-vue graphql. Чтобы перенаправить пользователя на домашнюю страницу, когда он / она успешно вошел в систему. Я возвратил обещание из действия Vuex и использовал then () в компоненте Vue, где я помещаю свой узел в маршрут для перенаправления, но затем () в компоненте Vue всегда выполняется, даже если я получаю ошибку от catch (), которая находится в действиях vuex, и пользователь всегда перенаправляется на домашнюю страницу

Я пытался добавить catch after then () в компонент Vue, и он работает, но я хочу зафиксировать свою ошибку в vuex, а не в компоненте vue

Действие в Vuex 

login(){
 return apollo
  .mutate({
    mutation: CREATE_SHOP_USER,
    variables: signUpData
    })
   .then((res) => console.log(res))
   .catch((err) => console.log(err))
}

Метод в компоненте Vue 

 userAuthenticate() {
      const userSignupData = {
        email: this.email,
        password: this.password
      };

      this.$store
        .dispatch("authenticateApp", userSignupData)
        .then(() => {
          this.$router.push("/");
        })

Я ожидаю, что "then" в компоненте Vue никогда не должен выполняться, если catch уже выполнен, что находится в действии Vuex.

1 Ответ

2 голосов
/ 25 марта 2019

Вы можете зарегистрировать ошибку в действии vuex, но вам нужно будет выбросить ее снова, чтобы по-прежнему отклонять обещание: 

return apollo.mutate({
  mutation: CREATE_SHOP_USER,
  variables: signUpData
})
  .then((res) => console.log(res))
  .catch((err) => {
    console.log(err)
    throw err
  })

Это предотвратит вызов then внутри вашего компонента. Конечно, поскольку теперь у нас есть отклоненное обещание, мы все равно должны обработать отклонение: 

this.$store
  .dispatch("authenticateApp", userSignupData)
  .then(() => {
    this.$router.push("/");
  })
  .catch(() => {
    // Handle rejection here
  })
...