Error Mesage
[Vue warn]: Error in v-on handler (Promise/async): "AxiosError: Request failed with status code 400"
Vue로 구현한 페이지에서 기존에 등록되어있던 데이터 정보를 수정해서 서버로부터 저장해 달라는 요청을 했는데, 이러한 에러 메세지가 떴다.
수정 요청은 axios를 사용했는데 에러 메세지에 보이는 것과 같이 axios 요청하는데 무슨 에러가 생긴 것임.
디버깅 과정
우선 프론트와 백 어디서 에러가 나는 것인지 먼저 확인을 했는데,
서버에선 아예 요청 자체가 들어오지 않는다는 것을 확인함.
컨트롤러에서 요청이 들어오면 console창에 해당 로그가 뜨도록 해놨는데 서버에서는 아무 반응이 없었음.
그래서 Vue에서 생긴 문제겠구나!하여
Vue로 구현한 페이지에서 F12를 눌러 어디까지 데이터가 제대로 들어갔는지 확인했다.
일단 브레이크 포인트는 수정 요청을 보내려는 메서드에서 정보를 받는 부분 먼저 확인!
확인 결과 잘 들어가고 있다.
그다음에는 action에서 axios요청을 할 때를 확인했는데 아래 화면과 같이 데이터가 들어가지 않고 있는 것을 확인..!
무언가. . 코드가 잘 못 되었다는 것을 감지함.
알아도 정확히 찾아내는 데 까지는 시간이 꽤 걸림 😮💨
원인
[수정 요청을 하는 메서드]
[action에서 axios요청하는 부분]
여기서 { } 괄호가 문제였다.
해결 방법
괄호를 넣어주면 된다.
괄호로 받아 주는 게 없으니 정보가 제대로 들어오지 않은 것.
괄호 하나 넣어주니 제대로 동작한다.
매번 느끼는 거지만 사소한 걸로 많이 헤맨다.
이런 에러 경험 또한 누적되면 에러를 해결하는 능력이 점점 올라가겠지! 🙃