내일배움캠프 React_7기 TIL - 32. Fetch vs Axios & AxiosInstance

선·2024년 11월 25일

내일배움캠프_React_7기_TIL

목록 보기

32/40

Fetch

fetch란 브라우저 내장 함수로, 네트워크 요청을 보내는데 사용된다
Promise 기반으로 동작하며, 브라우저가 제공하는 표준 API이다.

"Promise 기반으로 동작한다?" fetch는 항상 Promise 객체를 반환한다. 이 Prmoise의 상태에 따라 성공 또는 실패한 결과를 제공.

fetch의 특징

내장 API이기 때문에 추가 설치 없이 즉시 사용이 가능
비동기 처리를 지원하여 then, catch, async/await 문법 사용 가능
응답 데이터를 response.json() 또는 .text()로 변환 필요
요청 헤더, 메소드, 바디 등을 쉽게 설정할 수 있음

fetch의 응답 처리 흐름

fetch는 네트워크 요청을 보냈을 때, 요청 자체가 성공했는지만을 기준으로 Promise의 결과를 결정한다.

resolve : 요청이 성공했다면, HTTP상태 코드가 404든 500이든 Promise의 결과는 resolve가 된다. 대신 응답 객체의 response.ok 속성이 false로 설정된다.
reject : 네트워크 장애(인터넷 연결 문제 등)나 요청 자체가 실패한 경우에만 Promise의 결과가 reject가 된다.
즉, 요청의 상태와 HTTP 응답 상태의 에러 핸들링은 각각 처리해줘야 한다.

응답 본문 처리

fetch의 응답 객체(response)는 메타데이터(상태코드, 헤더 등)와 응답 데이터를 포함하지만, 본문은 비동기 스트림 형태로 제공되기 때문에, json 또는 text데이터로 변환하는 과정이 필요하다.

비동기 스트림 ?
비동기 스트림이란 데이터를 조금씩 나눠서 처리할 수 있도록 설계된 방식이다.
데이터를 한번에 모두 받는 대신, 데이터가 준비되는 대로 부분적으로 처리할 수 있게 해준다.

이렇게 설계된 이유는, 데이터를 한꺼번에 처리하지 않고 부분적으로 처리할 수 있게 하여 메모리를 절약하여 대용량 데이터를 더 효율적으로 다룰 수 있고, 필요할 때만 본문 데이터를 읽어 효율성을 높이기 위해서이다.

Axios

Fetch의 단점(fetch응답과 http응답 따로 처리)을 보완한 HTTP 클라이언트 라이브러리이다.
Promise 기반으로 동작하며, 브라우저와 Node.js 환경 모두 사용 가능

Axios 특징

자동 HTTP 상태 처리
- HTTP 에러(예: 404, 500)가 발생하면 자동으로 catch 블록으로 이동.
자동 JSON 변환
- 응답 데이터를 추가 처리 없이 바로 사용 가능.
요청/응답 인터셉터
- 요청이나 응답 전에 로직을 추가하거나 데이터를 수정 가능.
CancelToken 지원
- 네트워크 요청을 취소하는 기능 제공.
기본 설정 관리
- baseURL, headers 등 반복적인 설정을 한 곳에서 관리 가능.
Axios의 특징
자동 HTTP 상태 처리
- HTTP 에러(예: 404, 500)가 발생하면 자동으로 catch 블록으로 이동.
자동 JSON 변환
- 응답 데이터를 추가 처리 없이 바로 사용 가능.
요청/응답 인터셉터
- 요청이나 응답 전에 로직을 추가하거나 데이터를 수정 가능.
CancelToken 지원
- 네트워크 요청을 취소하는 기능 제공.
기본 설정 관리
- baseURL, headers 등 반복적인 설정을 한 곳에서 관리 가능.

Axios의 응답 처리 흐름

Fetch와 달리 Axios는 한 번의 요청으로 HTTP 상태 확인과 데이터 변환(JSON 변환)을 모두 처리한다.

