- Node.js와 브라우저를 위한 Promise 기반 HTTP 클라이언트로 비동기 요청을 쉽게 처리할 수 있게 해 줍니다. - 이는 비동기 처리를 통해 네트워크 요청이 완료될 때까지 다른 코드 실행을 차단하지 않고, 효율적인 리소스 사용이 가능합니다. - then()과 catch() 메서드를 사용하거나 async/await 구문과 함께 사용하여 비동기 코드를 더 읽기 쉽고 관리하기 쉽게 작성할 수 있습니다.
1. axios.get() - axios만을 사용하여서 API 통신을 수행할 때 '비동기 통신'을 통해서 수행이 됩니다. 2. async/await를 사용한 비동기 처리 - 함수 내의 async를 선언하고 axios 내에 await를 사용하여 비동기 처리가 수행이 됩니다.
💡 요청 인터셉터 : axios.interceptors.request - 클라이언트에서 API Server로 ‘요청이 전송되기 이전’에 실행될 함수나 ‘요청 과정에서 발생한 오류’에 대해 인터셉트를 하는 것을 의미합니다.
💡axios.interceptors.request.use() 메서드의 파라미터
1. onFulfiled : 요청이 전송되기 전에 실행될 함수를 정의합니다. 이 함수는 요청 설정(config) 객체를 인자로 받고, 수정된 설정 객체를 반환해야 합니다. 2. onRejected : 요청 과정에서 오류가 발생했을 때 실행될 함수입니다. 3. options : AxiosInterceptorOptions 타입의 추가 옵션을 의미합니다.
- API Server로 요청을 수행하기 전에 요청에 대한 인터셉터 기능을 수행합니다. - 첫 번째 파라미터의 함수의 경우는 API Server로 요청을 전달하기 이전에 수행이 됩니다. - 두 번째 파라미터의 함수의 경우는 API Server로 요청을 보내는 중에 발생하는 오류가 발생할 때 수행이 됩니다.
import axios from'axios';
/**
* 요청 이전 처리 방법 : 요청 인터셉터
*/
axios.interceptors.request.use(
// 요청이 전달되기 전에 작업 수행(config) => {
console.log("[+] 요청 전달 이전에 수행이 됩니다. ", config)
return config;
},
// 요청 오류가 있는 작업 수행(error) => {
console.log("[-] 요청 중 오류가 발생되었을때 수행이 됩니다. ", error)
returnPromise.reject(error);
}
);
- API Server로부터 응답을 받은 후, then/catch 핸들러로 결과가 전달되기 이전에 인터셉트를 하는 것을 의미합니다.
💡 axios.interceptors.response.use() 메서드의 파라미터 1. onFulfilled (성공 콜백) - 응답이 성공적으로 수신되었을 때 실행되는 함수입니다. 이 함수는 응답 객체를 인자로 받으며, 필요에 따라 응답을 수정하거나 추가 작업을 수행할 수 있습니다. 수정된 응답 객체를 반환하거나 새로운 응답을 생성할 수 있습니다. 2. onRejected (실패 콜백)
- 응답 수신 중 오류가 발생했을 때 실행되는 함수입니다. 이 함수는 오류 객체를 인자로 받으며, 오류를 처리하거나 추가적인 에러 핸들링 로직을 구현할 수 있습니다. Promise.reject(error)를 반환하여 오류를 다시 던지거나, 새로운 응답을 생성하여 오류를 복구할 수 있습니다. 3. options
- API Server로부터 응답이 들어오는 경우 try/catch가 수행되기 이전에 수행이 되며 이에 대한 인터셉터 기능을 수행합니다.
- 첫 번째 파라미터의 함수의 경우는 API Server로부터 응답이 성공적으로 수신이 되었을 경우 수행이 됩니다. - 두 번째 파라미터의 함수의 경우는 API Server로부터 응답이 실패하였을 경우 수행이 됩니다.
axios.interceptors.response.use(
(response) => {
console.log("[+] 응답이 정상적으로 수행된 경우 수행이 됩니다. ", response)
// 2xx 범위에 있는 상태 코드는 이 함수를 트리거 합니다.// 응답 데이터가 있는 작업 수행return response;
},
(error) => {
console.log("[-] 응답이 실패한 경우 수행이 됩니다. ", error)
// 2xx 외의 범위에 있는 상태 코드는 이 함수를 트리거 합니다.// 응답 오류가 있는 작업 수행returnPromise.reject(error);
}
);
💡실행 결과
- 로그인 과정에서 API Server로 요청 후 응답 값으로 아래와 같이 인터셉터가 됩니다.
- 요청 인터셉터와 응답 인터셉터가 함께 존재하고 있습니다. - 이때에 axios.interceptors.response.eject(responseInterceptor)를 통해서 진행 중인 응답 인터셉터를 수행하지 않도록 구성하였습니다. - 해당 예시에서는 응답에 대한 인터셉터를 수행하지 않도록 지정하였습니다.
- Axios를 사용할 때 커스텀 인스턴스를 생성하여 인터셉터를 적용할 수 있습니다. 이 방법은 서로 다른 설정이 필요한 여러 API 엔드포인트를 다룰 때 유용합니다
💡사용예시
- 아래의 예시와 같이 AxiosCustomInstance라는 컴포넌트를 구성하였습니다. 또한 외부에서 호출이 가능하게 끔 export default AxiosCustomInstance로 지정하였습니다. - 이를 통해서, HTTP 요청과 응답을 중앙에서 관리하고 수정할 수 있으며, 로깅이나 인증 토큰 추가 등의 공통 작업을 쉽게 구현할 수 있습니다.
1. AxiosCustomInstance : Axios 인스턴스를 생성합니다. 이는 기본 URL, 타임아웃, 헤더 등의 설정을 포함하고 있습니다. 2. AxiosCustomInstance.interceptors.request : 요청 인터셉터 추가, 요청이 서버로 전송되기 전에 실행이 됩니다. 3. AxiosCustomInstance.interceptors.response : 응답 인터셉터 추가, 서버로부터 응답을 받은 후 그 응답이 then/catch 핸들러로 전달되기 전에 실행이 됩니다.
import axios from'axios';
/**
* Axios 인스턴스를 생성합니다.
* - 이 인스턴스는 기본 URL, 타임아웃, 헤더 등의 설정을 포함합니다.
*/const AxiosCustomInstance = axios.create({
baseURL: '<http://localhost:8080>',
timeout: 5000,
headers: {
'Content-Type': 'application/json',
'Access-Control-Allow-Credentials': true,
},
});
/**
* 요청 인터셉터 추가
* - 요청이 서버로 전송되기 전에 실행이 됩니다.
*/
AxiosCustomInstance.interceptors.request.use(
(config) => {
console.log('[+] 요청 전달 이전에 수행이 됩니다. ', config);
return config;
},
(error) => {
console.log('[-] 요청 중 오류가 발생되었을때 수행이 됩니다. ', error);
returnPromise.reject(error);
},
);
/**
* 응답 인터셉터 추가
* - 서버로부터 응답을 받은 후, 그 응답이 then/catch 핸들러로 전달되기 전에 실행됩니다.
*/
AxiosCustomInstance.interceptors.response.use(
(response) => {
console.log('[+] 응답이 정상적으로 수행된 경우 수행이 됩니다. ', response);
return response;
},
(error) => {
console.log('[-] 응답이 실패한 경우 수행이 됩니다. ', error);
returnPromise.reject(error);
},
);
exportdefault AxiosCustomInstance;
💡 로그인을 하는 서비스를 구성하였습니다.
- 해당 서비스에서는 ‘로그인’을 수행하는 API 통신을 위한 서비스입니다. - 여기서 위에서 구성한 AxiosCustomInstance를 통해서 API 호출을 수행합니다. 사전에 BaseURL로 http://localhost:8080으로 지정을 했기에, 엔드포인트만 추가하여서 전송합니다.
💡 커스텀 인스턴스에서 특정 API는 인터셉터를 사용하지 않음 : 블랙리스트를 활용 - 블랙리스트 방식은 특정 URL에 대해서만 인터셉터를 수행하지 않도록 설정하는 방법입니다. - 기본적으로 모든 요청에 인터셉터를 적용하되, 블랙리스트에 포함된 URL에 대해서는 인터셉터를 건너뛰게 됩니다. - 이 방식은 대부분의 API 요청에 공통된 처리를 적용하면서, 특정 엔드포인트에 대해서만 예외 처리를 하고 싶을 때 유용합니다.
💡[참고] 화이트리스트와 블랙리스트
특성
화이트리스트
블랙리스트
정의
명시적으로 허용된 항목만 포함
명시적으로 금지된 항목을 제외한 모든 것을 포함
기본 접근
모든 것을 차단하고 특정 항목만 허용
모든 것을 허용하고 특정 항목만 차단
보안성
일반적으로 더 안전함
새로운 위협에 취약할 수 있음
유지보수
허용 목록 관리 필요
차단 목록 관리 필요
유연성
제한적이지만 안전함
더 유연하지만 위험 가능성 있음
인터셉터 적용
리스트에 있는 URL에만 적용
리스트에 없는 모든 URL에 적용
💡 사용예시 -1
- 아래와 같이 AxiosBlackListIntance라는 Axios 인스턴스를 구성하였습니다.
1. BLACK_LIST_URL : 인터셉터 수행을 제외하려는 블랙리스트를 문자열 배열로 구성하였습니다. 2. isNotBlackListed : 블랙리스트에 포함되지 않는 URL인지 확인하는 함수로 구성하였습니다. 3. 이외에는 위에 내용과 동일합니다. 4. if (isNotBlackListed(config.url)): 해당 과정에서 BLACK_LIST 내에 요청 URL이 포함되지 않은 경우만 수행이 됩니다.
import axios from'axios';
// 인터셉터를 이용하지 않을 블랙 리스트를 문자열 배열로 구성합니다.const BLACK_LIST_URL = [
'/api/v1/user/login'
];
// 블랙리스트에 포함되지 않는 URL인지 확인하는 함수const isNotBlackListed = (url?: string) => !BLACK_LIST_URL.some((blackUrl) => url?.includes(blackUrl));
/**
* Axios 인스턴스를 생성합니다.
* - 이 인스턴스는 기본 URL, 타임아웃, 헤더 등의 설정을 포함합니다.
*/const AxiosBlackListIntance = axios.create({
baseURL: 'http://localhost:8080',
timeout: 5000,
headers: {
'Content-Type': 'application/json',
'Access-Control-Allow-Credentials': true,
},
});
/**
* 요청 인터셉터 추가
* - 요청이 서버로 전송되기 전에 실행이 됩니다.
*/
AxiosBlackListIntance.interceptors.request.use(
(config) => {
// 해당 과정에서 BLACK_LIST 내에 요청 URL이 포함되지 않은 경우만 수행이 됩니다.if (isNotBlackListed(config.url)) {
console.log('[+] 요청 전달 이전에 수행이 됩니다. ', config);
}
return config;
},
(error) => {
if (isNotBlackListed(error.config.url)) {
console.log('[-] 요청 전달 실패한 경우 수행이 됩니다. ', error);
}
returnPromise.reject(error);
},
);
/**
* 응답 인터셉터 추가
* - 서버로부터 응답을 받은 후, 그 응답이 then/catch 핸들러로 전달되기 전에 실행됩니다.
*/
AxiosBlackListIntance.interceptors.response.use(
(response) => {
if (isNotBlackListed(response.config.url)) {
console.log('[+] 응답이 정상적으로 수행된 경우 수행이 됩니다. ', response);
}
return response;
},
(error) => {
if (isNotBlackListed(error.config.url)) {
console.log('[-] 응답이 실패한 경우 수행이 됩니다. ', error);
}
returnPromise.reject(error);
},
);
exportdefault AxiosBlackListIntance;
💡사용예시 -2
- LoginService.login() 함수는 AxiosBlackListIntance를 불러와서 사용합니다. - 해당 서비스는 BLACK_LIST_URL에 포함하는 URL입니다.
- 아래와 같이 App.tsx 파일 내에서 useEffect() 내에 Interceptor를 등록하였습니다. - 그러나 이를 수행할 때 여러 번 수행됨이 확인되었습니다.
💡 해결 방법 - 이에 따라서 아래와 같이 useRef로 구분을 짓는 속성을 생성한 뒤, 한 번만 수행되도록 구성합니다.
import React, { useEffect, useRef } from'react';
import { BrowserRouter } from'react-router-dom';
import Layout from'./layout/Layout';
import axios from'axios';
const App = (props: any) => {
const interceptorsRegistered = useRef(false); // Interceptor 등록 속성
useEffect(() => {
// Interceptor 등록 속성 값이 false 인 경우 if (!interceptorsRegistered.current) {
axiosInterceptorHandler.regist(); // 인터셉터 등록
interceptorsRegistered.current = true; // 인터셉터 속성 변경
}
}, []);
/**
* Axios의 Interceptor를 구성합니다.
*/const axiosInterceptorHandler = (() => {
return {
regist: () => {
/**
* - 요청 이전 처리 방법 : 요청 인터셉터
*/
axios.interceptors.request.use(
// 요청이 전달되기 전에 작업 수행(config) => {
console.log("[+] 요청 전달 이전에 수행이 됩니다. ", config)
return config;
},
// 요청 오류가 있는 작업 수행(error) => {
console.log("[-] 요청 중 오류가 발생되었을때 수행이 됩니다. ", error)
returnPromise.reject(error);
}
);
/**
* - 응답 후 처리 방법 : 응답 인터셉터
*/
axios.interceptors.response.use(
(response) => {
console.log("[+] 응답이 정상적으로 수행된 경우 수행이 됩니다. ", response)
// 2xx 범위에 있는 상태 코드는 이 함수를 트리거 합니다.// 응답 데이터가 있는 작업 수행return response;
},
(error) => {
console.log("[-] 응답이 실패한 경우 수행이 됩니다. ", error)
// 2xx 외의 범위에 있는 상태 코드는 이 함수를 트리거 합니다.// 응답 오류가 있는 작업 수행returnPromise.reject(error);
}
);
}
}
})();
return (
<BrowserRouterbasename={props.basename}><Layout {...props} /></BrowserRouter>
);
};
exportdefault App;
