개요

• 서버에 각종 API 요청을 보낼 때, 사용자에게 에러 메세지를 띄워줘야 하는 경우가 있다 (ex. 계정명이 중복됐다거나 비밀번호가 틀렸다던지 등의..)
• 이전까지는 그냥 전달받은 http statusCode를 기반으로 해당 API 요청 응답 처리 로직에서 에러 처리를 했다
• ex)

  //...중략
catch (error) {
      if (axios.isAxiosError(error)) {
        error.response?.status === 409 &&
          setError('accountName', { message: '중복된 계정명입니다' })
      }
    }

• 보이는 바와 아주 아주 비효율적..

---

과정

axios interceptor을 이용해 request header 에 토큰을 담아 보내는 것처럼,
각종 응답에 관해서도 가로챈 뒤 추가 로직을 구현할 수 있다

• axios interceptor 공식문서
• 사용법은 간단! 공식 문서 예시 코드 참고

axios.ts

//1. axios 인스턴스 생성
export const axiosInstance = axios.create({
  baseURL: import.meta.env.VITE_BACK_SERVER, 
  // 이번 프로젝트에서는 vite을 이용하기 때문에 process.env가 아닌 import.meta.env로 환경변수 사용
})

• 클라이언트 측에 error 메세지를 출력해야되는 오류인지 여부는 errorCode로 구분하기로 했다

AxiosError 객체 분석

서버에서 던지는 오류 내용은 에러 객체의 response ☞ data 안에 들어있다
이 중 errorCode로 구분하고, errorMessage를 가져다 쓸 것

1. 클라이언트 측에서 출력해야되는 오류 코드로 구성된 배열 생성
2. 해당 error.response의 errorCode가 그 배열에 포함되어있다면
3. errorMessage를 그대로 가져다 띄우는 형식으로 진행

//1. 출력용 오류 코드로 구성된 배열
const errorCodes: string[] = [
  'EMAIL_ALREADY_EXISTS',
  'MEMBER_PASSWORD_INCORRECT',
  'ACCOUNT_NAME_ALREADY_EXISTS',
  'LOGIN_FAILED_PASSWORD_INCORRECT',
		.....등등
]

axiosInstance.interceptors.response.use(
  (response) => {
    return response
  },
  async (error) => {
    if (errorCodes.includes(error.response.data.errorCode)) {
      toast.error(error.response?.data.errorMessage)
      // 포함되어 있다면 alert으로 노출
    }
)

• 물론 token 재발급도 interceptor을 이용해 처리할 수 있다

axiosInstance.interceptors.response.use(
  (response) => {
    return response
  },
  async (error) => {
    if (errorCodes.includes(error.response.data.errorCode)) {
      toast.error(error.response?.data.errorMessage)
    }
    // 토큰 만료 시 처리
    if (error.response.data.errorCode === 'TOKEN_TIME_OUT') {
      await tokenRefresh() // refreshToken을 이용해 accessToken 재발급 요청 후 localStorage에 갱신 처리하는 함수
      const TOKEN = getLocalStorage('accessToken')
      if (!!TOKEN) error.config.headers['Authorization'] = `Bearer ${TOKEN}`
      const response = await axios.request(error.config)
      return response
    }
    return Promise.reject(error)
  }
)

결과