fetch와 axios

 

axois와 fetch 모두 HTTP 요청을 보내는 데 사용되는 도구이다. axios는 fetch보다 편리한 API와 기능을 제공하며, 프로미스 기반으로 비동기 작업을 처리하는 데 있어서 더 직관적이고 편리한 방법을 제공한다.

✅ axios

• Node.js, 브라우저를 위한 Promise API를 활용하는 HTTP 통신 라이브러리
• 비동기로 HTTP 통신을 할 수 있으며 return을 promise 객체로 해주기 때문에 response 데이터를 다루기 쉽다.
• HTTP 요청 취소 및 요청과 응답을 JSON 형태로 자동 변환해준다.

[장점]

1. response timeout 처리 방법이 존재한다.
   • 요청을 중도 취소, 응답시간 초과 설정 등의 기능
2. Promise 기반으로 만들어졌기 때문에 데이터 다루기 편리하다.
3. 크로스 브라우징 최적화로 브라우저 호환성이 뛰어나다. (구형 브라우저 지원)
4. JSON 데이터를 자동 변환해준다.
5. Error 발생 시 reject로 response를 전달해 catch로 잡아낼 수 있다.

[단점]

1. 사용을 위해 모듈 설치가 필요하다. npm install axios

 

✅ fetch

• ES6부터 들어온 JavaScript 내장 라이브러리
• Promise 기반으로 만들어졌기 때문에 데이터를 다루기 편하다.
• 내장 라이브러리이기 때문에 업데이트에 따른 에러 방지가 가능하다.

[장점]

1. 자바스크립트의 내장 라이브러리 이므로 별도로 import 할 필요가 없다.
2. Promise 기반으로 만들어졌기 때문에 데이터 다루기 편리하다.
3. 내장 라이브러리이기 때문에 업데이트에 따른 에러 방지가 가능하다.

[단점]

1. 지원하지 않는 브라우저가 존재 (IE11..)
2. 네트워크 에러 발생 시 response timeout이 없어 기다려야 한다.
3. JSON으로 변환해주는 과정 필요하다.
4. 상대적으로 axios에 비해 기능이 부족하다

 

✅ GET 요청

axios

axios.get('/api/users')
  .then(response => {
    // 응답 데이터 처리
    console.log(response.data);
  })
  .catch(error => {
    // 에러 처리
    console.error(error);
  });

• .get() 메서드를 사용해 간단하게 GET 요청을 보낼 수 있다.
• 응답 데이터는 response.data로 접근할 수 있다.
• 에러 핸들링은 .catch() 메서드를 통해 처리할 수 있다.

fetch

fetch('/api/users')
  .then(response => response.json())
  .then(data => {
    // 응답 데이터 처리
    console.log(data);
  })
  .catch(error => {
    // 에러 처리
    console.error(error);
  });

• .json() 메서드를 사용하여 응답 데이터를 JSON 형식으로 파싱해야한다.
• 응답 데이터는 체이닝된 다음 .then() 블록에서 접근할 수 있다.
• 에러 핸들링은 동일하게 .catch() 메서드를 통해 처리할 수 있다.

✅ POST 요청

axios

axois

axios.post('/api/users', { name: 'John', age: 25 })
  .then(response => {
    // 응답 데이터 처리
    console.log(response.data);
  })
  .catch(error => {
    // 에러 처리
    console.error(error);
  });

• .post() 메서드를 사용하여 POST 요청을 보낼 수 있으며, 두번째 인자로 데이터가 전달된다.
• 응답 데이터는 response.data로 접근할 수 있다.

fetch

fetch('/api/users', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json'
  },
  body: JSON.stringify({ name: 'John', age: 25 })
})
  .then(response => response.json())
  .then(data => {
    // 응답 데이터 처리
    console.log(data);
  })
  .catch(error => {
    // 에러 처리
    console.error(error);
  });

• 요청 설정 객체에 method, headers, body 등을 명시하여 POST 요청을 구성해야 한다.
• 응답 데이터는 response.json() 을 사용하여 JSON 형식으로 파싱해야 한다.

결론

fetch를 사용하는 경우에는 요청 설정 객체에 더 많은 구성을 해주어야 하고, 응답 데이터에 접근하기 위해 .json() 메서드를 호출하여 데이터를 파싱해야하지만, axios는 코드를 간결하고 직관적으로 유지하는 데 도움이 된다. 하지만 fetch와 axios 중 어느 것을 선택할 지는 프로젝트의 요구 사항에 맞춰야 할 것 같다. 간단한 요청을 보낼 때는 fetch가 편리하며, 좀 더 복잡한 요청 및 에러 처리가 필요한 경우 axios를 사용할 수 있을 것 같다.

→ 이번 프로젝트에서는 axios를 활용하도록 하겠다.

 

---

참고

 

https://kindjjee.tistory.com/145

fetch 보다 axios를 쓰는 이유

 

https://tlsdnjs12.tistory.com/26

fetch와 axios 차이점과 비교