Vue.js 在vuex操作中从调用REST API时，应在何处处理REST API调用的错误？

我有一个典型的场景，我在vuex操作中调用REST API来获取一些数据，然后将其提交给客户。 我使用async/await语法和try/catch/finally块。我的vuex模块如下所示：

const state = {
  users: null,
  isProcessing: false,
  operationError: null
}

const mutations = {
  setOperationError (state, value) {
    state.operationError = value
  },
  setIsProcessing (state, value) {
    state.isProcessing = value
    if (value) {
      state.operationError = ''
    }
  },
  setUsers(state, value) {
    state.users= value
  }
}

const actions = {
  async fetchUsers ({ commit }) {
    try {
      commit('setIsProcessing', true)

      const response = await api.fetchUsers()
      commit('setUsers', response.result)
    } catch (err) {
      commit('setUsers', null)
      commit('setOperationError', err.message)
    } finally {
      commit('setIsProcessing', false)
    }
  }
}

export default {
  namespaced: true,
  state,
  mutations,
  actions
}

请注意，我在vuex操作中处理

catch（err）{}

，并且不重新显示该错误。我只是将错误消息保存在状态中，然后将其绑定到vue组件中，以显示operationError是否真实。通过这种方式，我希望保持vue组件不受错误处理代码（如try/catch）的影响

---

我想知道这是正确的模式使用？有没有更好的方法来处理这种常见情况？我是否应该重新显示vuex操作中的错误，并让它传播到组件？

我通常做的是，在发布的数据周围有一个包装器，用于处理api请求和存储错误。这样，您的用户对象可以在其自身上记录错误，并且如果存在任何错误，您可以在组件中使用这些错误

例如：

从'@\Common\api'导入{fetchUsers}
从“@\Utils\Form”导入表单
常量状态={
i处理：false，
表格：新表格({
用户：空
})
}
常数突变={
设置处理（状态、值）{
state.isProcessing=值
},
updateForm（状态，[字段，值]）{
state.form[字段]=值
}
}
常量动作={
异步获取用户（{state:{form}，commit}）{
让用户=null
提交（'setIsProcessing'，true）
试一试{
users=wait form.get（fetchUsers）；
}捕捉（错误）{
//-处理错误
}
提交（'updateForm'，['users'，users]）
提交（'setIsProcessing'，false）
}
}
导出默认值{
名称空间：对，
国家,，
突变，
行动
}

然后在组件中，您可以使用包装器上的errors对象，如下所示：

{{form.errors.get（'users'）}

{{{user.username}

从“vuex”导入{mapState}
导出默认值{
计算：{
…mapState（'module'['form']），
用户（）{
返回此.form.users
}
}

这只是我个人的方法，我觉得非常方便，到目前为止它对我很有用。我不知道是否有任何标准模式，或者是否有明确的“正确方法”来做到这一点

我喜欢包装器方法，因为当api的响应返回错误时，您的错误会自动反应

您可以在vuex外部重复使用它，甚至可以进一步将错误注入预定义的错误边界（充当包装器组件），并使用“提供/注入”方法将错误数据传播到组件树中，并在需要时显示它们

以下是错误边界组件的示例：

导出默认值{
道具：{
模块：{
类型：字符串，
要求：正确，
验证器：函数（值）{
返回['module1'，'module2'].indexOf（值）！=-1
}
},
表格：{
类型：字符串，
默认值：“表单”
}
},
提供（）{
返回{
错误：此.store.state[this.module][this.form]。错误
}
}
}

包装应用程序中应接收错误的部分：

然后，您可以在子组件中使用用户包装中的错误，如下所示：

如果您有一个全局错误，比如api没有响应，并且希望在侧边栏中显示它

{{errors.get（'global'）.first（）}
...
导出默认值{
注入：[
“错误”
],
...
}

并且同一个错误对象在小部件中的某个位置重复使用，用于用户对象验证上的错误：

{{errors.get（'users'）.first（）}
...
导出默认值{
注入：[
“错误”
],
...
}

Jeffrey Way不久前在Vue2上做了一个系列，他提出了类似的建议。下面是关于可以构建的表单和错误对象的建议：