Fetch vs Axios: 코드 비교

Fetch로 응답 처리

fetch('https://jsonplaceholder.typicode.com/posts')
  .then((response) => {
    if (!response.ok) { 
      throw new Error('HTTP Error');
    }
    return response.json(); // 전체 응답 객체
  })
  .then((data) => console.log(data))
  .catch((error) => console.error('Error:', error)); // JSON 데이터

Axios로 응답 처리

axios.get('https://jsonplaceholder.typicode.com/posts')
  .then((response) => console.log(response.data)) // 상태 확인과 데이터 변환을 동시에 처리
  .catch((error) => console.error('Error:', error));

AxiosInstance

AxiosInstance는 Axios를 커스터마이징한 객체로, 반복 설정(예: baseURL, headers, timeout)을 한 곳에서 관리할 수 있게 도와줌.

AxiosInstance의 필요성

반복 설정 제거
- baseURL, headers, params 등 공통 설정을 한 번에 관리.
유지보수성 향상
- 설정 변경 시, 모든 요청에 자동 반영.
코드 가독성 개선
- API 요청 함수가 간결해지고 주요 로직에 집중 가능.

AxiosInstance 생성


import axios from 'axios';

const axiosInstance = axios.create({
  baseURL: 'https://jsonplaceholder.typicode.com', // 기본 URL
  timeout: 5000, // 요청 제한 시간 (ms)
  headers: { 'Content-Type': 'application/json' }, // 공통 헤더
});

export default axiosInstance;

baseURL: 모든 요청의 기본 경로.
timeout: 요청 제한 시간 초과 시 실패.
headers: 공통 요청 헤더.

AxiosInstance를 사용한 API 호출

javascript
코드 복사
import axiosInstance from './axiosInstance';

// 인기 영화 가져오기 (GET 요청)
export const fetchPopularMovies = async () => {
  const response = await axiosInstance.get('/movie/popular', {
    params: { api_key: import.meta.env.VITE_TMDB_KEY },
  });
  return response.data.results;
};

// 리뷰 작성하기 (POST 요청)
export const createReview = async (movieId, review) => {
  const response = await axiosInstance.post(`/movie/${movieId}/reviews`, review);
  return response.data;
};

개선점
1. 모든 요청에서 반복적으로 설정하던 baseURL과 headers가 제거됨.
2. 요청 URL과 주요 로직만 작성하여 코드가 간결해짐.

Interceptor

Interceptor의 개념

Axios에서 제공하는 기능으로, 요청(Request)이나 응답(Response)이 처리되기 전/후에 작업을 추가할 수 있음.
AxiosInstance와 결합하여 API 호출 시 반복 작업을 한 곳에서 처리.

Interceptor의 역할

요청(Request) Interceptor
- 요청 전에 데이터 수정이나 추가 작업 수행.
- 예: 인증 토큰 추가, 공통 파라미터 설정.
응답(Response) Interceptor
- 응답 데이터를 전처리하거나 에러 로깅 수행.
- 예: 서버 응답 데이터를 클라이언트 포맷으로 변환, 상태 코드별 에러 처리.

Interceptor의 장점

코드 중복 제거:
- 모든 요청/응답에 공통 작업을 처리하여 유지보수성을 향상.
효율적인 에러 관리:
- 에러 처리를 중앙화하여 코드 가독성 향상.
비즈니스 로직 분리:
- API 호출 로직에서 공통 작업 제거.

Interceptor의 한계

요청별 맞춤 처리 부족:
- Interceptor는 전역 작업에 적합하며, 요청별 세부 로직은 try-catch로 처리해야 함.
디버깅 복잡성:
- 모든 요청/응답에 관여하므로 예기치 못한 동작이 발생할 경우 디버깅이 어려울 수 있음.

선

내배캠 React_7기 이수중

이전 포스트

내일배움캠프 React_7기 TIL - 31. Promise.all

다음 포스트

내일배움캠프 React_7기 TIL - 32. Fetch vs Axios & AxiosInstance