fetch 보다 axios를 쓰는 이유

메인 프로젝트에서 템플릿을 사용할때, 왜 사용하는지 정리하는 중에 알게 된 사실이다.

왜 fetch 보다 axios를 쓰는 것이 좋을까?

axios와 fetch는 모두 HTTP 요청을 보내는 데 사용되는 도구입니다. 
하지만 axios는 fetch보다 편리한 API와 기능을 제공하며, 프로미스 기반으로 비동기 작업을 처리하는 데 있어서 더 직관적이고 편리한 방법을 제공합니다. 
아래 예시 코드를 통해 axios가 fetch보다 어떻게 편리한지 알아보겠습니다.

1. GET 요청
axios로 GET 요청을 보내는 예시 코드는 다음과 같습니다:

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


fetch로 GET 요청을 보내는 예시 코드는 다음과 같습니다:
fetch('/api/users')
  .then(response => response.json())
  .then(data => {
    // 응답 데이터 처리
    console.log(data);
  })
  .catch(error => {
    // 에러 처리
    console.error(error);
  });

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

fetch의 경우 .json() 메서드를 사용하여 응답 데이터를 JSON 형식으로 파싱해야 하며, 응답 데이터는 체이닝된 다음 .then() 블록에서 접근할 수 있습니다. 에러 핸들링은 마찬가지로 .catch() 메서드를 통해 처리됩니다.

2. POST 요청
axios로 POST 요청을 보내는 예시 코드는 다음과 같습니다:

javascript
Copy code
axios.post('/api/users', { name: 'John', age: 25 })
  .then(response => {
    // 응답 데이터 처리
    console.log(response.data);
  })
  .catch(error => {
    // 에러 처리
    console.error(error);
  });
fetch로 POST 요청을 보내는 예시 코드는 다음과 같습니다:

javascript
Copy code
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);
  });

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

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

 

요약

fetch를 사용하는 경우에는 요청 설정 객체에 더 많은 구성을 해주어야 하고, 응답 데이터에 접근하기 위해 .json() 메서드를 호출하여 데이터를 파싱해야 합니다. 
이로 인해 axios는 코드를 간결하고 직관적으로 유지하는 데 도움이 됩니다.