y.developer
[TIL] Day 44 axios, fetch 그리고 instance, interceptors 본문
2023.12.05 화
1. fetch와 axios
- HTTP 요청을 처리하기 위한 도구
- fetch와 axios는 모두 HTTP 요청을 처리하기 위한 JavaScript 라이브러리이다.
- GET, POST, PUT, PATCH, DELETE
2. React에서 axios를 fetch보다 선호하는 이유
- 자동 JSON 변환
axios는 응답을 자동으로 JSON으로 변환한다.
반면, fetch를 사용할 때는 응답을 JSON으로 수동 변환해야 한다.
- 요청 취소
axios는 요청 취소 기능을 제공한다. 이는 특정 조건 하에서 API 호출을 중단할 수 있게 해준다.
fetch는 기본적으로 이 기능을 제공하지 않는다.
- 타임아웃 설정
axios를 사용하면 요청에 대한 타임아웃을 설정할 수 있다. 이는 서버 응답이 너무 오래 걸릴 때 유용하다.
fetch는 기본적으로 이 기능을 제공하지 않는다.
- 에러 처리
axios는 네트워크 오류가 발생했거나 서버가 2xx 범위가 아닌 상태 코드를 반환했을 때 에러를 발생시킨다.
fetch는 네트워크 오류 시에만 예외를 발생시키고, HTTP 오류 상태에 대해서는 예외를 발생시키지 않는다.
- 인터셉터
axios는 요청과 응답을 인터셉트할 수 있는 기능을 제공한다. 이를 통해 전역적으로 요청 또는 응답을 처리하거나 수정할 수 있다.
3. 하지만 꼭 axios만이 유일한 정답이라고 할 수는 없다.
물론 이러한 장점에도 불구하고,
fetch는 더 가볍고 브라우저에 내장된 기능을 사용하기 때문에 간단한 요청에는 더 적합할 수 있다.
프로젝트의 요구 사항과 개발 환경에 따라 더 적합한 도구를 선택하는 것이 중요하다.
4. 심화 기술로 가장 기억해야 할 내용 2개 ⇒ instance, interceptors
- 인스턴스 instance
프로그래밍 세계에서 instance는 보통 객체를 의미하곤 한다.
key, value를 지정할 수 있는 객체의 특징 때문인지 정말 많은 경우 데이터는 객체 형태로 주고받는다.
또한 주요 라이브러리 등도 객체 형태로 우리가 선언 또는 import 후 사용한다.
특히 axios에서 instance는 단순히 해당 코드로 가져온 객체일 뿐이다.
import axios from 'axios';이를 우리의 입맛대로 가공한 custom instance를 사용하면 반복적인 코드를 작성할 필요 없이 편한 것이다.
아래 코드가 여러 군데에서 사용된다고 하면 너무 많은 줄을 작성해야 한다.
/** 많은 코드 계속 작성 */
const handle01ButtonClick = async () => {
axios.get('https://api.example.com/data/sample01', {
timeout: 1000 // 1000ms 후에 타임아웃
})
.then(response => {
console.log(response);
})
.catch(error => {
console.log('Timeout or other error:', error);
});
}
const handle01ButtonClick = async () => {
axios.get('https://api.example.com/data/sample02', {
timeout: 1000 // 1000ms 후에 타임아웃
})
.then(response => {
console.log(response);
})
.catch(error => {
console.log('Timeout or other error:', error);
});
}하지만, custom instance를 사용하게 된다면
import axios from 'axios';
// 공통 설정을 가진 Axios 인스턴스 생성
const apiInstance = axios.create({
baseURL: 'https://api.example.com/data/',
timeout: 1000, // 모든 요청에 대해 1000ms 후 타임아웃
});
// 간결화된 핸들러 함수
const handleButtonClick = async (sampleNumber) => {
try {
const response = await apiInstance.get(`sample0${sampleNumber}`);
console.log(response);
} catch (error) {
console.log('Timeout or other error:', error);
}
}
// 사용 예시
// handleButtonClick(1); // 첫 번째 버튼 클릭
// handleButtonClick(2); // 두 번째 버튼 클릭
- 인터셉터 interceptors
위에서 만든 axios instance를 interceptors를 사용할 수도 있다.
프로그래밍 세계에서 ‘인터셉터’는 보통 아래 그림을 의미한다.
코드로 살펴보자면, 이렇게 된다.
import axios from 'axios';
// Axios 인스턴스 생성
const api = axios.create({
baseURL: 'https://api.example.com'
});
// 요청 인터셉터 추가
api.interceptors.request.use(
config => {
// 요청을 보내기 전에 수행할 작업
console.log('Request sent at:', new Date().toISOString());
// 예: 인증 토큰이 필요한 경우 헤더에 추가
const token = localStorage.getItem('authToken');
if (token) {
config.headers.Authorization = `Bearer ${token}`;
}
return config;
},
error => {
// 요청 오류 처리
console.log('Request error:', error);
return Promise.reject(error);
}
);
// 응답 인터셉터 추가
api.interceptors.response.use(
response => {
// 응답 데이터를 가공
console.log('Response received at:', new Date().toISOString());
return response;
},
error => {
// 응답 오류 처리
if (error.response && error.response.status === 401) {
console.log('Unauthorized access:', error);
// 예: 로그인 페이지로 리디렉트
}
return Promise.reject(error);
}
);
export default api;
하루를 마치며
axios가 더 편하고 범용적으로 사용된다는 것은 알았지만, 이렇게 디테일한 차이점이 있는지 몰랐다. axios가 장점이 많지만 그렇다고 해서 fetch 무조건 안 좋다는 것도 아니라는 사실. fetch가 사용하기에 더 가볍고 브라우저에 내장된 기능이기 때문에 간단한 요청을 할 때는 axios처럼 별도의 설치 없이 사용할 수 있다는 점도 알게 되었다.
동일한 코드의 반복을 최대한 줄일 수 있게 해주는 istance와 interceptors를 통해서 효율적인 코드를 작성할 수 있을 것이다. 비동기 데이터를 마음대로 다루고 요청과 응답을 자유자재로 할 수 있도록 공부해야겠다.
오늘의 한 줄
장단점은 늘 공존한다.
단점을 받아들이고 장점을 극대화하자