참고
Axios
NOTE
Axios는 Node.js와 브라우저를 위한 Promise기반 HTTP 비동기 통신 라이브러리다!
npm install axios
JavaScript
복사
설치 코드
•
비동기로 HTTP 통신을 가능하게 해주고, REST API에 데이터를 요청할 때, promise객체로 return해주기 때문에 response 데이터를 다루기도 쉽다.
•
JS에서 기본적으로 제공해주는 Fetch보다 사용하기 쉽다.
const instance = axios.create({
baseURL: '기본주소', // 모든 요청에 대한 기본 URL
timeout: 5000, // 요청 타임아웃 시간 (밀리초)
headers: { // 모든 요청에 대한 기본 헤더
'Content-Type': 'application/json',
'Accept': 'application/json',
},
withCredentials: true, // 쿠키를 전송할지 여부 (CORS 요청 시)
responseType: 'json', // 서버로부터 응답 받을 데이터 형식
responseEncoding: 'utf8', // 응답 인코딩 타입
validateStatus: function (status) { // 응답 상태 코드가 유효한지 확인하는 함수
return status >= 200 && status < 300; // 기본적으로 2xx 상태 코드를 성공으로 간주
},
});
export default instance;
JavaScript
복사
axios 인스턴스 생성
axios.defaults
.baseURL = 'https://api.example.com';
axios.defaults
.headers.common['Authorization'] = AUTH_TOKEN;
axios.defaults
.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';
JavaScript
복사
전역 값으로 넣어줄수도 있다.
요청 Config / 응답 스키마
NOTE
Axios는 HTTP 요청을 쉽게 만들어주는 라이브러리이므로, 요청및 응답값을 처리해주는 다양한 설정과 스키마를 제공한다!
요청 설정
{
// 필수값
url: 주소값
// 이외값들은 모두 선택값이다.
method: [HTTP 메소드]
baseURL: [url앞에 붙는 주소]
headers: [사용자 지정 헤더]
timeout: [요청 초과시간]
// ...
}
JavaScript
복사
axios.get('http://your-api-url.com/user', // Get 예시
{
params: {
ID: '12345' // ID:12345 파라미터
},
timeout: 5000, // 5초 타임아웃
})
axios.post('http://your-api-url.com/user', { // Post 예시
firstName: 'Jane',
lastName: 'Doe'
},
{
headers: {
'Content-Type': 'application/json', // 요청 본문의 타입 지정
'Authorization': 'Bearer your-token-here' // 인증 토큰 (예시)
},
timeout: 5000, // 5초 타임아웃
})
JavaScript
복사
사용 예시
{
data: 서버응답 데이터 // 응답 데이터(가장 많이씀)
status: [상태코드] // 예외처리에 자주 사용됨
statusText: [상태 메시지]
headers: [헤더값]
// ...
}
JavaScript
복사
async function fetchUserData() {
try {
const response = await axios.get('/user?ID=12345');
console.log(response.data); // 응답 데이터
console.log(response.status); // HTTP 상태 코드
console.log(response.statusText); // 상태 메시지
console.log(response.headers); // 응답 헤더
console.log(response.config); // 요청 config
} catch (error) {
console.error('Error:', error);
}
}
// 함수 호출
fetchUserData();
JavaScript
복사
사용 예시
Axios API (HTTP Method)
NOTE
Get - 데이터 조회
axios.get(url, [config]) // 기본형태
axios.get('/user?ID=12345') // 사용예시
.then(function (response){ // 성공 핸들링
console.log(response); // response에는 data, status, headers등의 값이 있음
})
.catch(function (error) { // 에러 핸들링
console.log(error);
})
.then(function() { // 항상 실행
console.log("then");
})
JavaScript
복사
Post - 데이터 등록
axios.post("url주소",{ // 기본형태
data객체
},[,config])
axios.post('/user', {
firstName: 'Fred',
lastName: 'Flintstone'
})
.then(function (response) {
console.log(response);
})
.catch(function (error) {
console.log(error);
});
JavaScript
복사
Put - 데이터 수정
axios.put(url[, data[, config]])
axios.patch(`/user/1`, {
name: '개발이 취미인 사람'
})
//성공시 then 실행
.then(function (response) {
console.log(response);
})
//실패 시 catch 실행
.catch(function (error) {
console.log(error);
});
JavaScript
복사
Delete - 데이터 삭제
axios.delete(url,[,config]);
axios.delete('/user/1',{
params: {
user_id: 1
}
})
//성공시 then 실행
.then(function (response) {
console.log(response);
})
//실패 시 catch 실행
.catch(function (error) {
console.log(error);
});
JavaScript
복사
인터셉터
NOTE
Axios 인터셉터는 Axios의 return이 Promise인 점을 이용하여 then, catch로 처리되기 이전에 부가적인 작업을 할 수 있게해주는 기술이다.
const axiosApi = (url: string, options: AxiosRequestConfig = {}) => {
const instance = axios.create({baseURL: url, ...options, withCredentials: true})
instance.interceptors.request // 요청 인터셉터
.use(onRequest, onErrorRequest);
instance.interceptors.response // 응답 인터셉터
.use(onResponse, onErrorResponse);
return instance
};
JavaScript
복사
Request Interceptors
http request가 서버에 전달되기 전에 호출된다.
const onRequest = ( // request요청시 config 객체를 받아와서 처리
config: AxiosRequestConfig): Promise<InternalAxiosRequestConfig> => {{
//.. 내부구현
return Promise.resolve({ ...config, headers } as InternalAxiosRequestConfig );
}
const onErrorRequest = ( // request 요청 시 발생하는 에러를 처리하는 함수
error: AxiosError<AxiosRequestConfig> ) => {{
//.. 내부구현
return Promise.reject(error);
}
JavaScript
복사
•
request config 수정하기
•
헤더 추가(수정)
•
인증 관련 작업(토큰 추가)
•
로깅
Response Interceptor
server로 부터 response를 받은 후에 호출된다.
const onResponse = ( // 응답이 성공적으로 수신되었을 때 호출되는 함수
response: AxiosResponse): AxiosResponse => {
//.. 내부구현
return response;
};
const onErrorResponse = ( // 응답이 실패한 API요청에 대한 로깅 및 에러코드 처리함수
error: AxiosError | Error) => {
//.. 내부구현
return Promise.reject(error);
};
JavaScript
복사
•
response data를 가공 및 수정하기
•
에러 핸들링
•
로깅