개발자 박가나
[241122 TIL] 본캠프 38일차 본문
Fetch
네트워크 요청을 보내는데 사용되는 브라우저 내장 함수로서, Promise 기반으로 동작을 하며 브라우저가 제공하는 표준 API이다.
- 내장 API이기 때문에 추가 설치 불필요
- Promise 기반이기 때문에 비동기 처리를 지원
- 응답 데이터를 response.json( ) 또는 response.text( )로 한 번 더 변환해야 함
- 헤더, 바디, 메서드 등을 쉽게 설정 가능
HTTP 응답 상태 확인
네트워크 요청의 성공 여부만을 기준으로 Promise를 resolve 또는 reject한다.
- 요청이 네트워크적으로 성공한 경우, 404나 500 등의 에러가 발생을 했더라도 resolve 처리
- 네트워크 장애 또는 요청 자체가 실패한 경우 reject 처리
응답 본문 처리
본문 데이터는 비동기 스트림 형태로 제공된다.
- JSON 데이터의 경우, response.json( )으로 변환
- 텍스트 데이터의 경우, response.text( )로 변환
- Blob, FormData와 같은 형식으로도 변환 가능
fetch('https://jsonplaceholder.typicode.com/posts')
.then((response) => response.json())
.then((data) => console.log(data))
.catch((error) => console.error('Error:', error));
Axios
fetch의 단점을 보완한 HTTP 클라이언트 라이브러리로서, Promise 기반으로 동작을 하며 브라우저와 Node.js 환경 모두에서 사용 가능하다.
- 404, 500 등 HTTP 에러 발생 시 자동으로 catch 블록으로 이동
- 응답 데이터를 자동으로 JSON 형태로 변환
- 요청 및 응답 전에 로직 추가 및 데이터 수정 가능
- 네트워크 요청 취소 가능
- baseURL, headers 등 반복적인 설정을 한 곳에서 정리 가능
import axios from 'axios';
axios.get('https://jsonplaceholder.typicode.com/posts')
.then((response) => console.log(response.data))
.catch((error) => console.error('Error:', error));
AxiosInstance
Axios를 커스터마이징한 객체로서, 반복적으로 설정해야 하는 요청 구성을 한 곳에서 관리할 수 있도록 도와준다.
- baseURL, headers 등 모든 요청에 동일하게 적용되는 설정을 한 번에 관리
- 유지보수성 향상
- 코드 가독성 개선
import axios from 'axios';
const axiosInstance = axios.create({
baseURL: 'https://jsonplaceholder.typicode.com',
timeout: 5000,
headers: { 'Content-Type': 'application/json' },
});
export default axiosInstance;
Interceptor
Axios에서 제공하는 기능으로서, 요청 및 응답이 처리되기 전후에 특정 작업을 수행할 수 있도록 도와준다.
AxiosInstance와 결합해서 사용되며, API 호출의 공통 작업을 한 곳에서 처리한다.
Request Interceptor
요청 전에 데이터 수정 및 추가 작업을 수행한다.
axiosInstance.interceptors.request.use(
(config) => {
const token = localStorage.getItem('authToken');
if (token) config.headers.Authorization = `Bearer ${token}`;
return config;
},
(error) => Promise.reject(error)
);
axiosInstance.interceptors.request.use(
(config) => {
config.params = { ...config.params, api_key: import.meta.env.VITE_TMDB_KEY };
return config;
},
(error) => Promise.reject(error)
);
Response Interceptor
응답 데이터 전처리 및 에러 로깅을 수행한다.
axiosInstance.interceptors.response.use(
(response) => {
if (response.data?.result) return response.data.result;
return response.data;
},
(error) => Promise.reject(error)
);
axiosInstance.interceptors.response.use(
(response) => response,
(error) => {
if (error.response?.status === 401) {
alert('Authentication failed. Please log in again.');
} else if (error.response?.status === 404) {
naviagte.push('/not-found')
console.error('Resource not found.');
} else {
console.error('An unexpected error occurred:', error.message);
}
return Promise.reject(error);
}
);
'내일배움캠프' 카테고리의 다른 글
[241126 TIL] 본캠프 40일차 ('MBTI' 프로젝트 기능 구현) (0) | 2024.11.26 |
---|---|
[241125 TIL] 본캠프 39일차 ('MBTI' 프로젝트 기능 구현) (0) | 2024.11.25 |
[241121 TIL] 본캠프 37일차 (0) | 2024.11.21 |
[241120 TIL] 본캠프 36일차 ('뉴스피드' 프로젝트 4일차) (1) | 2024.11.20 |
[241119 TIL] 본캠프 35일차 ('뉴스피드' 프로젝트 3일차) (1) | 2024.11.19 |