Fetch v.s. Axios : 왜 Axios를 사용하는가?

배경

사내 프로젝트를 개발하면서 React를 사용해서 페이지를 구현하는 과정 중에 서버와의 통신을 어떻게 하면 잘 할 수 있을지 그리고 어떤 걸 사용해야 현재 상황에 맞게 잘 사용하는 것인지 궁금해져서 정리해보기로 하였습니다.

 

 

---

 

 

Fetch란?

특징

• 브라우저에 내장된 JavaScript API
• Promise를 기반으로한 비동기 요청 처리에 유용

사용 예시

fetch('https://api.example.com/data')
  .then(response => {
    if (!response.ok) {
      throw new Error('Network response was not ok ' + response.statusText);
    }
    return response.json();
  })
  .then(data => console.log(data))
  .catch(error => console.error('There was a problem with your fetch operation:', error));

 

 

Axios란?

특징

• JavaScript 라이브러리
• 응답 데이터를 자동으로 JSON으로 변환하여 반환
• 요청 시간 초과 설정 가능
• 브라우저 이외에 Node.js 환경에서 사용 가능

사용 예시

import axios from 'axios';

axios.get('https://api.example.com/data')
  .then(response => {
    console.log(response.data);
  })
  .catch(error => {
    console.error('There was an error!', error);
  });

 

 

---

 

 

위에서 기본적인 특징과 사용방법에 대해 살펴보았는데, 단순히 비교해보았을 떄 axios가 코드를 작성하기, 그리고 이해하기 쉽다고 느껴집니다. 좀더 Axios의 장점에 대해 알아보겠습니다.

 

 

---

 

 

Axios를 왜 사용해야 하는가?

1. 복잡한 요청 및 응답 처리

요청 헤더를 설정하고, 타임 아웃을 설정하며, 요청 전에 인터셉터를 사용해 특정 작업을 수행해야 하는 상황을 가정해보겠습니다.

fetch 예시

fetch('https://api.example.com/data', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json',
    'Authorization': 'Bearer your-token-here'
  },
  body: JSON.stringify({ key: 'value' })
})
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(error => console.error('Error:', error));

axios 예시

import axios from 'axios';

const instance = axios.create({
  baseURL: 'https://api.example.com',
  timeout: 1000,
  headers: { 'Authorization': 'Bearer your-token-here' }
});

instance.interceptors.request.use(config => {
  // 요청을 보내기 전에 수행할 작업
  console.log('Request was sent');
  return config;
}, error => {
  // 요청 오류가 있는 경우 수행할 작업
  return Promise.reject(error);
});

instance.post('/data', {
  key: 'value'
})
  .then(response => {
    console.log(response.data);
  })
  .catch(error => {
    console.error('There was an error!', error);
  });

axios의 경우, 인터셉터를 통해 요청 전이나 응답 후에 특정 작업을 수행할 수 있어 코드의 모듈화 및 유지보수성이 향상됩니다.

 

2. 응답 데이터 처리

간단하게 fetch의 응답 데이터는 JSON으로 변환하는 추가 작업이 필요하지만, axios는 이를 자동으로 처리합니다.

fetch 예시

fetch('https://api.example.com/data')
  .then(response => response.json())
  .then(data => {
    console.log(data);
  })
  .catch(error => {
    console.error('Error:', error);
  });

axios 예시

import axios from 'axios';

axios.get('https://api.example.com/data')
  .then(response => {
    console.log(response.data);
  })
  .catch(error => {
    console.error('There was an error!', error);
  });

 

 

---

 

 

결론

Axios는 다음과 같은 이유로 Fetch보다 유리합니다.

1. 자동 JSON 변환

2. 요청 전후 추가 작업 수행 가능

3. 간결하고 이해하기 쉬운 구문

4. 타임아웃 설정 가능

5. 브라우저 외에 Node.js 환경에서도 사용 가능