[Axios] try catch 문에서의 AxiosError 처리

개요

• 회원가입 시 유효성 검사 중
• 입력한 닉네임이 중복이라면 서버에서 400 에러와 함께 이미 존재하는 닉네임이라는 에러 메세지를 응답값으로 준다
• 회원가입 요청은 async/await + try catch 문 axios로 로직 처리

문제 및 해결

(기존 코드)

//signUp.tsx (기존코드)
  const onsubmitHandler = async (e: any) => {
	//중략 
    try {
      const res = await axios.post(`/member/register`, e)
      if (res.status === 200) {
        alert('회원가입 성공!')
        route.push('/login')
      }
      if (res.status === 400) {
        alert('닉네임이 이미 존재합니다')
      }
    } catch (error) {
		console.log(error)
    }
  }

• 오류 코드 400시 alert을 통해 메세지를 띄워야 하는데 try 문 내에서 작성한 로직이 실행이 되지 않고 곧바로 catch 문으로 넘어간다

  이유 : axios는 fetch와 달리 HTTP 상태 코드 200이 아닌 경우 자동으로 오류 발생, catch 문으로 흐름 이동

그래서 catch 문 내에서 처리 시도하였으나

• catch 문 내에서 하게 될 경우에는 위와 같은 타입 에러 발생

  이유 : error는 unknown 타입이므로 error를 새로운 타입으로 변환하거나 타입을 좁힐 때까지 error를 사용한 어떠한 작업도 수행할 수 없다

  즉, error타입을 좁힌 후 catch문 내에서 처리해야 한다

---

(최종 수정 코드)

//signUp.tsx
  const onsubmitHandler = async (e: any) => {
	//중략 
    try {
      const res = await axios.post(`/member/register`, e)
      if (res.status === 200) {
        alert('회원가입 성공!')
        route.push('/login')
      }
    } catch (error) {
      if (axios.isAxiosError(error)) { //axiosError으로 타입을 좁힌다
        error.response?.status === 400 && alert('닉네임이 이미 존재합니다')
      }
    }
  }