[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);
  }
);