Vue.js: Vuex 액션에서 실현되지 않은 약속

Vue.js: Vuex 액션에서 실현되지 않은 약속

vuex 작업이 약속을 반환하는 것은 이해하지만 vuex에서 오류를 처리하는 데 이상적인 패턴을 찾지 못했습니다.현재 접근 방식은 내 Axios 플러그인에서 오류 가로채기를 사용한 후 vuex 저장소에 오류를 커밋하는 것입니다.

plugins/sublicos.blocks:

export default function({ $axios, store }) {
    $axios.onError(error => {
        store.dispatch('setError', error.response.data.code);
    });
}

in store/index.disples:

export const state = () => ({
    error: null,
});

export const mutations = {
    SET_ERROR(state, payload) {
        state.error = payload;
    },
}

export const actions = {
    setError({ commit }, payload) {
        commit('SET_ERROR', payload);
    },
};

그런 다음 에러 상태를 감시하는 에러 컴포넌트를 사용하여 에러가 있는지 여부를 표시합니다.따라서 내 액션이나 액션을 디스패치한 컴포넌트에서 오류를 검출할 필요가 없습니다.하지만 예외를 발견하지 못한 채 방치하는 것이 좋지 않은 디자인인지 아닌지 걱정하지 않을 수 없습니다.이 설계로 오류를 처리하면 어떤 문제가 발생할 수 있습니까?더 좋은 방법이 없을까요?

vuex 액션에서 API 호출을 하고 실패 시 API 호출 오류와의 약속을 거부해야 한다고 주장합니다.모든 Axios 오류 목록을 피하고 대신 약속으로 오류가 반환되면 이 방법으로 유지 및 디버깅하는 것이 더 쉽다고 생각합니다.

예를 들어 다음과 같습니다.

getCartItems: function ({commit}, url) {
    return axios.get(url).then(response => {
      commit('setCartItems', response.data)
      return response
    }).catch(error => {
      throw error
    })
 },

위의 예에서는 용장 약속 래핑을 피하고 비동기/대기 기능을 사용하여 코드를 단순화하도록 개선되었습니다.

export const getCartItems = async ({commit}, url) => {
  const response = await axios.get(url);
  commit('setCartItems', response.data)
  return response;
};

언급URL : https://stackoverflow.com/questions/51235273/vue-js-uncaught-promises-in-vuex-actions