[React] axios 요청시 .catch에서 에러 응답 열기

서버에서 보내준 에러메시지를 클라이언트에서 띄워야 하는 상황이 생겼다. 

항상 에러메시지는 직접 작성하기만 해서 에러 응답을 어떻게 받는지 몰랐다. 

개발자도구에서 까보니 응답은 이렇게 온다. 

 

{"status":0,"message":null,"fieldErrors":[{"field":"artistName","rejectedValue":"","reason":"공백일 수 없습니다"}],"violationErrors":null}

 

서버에서 유효성검사와 중복검사에 대한 실패 응답을 에러와 함께 상황에 따라 바꾸어서 보내기 때문에 어떤 메시지가 올지 모르는 클라이언트쪽에서는 에러메시지를 직접 작성하지 못하고 에러 응답에서 꺼내서 화면에 띄워줘야 한다. 

 

뭐라고 검색해야 할지 몰라 조금 당황했지만 찾고보니 간단했다.

 

//(중략)
.catch(err => {console.log(err.response)}; );

 

이렇게 error 뒤에 response를 붙여주기만 하면 응답에 접근 가능하다. 

 

위 사진과 같은 경우엔 에러메시지에 접근하기 위해

 

//(중략)
.catch(err => { alert(err.response.data.fieldErrors[0].reason)}; )

 

이렇게 입력해주었더니 경고창에 문구가 잘 뜨는걸 확인했다. 

 

 

 

---

참고자료

https://ordinary-code.tistory.com/135