인프런 커뮤니티 질문&답변

DongmyeongLee님의 프로필 이미지
DongmyeongLee

작성한 질문수

Vue.js 완벽 가이드 - 실습과 리팩토링으로 배우는 실전 개념

비동기 컴포넌트 체이닝

작성

·

201

1

안녕하세요!! 비동기 처리를 하고 있는데 제가 혹시 잘못한점이 있나해서 질문드립니다.

현재 아래와 같이 컴포넌트에서 actions를 호출하고 then, catch를 처리하였는데 await 호출이 에러가 발생하여 actions에서 catch문의 에러 발생 로그를 찍는데도 컴포넌트에서는 catch가 아닌 then절이 실행되는데 제가 혹시 잘못 이해하고 있는건가요?

// 컴포넌트의 mhethods
test(index, commentId) {
this.$store.dispatch('DELETE_COMMENT', commentId)
.then((res) => {
console.log(' then --> ', res);
})
.catch((err) => {
console.log(' catch ==> ' , err);
});
},


// actions.js
async DELETE_COMMENT(context, commentId) {
try {
const response = await requestDeleteComment(commentId);
return response.data;
} catch (e) {
console.log('에러 발생');
return e;
}
},

답변 4

1

DongmyeongLee님의 프로필 이미지
DongmyeongLee
질문자

감사합니다!!!

죄송한데 axios interceptor를 사용하면 actions에서는 그 에러를 받을수 없게되나요? error를 출력해보면 TypeError가 발생하더라구요. interceptor를 사용할 경우 에러처리를 interceptor에서 해야하는건가요?

0

DongmyeongLee님의 프로필 이미지
DongmyeongLee
질문자

제가 실수한 부분이 있나보네요. 참고해서 알아보겠습니다. 답변 감사합니다!

0

인터셉터를 활용하더라도 기본적으로 에러만 잘 반환해주시면 중간에 에러가 사라지는 일은 없습니다..! :) 인터셉터에서는 공통 에러만 처리하시고 화면단 오류는 모두 컴포넌트에서 하시는게 좋을 것 같아요..! :)

0

안녕하세요 동명님, `DELETE_COMMENT` 액션 함수의 catch 구문 리턴 값을 `return e` 대신에 `return Promise.reject(e)`로 해보시겠어요? :)

DongmyeongLee님의 프로필 이미지
DongmyeongLee

작성한 질문수

질문하기