Vue.js 从异步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')
      }
    }
},

我从我的组件调用它，如下所示：

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')
      }
    }
},

我在mounted中调用

handleFetchTweets

---

我的问题是，如何在组件中捕获错误？在该操作中，当出现错误时，将正确调用此方法

tweetFetchError

，但我不确定如何在组件的try/catch back中触发

catch

，您需要在

fetchTweets

方法中捕获错误后抛出该错误：

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

并使用返回的承诺的

处理程序捕获错误。catch

处理程序：

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

---

当我这样做时，我不会在控制台中出现“Error”（这表明我的

catch

在组件中工作，但我只是看到

Uncaught（in promise）错误：在XMLHttpRequest.handleError（xhr.js？14ed:87）的createError（createError.js？f777:16）处出现网络错误

哦，是的，因为它是一个异步方法，所以它会返回一个承诺，所以您需要使用承诺的

catch

方法，而不是try/catch。请参阅我的编辑