vuex 작업에서 호출될 때 REST API 호출의 오류를 처리해야 하는 위치

vuex 작업에서 호출될 때 REST API 호출의 오류를 처리해야 하는 위치

나는 Vuex 동작에서 REST API를 호출하여 일부 데이터를 가져온 다음 돌연변이에 커밋하는 전형적인 시나리오가 있다.비동기/와이트 구문을 사용하고 시도/캐치/마지막 블록을 사용한다.내 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
}

내가 처리한다는 것을 알아채시오.catch(err) { }그 실수를 다시 던지지 마오류 메시지를 상태로 저장한 다음 vue 구성 요소에 바인딩하여 작업Error가 truthy인지 여부를 표시하십시오.이렇게 하면 try/catch와 같은 오류 처리 코드로부터 vue 구성 요소를 깨끗하게 유지하고자 한다.

이 패턴이 맞나?이 흔한 시나리오를 다루는 더 좋은 방법이 있을까?vuex 작업에 오류를 다시 발생시키고 구성 요소에 전파되도록 해야 하는가?

내가 주로 하는 일은 게시되는 데이터 주변에 api 요청을 처리하고 오류를 저장하는 래퍼를 붙이는 것이다.이렇게 하면 사용자 객체 자체에서 오류를 기록할 수 있으며, 오류가 있는 경우 구성요소에 오류를 사용할 수 있다.

예를 들면 다음과 같다.

import { fetchUsers } from '@\Common\api'
import Form from '@\Utils\Form'

const state = {
  isProcessing: false,
  form: new Form({
    users: null
  })
}

const mutations = {
  setIsProcessing(state, value) {
    state.isProcessing = value
  },
  updateForm(state, [field, value]) {
   state.form[field] = value
  }
}

const actions = {
  async fetchUsers ({ state: { form }, commit }) {
    let users = null
    commit('setIsProcessing', true)

    try {
      users = await form.get(fetchUsers);
    } catch (err) {
      // - handle error
    }

    commit('updateForm', ['users', users])
    commit('setIsProcessing', false)
  }
}

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

그런 다음 구성 요소에서 다음과 같이 래퍼의 오류 개체를 사용할 수 있다.

<template>
  <div>
    <div class="error" v-if="form.erros.has('users')">
      {{ form.errors.get('users') }}
    </div>
    <ul v-if="users">
      <li v-for="user in users" :key="user.id">{{ user.username }}</li>
    </ul>
  </div>
</template>

<script>
import { mapState } from 'vuex'
export default {
  computed: {
    ...mapState('module' ['form']),
    users () {
      return this.form.users
    }
}
</script>

이것은 내가 매우 편리하다고 생각하는 나의 개인적인 접근법일 뿐이고 그것은 지금까지 나에게 도움이 되었다.표준 패턴이 있는지 또는 이를 위해 명시적으로 "정확한 방법"이 있는지 모른다.

나는 api의 응답이 오류를 반환할 때 당신의 오류는 자동으로 반응하기 때문에 포장지 방식을 좋아한다.

vuex 외부에서 다시 사용하거나 더 나아가 래퍼 구성 요소로 작용하는 사전 정의된 오류 경계에 오류를 주입하고 제공/주입 방법을 사용하여 오류 데이터를 구성 요소 트리에 전파하여 표시해야 할 곳에 표시하십시오.

오류 경계 구성요소의 예:

<template>
  <div>
    <slot></slot>
  </div>
</template>

<script>
export default {
  props: {
    module: {
      type: String,
      required: true,
      validator: function (value) {
        return ['module1', 'module2'].indexOf(value) !== -1
      }
    },
    form: {
      type: String,
      default: 'form'
    }
  },
  provide () {
    return {
      errors: this.$store.state[this.module][this.form].errors
    }
  }
}
</script>

오류를 수신해야 하는 일부 응용 프로그램 포장:

<template>
  <div id="app">
    <error-boundary :module="module1">
      <router-view/>
    </error-boundary>
  </div>
</template>

그런 다음 다음과 같은 하위 구성 요소에서 사용자 래퍼의 오류를 사용할 수 있다.

api의 응답이 없는 것과 같은 글로벌 오류가 있으며 사이드바에 표시하려는 경우:

<template>
  <div id="sidebar">
    <div v-if="errors.has('global')" class="error">
      {{ errors.get('global').first() }}
    </div>
    ...
  </div>
</template>
<script>
export default {
  inject: [
    'errors'
  ],
  ...
}
</script>

사용자 개체 유효성 검사에 대한 오류에 대해 위젯 내부 어딘가에서 동일한 오류 개체가 다시 사용됨:

<template>
  <div id="user-list">
    <div v-if="errors.has('users')" class="error">
      {{ errors.get('users').first() }}
    </div>
    ...
  </div>
</template>
<script>
export default {
  inject: [
    'errors'
  ],
  ...
}
</script>

얼마 전에 제프리 웨이가 Vue2에 대해 시리즈를 만들었는데 비슷한 걸 제안했어.빌드할 수 있는 양식 및 오류 개체에 대한 제안: https://github.com/laracasts/Vue-Forms/blob/master/public/js/app.js

참조URL: https://stackoverflow.com/questions/58521321/where-should-errors-from-rest-api-calls-be-handled-when-called-from-in-vuex-acti