axios 인스턴스·인터셉터·오류 처리 정책을 분리하는 구조

인스턴스 생성

API 서버별 baseURL, timeout, 기본 header를 한곳에 고정한다.

client

request interceptor에서 access token, correlation id, locale 같은 공통 값을 붙인다.

request

response interceptor에서 데이터 shape와 오류 메시지를 앱 표준 형태로 바꾼다.

response

컴포넌트는 axios 세부 설정보다 도메인 API 함수만 호출하게 만든다.

API layer

Timeout

응답이 무한히 대기하지 않게 요청별 제한 시간을 둔다. 사용자 재시도 UX와 운영 로그를 함께 설계한다.

failure bound

Auth

토큰 첨부와 만료 처리 로직이 화면마다 중복되지 않는다. refresh 실패 시 로그아웃과 재시도 루프 방지가 필요하다.

토큰 흐름

Error

서버 검증 오류, 권한 오류, 네트워크 오류를 구분해 UI가 복구 경로를 제공한다. 모든 오류를 alert 하나로 처리하면 사용자가 다음 행동을 알 수 없다.

typed failure

인스턴스 범위 서로 다른 API 서버는 별도 인스턴스로 정책을 나눈다.

취소 컴포넌트 unmount나 검색어 변경 시 불필요한 요청을 취소한다.

보안 민감 header와 token이 로그에 그대로 남지 않는다.

apiClient.interceptors.request.use(addAuthToken)
apiClient.interceptors.response.use(normalizeData, normalizeError)