try catch 질문입니다.

Question

안녕하세요, 지난 고급 강좌 때 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); },

captain · Answer

안녕하세요 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 · Answer

아, api 쪽에 async , await를 안붙였었군요 ㅠ.. 위와 같이 코드를 수정해보고 테스트 해봤는데요, api 쪽에서 에러가 나면 캐치가 잘 되네요, 그런데 PostAddForm 에서는 에러가 response로 넘어와서 이쪽에서는 try catch가 필요 없을거 같은데 이쪽에도 try catch를 넣어준 이유가 있을까요? 그런데 잘 생각해보니 이렇게 되면 화면 단에서 어짜피 에러가 없을 때 정상적인 데이터의 response 값과 에러가 났을 때 넘어오는 response 값을 분기 처리를 해줘야 한다는 단점이 있네요..아무래도 강의에 나온 것처럼 에러 처리 하는 것이 최적일거 같다는 생각이 드네요 ㅠㅠ