비동기 Vuex 작업에서 구성 요소 캐치 오류

비동기 Vuex 작업에서 구성 요소 캐치 오류

다음과 같은 비동기 액션이 있습니다.

export const fetchTweets = async ({ commit, state }) => {
  const tweetFetchError = error => {
    // throw here?
  }
  try {

    const { oAuthAccessToken, oAuthAccessTokenSecret, user: { id } } = state

    const { data, errors } = await api.fetchTweets(oAuthAccessToken, oAuthAccessTokenSecret, id)

    if (errors && Object.keys(errors).length) return tweetFetchError(errors)

    commit(types.SET_TWEETS, {
      tweets: data
    })
  } catch (error) {
    tweetFetchError(error)
  }
}

컴포넌트에서 호출합니다.

methods: {
    ...mapActions(['fetchTweets']),
    async handleFetchTweets () {
      try {
        await this.fetchTweets()
      } catch (error) {
        console.log('errored')
        this.$message.error('Error fetching tweets')
      }
    }
},

나는 전화한다handleFetchTweets기마로

컴포넌트 내의 오류를 검출하려면 어떻게 해야 합니까?[ Action ]에서tweetFetchError에러가 발생했을 때는 올바르게 기동되지만, 어떻게 하면 이 에러를 트리거 할 수 있는지 모르겠습니다.catch컴포넌트에서의 테스트/캐치백에서

에러를 검출한 후에, 에러를 폐기할 필요가 있습니다.fetchTweets방법:

  ...
  } catch(error) {
    tweetFetchError(error)
    throw error;
  }
}

반환된 Promise를 사용하여 오류를 파악합니다..catch핸들러:

async handleFetchTweets () {
  await this.fetchTweets().catch((error) => {
    console.log('errored')
    this.$message.error('Error fetching tweets')
  });
}

언급URL : https://stackoverflow.com/questions/46350326/catch-error-in-component-from-async-vuex-action