데이터 전송 fetch와 Axiox 비교

 

브라우저 환경에서 HTTP 요청을 보내기 위해 사용되는 라이브러리로, fetch 또는 Axios가 사용된다. 

 

 

| fetch API

fetch는 브라우저 내장 API로, 최신 브라우저에서 기본적으로 제공된다. ES6 Promise 기반으로 동작하며, 간단한 요청에는 매우 유용하다.

 

장점

- 내장 API로 별도의 라이브러리르 설치하지 않아도 된다.

- 간단한 요청을 작성할 때 간결하게 사용할 수 있다.

 

단점

- 기본 기능만 제공하고 오류 처리가 불편하다.

- HTTP 에러가 reject되지 않고 resolve되기 때문에, 명시적으로 에러를 체크해야 한다.

- 응답 데이터를 JSON으로 변환하려면 .json() 메서드를 별도로 호출해야 한다.

 

fetch 예 >

fetch('/api/data', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json',
  },
  body: JSON.stringify(data),
})
  .then(response => {
    if (!response.ok) {
      throw new Error('Network response was not ok');
    }
    return response.json();
  })
  .then(data => console.log(data))
  .catch(error => console.error('Error:', error));

 

 

| Axios

Axios는 HTTP 요청을 보내기 위해 만들어진 인기 있는 오픈 소스 라이브러리로, 브라우저 환경과 Node.js 환경에서 모두 사용할 수 있다.

 

장점
- 기본적인 요청 외에도 여러 유용한 기능(요청 취소, 인터셉터, 자동 JSON 변환 등)을 제공한다.
- 간편한 오류 처리 : HTTP 에러를 자동으로 reject하여 .catch에서 처리할 수 있다.
- 응답 데이터 자동 변환 : JSON 응답을 자동으로 변환한다.
- 인터셉터 : 요청 또는 응답을 가로채고 조작할 수 있다.

 

단점
- 외부 라이브러리 : 별도로 설치해야 한다 (npm install axios).
- 파일 크기 : fetch보다 파일 크기가 크다.

 

axios 예 >

import axios from 'axios';

axios.post('/api/data', data, {
  headers: {
    'Content-Type': 'application/json',
  },
})
  .then(response => console.log(response.data))
  .catch(error => console.error('Error:', error));

 

 

Axios는 async/await 문법을 사용하여 비동기 요청을 더욱 깔끔하게 작성할 수 있다.

import axios from 'axios';

async function fetchData() {
  try {
    const response = await axios.get('https://api.example.com/data');
    console.log(response.data);
  } catch (error) {
    console.error('Error:', error);
  }
}

fetchData();

 

 

간단한 프로젝트에서는 fetch가 충분할 수 있지만, 복잡한 기능을 요구하는 프로젝트에서는 Axios가 더 적합하다.