JS) fetch VS axios (API 호출)

Fetch

fetch는 ES6에서 도입된 네이티브 API로, 브라우저에서 제공됩니다. fetch는 Promise를 반환하며, 사용법은 다음과 같습니다.

 

fetch(url)
  .then(response => {
    if (!response.ok) {
      throw new Error("HTTP error " + response.status);
    }
    return response.json();
  })
  .then(data => {
    console.log(data);
  })
  .catch(error => {
    console.error(error);
  });

 

 

Axios

axios는 브라우저와 Node.js에서 모두 사용할 수 있는 라이브러리입니다. axios는 Promise를 반환하며, 사용법은 다음과 같습니다.

 

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

 

 

차이점

• 브라우저 호환성: fetch는 모던 브라우저에서 기본으로 지원되지만, IE에서는 작동하지 않습니다. 반면에 axios는 모든 브라우저에서 작동합니다.
• JSON 파싱: fetch는 response.json()을 사용하여 응답을 JSON 형태로 파싱해야합니다. 반면에 axios는 response.data를 사용하여 자동으로 JSON을 파싱합니다.
• 오류 처리: fetch에서는 catch를 사용하여 오류를 처리합니다. 반면에 axios는 catch 뿐만 아니라 then에서도 오류를 처리할 수 있습니다.
• 요청 취소: axios는 요청을 취소할 수 있는 기능을 제공합니다. fetch에서는 요청을 취소하는 방법이 없습니다.
• 인터셉터: axios는 요청과 응답에 대한 인터셉터를 제공합니다. 이를 사용하면 요청 전에 처리할 작업이나 응답 후에 처리할 작업을 정의할 수 있습니다.

 

 

어떤 방식이 더 효율적인지?

fetch와 axios 중에서 더 효율적인 것은 없습니다. 이 둘의 성능 차이는 거의 없으며, 사용하기 쉬운 API로 선택할 수 있습니다. 하지만 브라우저 호환성이나 요청 취소 등의 기능이 필요하다면 axios를 사용하는 것이 좋습니다. 반면에 모던 브라우저에서만 작업한다면 fetch를 사용하는 것이 좋습니다.