패칭

axios와 fetch모두 데이터 패칭을 위한 도구이다.

 

가장 큰 차이점은 axios는 외부 라이브러이인 반면 fetch는 자바스크립트에서 기본으로 제공한다.

 

fetch

fetch('https://cataas.com/cat')
  .then(response => {
    if (!response.ok) {
      throw new Error('Network response was not ok');
    }
    return response.blob();
  })
  .then(blob => {
    document.getElementById('catImage').src = URL.createObjectURL(blob);
  })
  .catch(error => {
    console.error('There was a problem with the fetch operation:', error);
  });

 

먼저 fetch를 사용하여 요청을 보내면 프로미스를 반환한다. 이에 대한 성공 반환값은 Response객체이며 값은 body에 ReadableStream객체로 되어있다. 이를 활용하려면 blob()이나 json()과 같은 메서드를 활용한다.

 

 

axios

import axios from 'axios';

axios.get('https://cataas.com/cat', { responseType: 'blob' })
  .then(response => {
    document.getElementById('catImage').src = URL.createObjectURL(response.data);
  })
  .catch(error => {
    console.error('There was a problem with the axios operation:', error);
  });

 

반환타입을 지정할 수 있으며 res내 data속성으로 바로 접근이 가능하다.

추후 인터셉터 등 래핑된 기능을 사용하여 프록시 기능을 손쉽게 구현할 수 있다.

 

1. 문법: `fetch`는 JavaScript의 내장 함수이며, `axios`는 별도의 라이브러리입니다. `axios`는 설정이 더 간단하고 직관적일 수 있습니다.

2. 에러 처리: `fetch`는 네트워크 오류가 아닌 경우에도 `reject`를 반환하지 않습니다. 반면, `axios`는 200 범위가 아닌 상태 코드에서 `reject`를 반환합니다.

3. 자동 JSON 변환: `axios`는 응답을 자동으로 JSON으로 변환합니다. `fetch`의 경우, 수동으로 `.json()`을 호출해야 합니다.

4. 브라우저 지원: `fetch`는 구형 브라우저에서는 지원되지 않을 수 있습니다. `axios`는 더 넓은 브라우저 호환성을 제공합니다.

5. 응답 시간 초과 설정 `axios`는 요청에 대한 시간 초과를 설정할 수 있지만, `fetch`는 이 기능이 내장되어 있지 않습니다.

이 예제들과 설명을 통해 `fetch`와 `axios` 간의 주요 차이점을 이해할 수 있습니다. 어떤 것을 사용할지는 프로젝트의 요구 사항과 개인적인 선호에 따라 달라질 수 있습니다.