[Vue] Axios vs Fetch API : 어떤 것을 선택해야 할까?

Axios vs Fetch API : 어떤 것을 선택해야 할까?

Axios와 Fetch API는 네트워크 요청을 보내고 응답을 처리하는 데 사용됩니다.

각각의 장단점과 사용 사례를 고려하여 어떤 것을 선택해야 하는지 살펴보겠습니다.

 

 

 

▼ Axios

 

장점 :

1. 간단하고 직관적인 API를 제공하여 요청을 보내고 응답을 처리하기 쉽습니다.

2. 다양한 기능을 제공하며, 요청 및 응답의 인터셉터, 자동 JSON 파싱 등이 있습니다.

3. 브라우저 및 Node.js 환경에서 모두 사용할 수 있습니다.

 

단점:

1. 추가적인 번들 크기를 가질 수 있으며, 특히 브라우저에서는 성능 이슈로 이어질 수 있습니다.

2. 별도의 라이브러리이므로 프로젝트에 추가적인 의존성을 추가해야 합니다.

 

[예제 코드]

import axios from 'axios';

axios.get('/api/data')
  .then(response => {
    console.log(response.data);
  })
  .catch(error => {
    console.error(error);
  });

 

 

 

 

▼ Fetch API

 

장점:

1. 브라우저에 내장되어 있으므로 별도의 라이브러리를 추가할 필요가 없습니다.

2. Promise 기반의 모던한 API를 제공합니다.

3. 대부분의 최신 브라우저에서 지원되며, 구형 브라우저에서도 Polyfill을 사용하여 지원할 수 있습니다.

 

단점:

1. Axios 보다 기능이 부족하며, 요청 및 응답의 인터셉터, 쿠키 처리 등의 기능이 제공되지 않습니다.

2. 좀 더 복잡한 요청을 처리하기 위해서는 추가적인 작업이 필요할 수 있습니다.

 

[예제코드]

fetch('/api/data', {
    method: 'post',                          // POST 메서드를 사용하여 요청을 전송합니다.
    body: JSON.stringify(this.testVO),       // 요청 본문에 JSON 데이터를 문자열로 변환하여 추가합니다.
    headers: {
        'Content-Type': 'application/json'   // 요청 헤더에 JSON 형식임을 명시합니다.
    }
})
.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('There was a problem with your fetch operation', error);
});

 

 

 

 

상황별 어떤 것을 선택해야 할까?

 

▶ 간단한 요청 

: 간단한 GET 요청을 처리해야 할 때는 Fetch API를 사용하는 것이 좋습니다.

▶ 기능 풍부한 요청

: 요청과 응답에 대한 추가적인 제어가 필요하거나,

CSRF 보호와 같은 보안 기능을 고려해야 할 때는 Axios를 사용하는 것이 유용합니다.

▶ 브라우저 호환성

: 모든 브라우저에서 호환성을 유치해야 하는 경우 Fetch API를 사용할 수 있지만,

구형 브라우저에서도 지원해야 하는 경우에는 Axios를 고려해야 합니다.

 

 

 

Axios는 일반적으로 요청과 응답을 다루는 데 더 많은 기능과 편의성을 제공하지만,

추가적인 의존성과 번들 크기를 고려해야 합니다.

Fetch API는 가벼우며 브라우저에 내장되어 있어 별도의 라이브러리 추가가 필요하지 않지만, 기능이 제한적일 수 있습니다. 요구사항과 프로젝트의 환경에 따라 적합한 라이브러리를 선택하면 됩니다.