try catch 질문입니다.

Vue.js 끝장내기 - 실무에 필요한 모든 것

스토어를 이용한 토큰 저장 및 활용

해결된 질문

작성

192

안녕하세요, 지난 고급 강좌 때 try catch 를 api/index.js 파일에서 처리 했던 것이 생각나서 이 부분도 아래와 같이 적용해보려고 했는데요, 에러 처리가 안되고 console 도 찍히지 않네요..

방법이 잘못된 것일까요?
api 호출 하는 쪽에서 에러 status만 넘겨주고 화면 단에서 status를 받아서 공통 에러 처리 컴포넌트를 호출 해주는 케이스를 생각해봤거든요. 이 부분에는 적절하지 않은 것일까요?

// api/index.js
// 학습 노트 데이터 생성 API
function createPost(postData) {
  try {
    return instance.post('posts', postData);
  } catch (error) {
    console.log('1', error);
    return error.response.data.message;
  }
}

// PostAddForm.vue
async submitForm() {
  const response = await createPost({
    title: this.title,
    contents: this.contents,
  });
  console.log('response', response);
},

vuejs vuex javascript

답변 2

장기효(캡틴판교)

지식공유자

안녕하세요 jude님 :) 좋은 질문이네요! 말씀하신 의도대로 로직을 처리하기 위해서는 아래와 같이 수정되면 좋을 것 같습니다 :)

// api/index.js
// 학습 노트 데이터 생성 API
async function createPost(postData) {
  try {
    return await instance.post('posts', postData);
  } catch (error) {
    console.log('1', error);
    return error.response.data.message;
  }
}

// PostAddForm.vue
async submitForm() {
  try {
      const response = await createPost({
      title: this.title,
      contents: this.contents,
    });
    console.log('response', response);
  } catch (error) {
    // 에러 처리..
  }
},

이번에도 강의에 대해서 좋은 평가 남겨주셔서 감사합니다. 남은 강의도 재밌게 들으세요 :)

jude

질문자

아, api 쪽에 async , await를 안붙였었군요 ㅠ..

위와 같이 코드를 수정해보고 테스트 해봤는데요, api 쪽에서 에러가 나면 캐치가 잘 되네요, 그런데 PostAddForm 에서는 에러가 response로 넘어와서 이쪽에서는 try catch가 필요 없을거 같은데 이쪽에도 try catch를 넣어준 이유가 있을까요?

그런데 잘 생각해보니 이렇게 되면 화면 단에서 어짜피 에러가 없을 때 정상적인 데이터의 response 값과 에러가 났을 때 넘어오는 response 값을 분기 처리를 해줘야 한다는 단점이 있네요..아무래도 강의에 나온 것처럼 에러 처리 하는 것이 최적일거 같다는 생각이 드네요 ㅠㅠ

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

try catch 질문입니다.