Axios 인터셉터 Typescript로 관리하기

 Axios Interceptor 타입스크립트로 설정하기

이번 주제는 Axios Interceptor with TypeScript입니다.
타입스크립트로 Axios Interceptor를 설정하는 방법은 무엇인지,
그리고 저는 어떤 식으로 Axios Interceptor를 세팅하여 사용 중인지를
작성해보겠습니다.

---

Axios Interceptors란?

우선, ChatGPT 친구에게 Axios Interceptor란 무엇인지 물어보았습니다.

chatGPT가 설명하는 axios intercptor

Axios interceptor는 request와 response가 then과 catch에 의해 처리되기 전에 전역적으로 가로채게 허용해 주는 axios library입니다. 이는 헤더 추가, 인증 관리, 로깅, 에러 처리 등의 작업을 할 때 매우 유용하게 사용할 수 있습니다.

Interceptor들은 http request나 response 객체와 함께 호출되는 함수입니다. 단일 interceptor는 객체가 전달되기 전에 객체를 변화하도록 선택할 수도 있고, 이어지는 프로세스에 체인(훅)을 걸어 다음에 동작할 함수를 선택할 수도 있습니다

---

정리하자면, axios interceptor는 axios의 return이 Promise 타입인 점을 이용하여 http request, response가 then이나 catch에 의해 처리되기 이전에 부가적인 작업을 할 수 있게 해주는 library입니다.

이때의 작업은 크게 두 종류로 나뉩니다.

Request Interceptors

http request가 server에 전달되기 전에 호출됩니다.

주로 사용하는 방식은 아래와 같습니다.

request config(options)를 바꾸기

헤더 추가(수정)

인증 관련 작업(토큰 추가 등)

로깅

로딩 상태 관리(start)

etc

Response Interceptors

server로부터 response를 받은 후에 호출됩니다.

주로 아래의 동작에 사용합니다.

response의 data를 가공 및 수정하기

에러 핸들링

로깅

로딩 상태 관리(end)

상태(store or state) 관리

response를 당신의 코드(프로젝트)에 반영하기 전에 할 수 있는 기타 작업들

---

저는 다음과 같은 방식으로 interceptor를 설정하여 사용합니다.

코드는 이 링크에 정리해놓았습니다 >>> Axios Interceptor with TS <<<

Type Import

Typescript에서 각 Interceptor마다 타입을 명시해 주기 위해 아래와 같이 Import를 해줍니다.

Type 명시를 위해 가져온다.

---

Axios 버전이 오르면서 Interceptors의 Request의 타입이 "AxiosRequestConfig"가 아닌 "InternalAxiosRequestConfig"로 바뀌었습니다.

Logging

개발서버 혹은 로컬서버에서 로그를 확인하기 위해(로깅) 아래 코드를 사용하였습니다.

이런 식으로 로그를 남겨 사용하고 있습니다.

Response Console

Error Console

Loading Handling

각 interceptors에서 로딩 상태 관리를 위해 store와 연결하여 동작하게 구현하여 사용하고 있습니다.

Error Handling

에러 발생 시 화면에서 Toast 혹은 Message 형태로 노출하기 위해 store와 연결하여 메시지를 전송하는 코드입니다.

Request Interceptor

Http Request시에 call 되는 함수입니다.

이 interceptor에서 주로 request config(header 포함) 수정, authentication 관련 작업 등을 주로 합니다.

Response Interceptor (Success)

http response가 then으로 넘어가기 전에 call 되는 함수입니다.

Response Interceptor (Error)

http response가 catch로 넘어가기 전에 call 되는 함수입니다.

에러 메시지의 형태나 내용, status code 등은 백엔드 개발자와 소통하여 작성하시면 되겠습니다.

Setup Interceptors

Axios Instance에 위에서 설정한 interceptors를 저장하기 위해 작성하는 코드입니다.

저는 이런 식으로 Axios Interceptors를 설정하여 사용하고 있으며, 세부적인 내용은 그때마다 설정해서 사용하고 있습니다.