从异步 Vuex 操作中捕获组件中的错误
Catch error in Component from async Vuex Action
我有一个异步操作,像这样:
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
在出现错误时被正确调用,但我不确定如何在 Component
中触发 try/catch 中的 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')
});
}
我有一个异步操作,像这样:
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
在出现错误时被正确调用,但我不确定如何在 Component
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')
});
}